Skip to content

Cookbook: Angular UI Router Templates

Jump to bottom Edit New page
MatthewVita edited this page Dec 31, 2014 · 2 revisions

Q: How do I specify a template in Angular UI Router?

Regardless of markup type (e.x.: Jade or HTML), templates are stored in Angular's $templateCache. Rupert intelligently stores the template as based off of the template's relative 'feature' directory name via a <dir>/<component name>-template.<ext> format.

  1. Once Rupert is installed, ensure the Angular toolkit is in place:

    npm install --save rupert-config-angular

  2. Add the UI Router dependency to /src/client/main.js (it is built into the Rupert Angular install as the default router/state machine):

    angular.module('rupert-app', [
    'ui.router'
]);

  3. Add the UI Router view directive to /src/client/index.html (default index is in Jade markup):

    ...
<body>
  <ui-view></ui-view>
...

  4. Create a test feature directory (/src/client/foo) with a bar-template.html therein:

    <h1>{{baz}}</h1>

  5. Appropriately reference the template in /src/client/main.js:

    angular.module('rupert-app', [
    'ui.router',
    'foo.bar.template'
]);

angular.module('rupert-app')
    .config(function($stateProvider) {
        $stateProvider
            .state('some-state', {
                url: '/some-state',
                templateUrl: 'foo/bar',
                controller: function($scope) {
                    $scope.baz = 'bop';
                }
            });
    });

...and route /#/some-state should show text 'bop' in a large font.

Note that this is a trivial example and route declarations/controllers should be broken out into their respective individual files for production.

Add a custom footer
Add a custom sidebar

Clone this wiki locally