Simple Routing - AngularBoilerplateProject/Baseplate GitHub Wiki

The routing in Baseplate is built on top of UI-Router, with a few small changes.

This doc is mostly about using best practices in routing and app structure. You will most likely find a much better UI-Router tutorial on Google somewhere.

With that in mind, lets begin.

For this example, we will be building a non-functional feed route.

step one

create a folder under /app/ called feed.

step two

create these files under the new feed folder: feed.module.js feed.route.js feed.controller.js feed.html

step three

We need to create the module that semantically contains our feed. You can find some good answers on stack overflow as to why we create submodules in Angular. I don't plan on going through it here.

/app/feed/feed.module.js

(function() {
  'use strict';

  angular.module('app.feed', ['app.core', 'app.widgets']);
})();

step four

Lets make the routing file for the feed. All this file does is declare a route to the angular app. There is a config here, but most of it is just plain old UI-router configs.

/app/feed/feed.route.js

(function() {
  'use strict';

  angular
    .module('app.feed')
    .run(appRun);

  appRun.$inject = ['routerHelper'];
  /* @ngInject */
  function appRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
      {
        state: 'feed',
        config: {
          url: '/settings',
          templateUrl: 'app/feed/feed.html',
          controller: 'FeedController',
          controllerAs: 'vm',
          title: 'Feed',
          settings: {
            nav: 2,
            content: '<i class="fa fa-flag"></i> Feed'
          }
        }
      }
    ];
  }
})();

As you can see, we are stating that this router is attached to the app.feed module. The routerHelper just attaches to the core of the app to give us automatic navigation. I wont be going into detail on this. its fairly straightforward.

step five

for now, just copy over the code from the login controller at /app/login/login.controller.js, gut the logic and rename it. This is all very standard after this, so I will not go into a tutorial for writing controllers and services and stuff.

The template is a bit specific though

Make sure that any templates you create that are supposed to sit within the center column of the page are contained like this;

<section class="mainbar">
  <section class="matter">
    <div class="container">
      <!-- Put all of your html here -->
    </div>
  </section>
</section>