Angular UI Router

Playing with angular ui router and nested views

by jacobwsmith

HTML

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

CSS

.active {
  font-weight: bold;
}
.nav-link {
  color: blue;
  cursor: pointer;
}

JavaScript

angular.module('app', ['ui.router'])
  .config(function($urlRouterProvider, $stateProvider) {
    // An array of state definitions
    var states = [{
      name: 'home',
      url: '/',
      template: 'home.html'
    }, {
      name: 'test',
      url: '/test',
      template: 'test.html'
    }, {
      name: 'child',
      url: '/test/child',
      template: 'child.html'
    }, ];
    // Loop over the state definitions and register them
    states.forEach(function(state) {
      $stateProvider.state(state);
    });
  })
  .component('appComponent', {
    template: `
    	<ul>
      	<li>
        	<div ui-sref="home" ui-sref-active="active" class="nav-link">Home</div>
        </li>
      	<li>
        	<div ui-sref="test" ui-sref-active="active" class="nav-link">Test</div>
        	<ul>
	          <li>
            	<div ui-sref="child" ui-sref-active="active" class="nav-link">Child 1</div>
            </li>
          </ul>
        </li>
      </ul>
      <hr>
      <div ui-view>root</div>
     `,
  });