Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

It seems like Angular.js ui-router must have ui-view in order to have the whole thing to work. Here is an example without ui-view and routing is NOT working (no alert): http://plnkr.co/edit/e1vzj6pDdqADKJ2LSsd3?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script>
    <script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a href="#/link">Test</a>
    <!--div ui-view></div-->
  </body>

</html>

Javascript:

var app = angular.module('plunker', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider
    .state("link", {
      url: "/link",
      resolve: {
        test: function() {
          alert("Triggered resolve /link");
          return true;
        }
      }
    });
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

If you put <div ui-view></div> back in, it would work.

This is not big deal because I could leave that ui-view empty. I don't use ui-view (may sound strange) because ui-view replace DOMs. I just want to toggle my container instead of doing completed rip-and-replace.

  1. Is it the right approach of leaving ui-router empty as a hack?

  2. Is there a way to make ui-router NOT require ui-view?

share|improve this question

1 Answer 1

up vote 2 down vote accepted

You can use ng-show or ng-if to achieve toggling of dom elements. But I do get your point that sometimes you need to just use ui-router as an object oriented location management tool.

You can use the ui-sref attribute on your <a> instead of a pure href as a hack to get to a state that doesn't know where to get rendered.

I edited your plunkr to demonstrate:

http://plnkr.co/edit/KLm8HTIkvnbGzhzmwSwG?p=preview

basically change

  <a href="#/link">Test</a>

to:

 <a ui-sref="link">Test</a>

I am not sure of best practices or anything. It is a good question and I am sorry I can't completely answer on the 1-st point that you made. Not sure if it is the right approach, it all depends on how you use ui-router. In a rather big app we have somewhat many named views and then we do use ui-view, but I can see how sometimes it would be useless.

share|improve this answer
    
Using ui-sref works and without ui-view directive in the HTML. I am curious why is that the case. Also how do I use ui-sref if I need to pass params as well, not just the state –  HP. Feb 12 at 21:47
    
i forked the plunk and created one for you that demonstrates how to pass params: plnkr.co/edit/L38Tz8CiUt4e4FV6Vmml?p=preview. I can see how in some situations that way of passing stuff to ui-router can be benefitial but in most situations I'd use pure hrefs. If you indeed don't need rendering of views, I'd still use an emtpy ui-view just cause html code looks neater. –  baba Feb 12 at 22:17
    
baba, did you change anything in your plnkr code because I didn't see the code to pass params –  HP. Feb 24 at 4:14
    
Never mind, I figured out here angular-ui.github.io/ui-router/site/#/api/… –  HP. Feb 24 at 4:28
    
@HP I had, in my comment –  baba Feb 24 at 8:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.