Routing Views with Angular

Outline

Now that we understand the basics of Angular templates, controllers, and services, we're going to start diving into some of the concepts that make client side web applications so dynamic and powerful. To do this, we're going to need to learn how to deal with multiple views and controllers, which we will accomplish using the wonderful ui-router library.

To get started, lets include the library after we include Angular in our index.html:

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>

Because we are adding an external module, we need to be sure to include it as a dependency in our app:

angular.module('flapperNews', ['ui.router'])

You may be wondering why we have chosen to use ui-router instead of the more standard ngRoute module - ui-router is newer and provides more flexibility and features than ngRoute. We will be using a few of these in this tutorial.

Adding a New State

Now that we have ui-router included, we need to configure it. In our app.js, we're going to use the Angular config() function to setup a home state.

Create the config block for our app and configure a home state using $stateProvider and $urlRouterProvider. Use otherwise() to redirect unspecified routes.

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

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    });

  $urlRouterProvider.otherwise('home');
}]);

Here we set up our home route. You'll notice that the state is given a name ('home'), URL ('/home'), and template URL ('/home.html'). We've also told Angular that our new state should be controlled by MainCtrl. Finally, using the otherwise() method we've specified what should happen if the app receives a URL that is not defined. All that's left to do is define the home.html template. Instead of creating a new file, we are going to move most of our HTML into an inline template.

Add our inline home template right before the </body> tag in index.html:

<script type="text/ng-template" id="/home.html">
  <div class="page-header">
    <h1>Flapper News</h1>
  </div>

  <!-- rest of template -->
</script>

Using this syntax we can create templates inside our HTML and reference them in JavaScript.

Finally, we need to tell ui-router where to place the template of the active state.

Insert the <ui-view> tag where template should be rendered:

<body ng-app="flapperNews">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
    </div>
  </div>

  ...

Whenever ui-router detects a route change, it will place the new state's template inside the <ui-view> tag and initialize the controller we specified in our state configuration. Notice how we have removed the ng-controller="MainCtrl" line from the opening <body> tag.

Check your work

You can view the completed & working code for this tutorial here:

Now we've set up ui-router for our appllication. In the next chapter, we'll go over how to create additional states and use route parameters.

Go Pro to unlock all content & remove ads

Routing Views with Angular

Outline

Outline

Adding a New State

Check your work

I finished! On to the next chapter