Angular UI Router Boilerplate

Simple boilerplate for AngularJS + UI Router

by jonva

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<div ng-app="myapp" ng-controller="mycontroller">
  <input type="text" ng-model="filterText.name">
  <ul>
    <li ng-repeat="item in items | filter: filterText">
      <span ng-bind="$index"></span>
      <span ng-bind="item.name"></span>
      <ui-view></ui-view>
    </li>
  </ul><a ui-sref="home">Home</a>
  <a ui-sref="item({itemid: 'abc'})">Item</a>
  <a ui-sref="animals({itemid: 'abc', cat: 'persian', dog: 'labradoodle'})">Animals</a>
</div>

JavaScript

angular.module('myapp', ['ui.router'])
  .config(function myconfig($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        template: '<div>home</div>'
      })
      .state('item', {
        url: '/:itemid',
        template: '<div>item</div>'
      })
      .state('animals', {
        url: '/:itemid?cat&dog',
        template: '<div>{{cat}} , {{dog}}</div>',
        controller: function($scope, $stateParams) {
          $scope.cat = $stateParams.cat;
          $scope.dog = $stateParams.dog;
          console.log(window.location.href);
        }
      })
  })
  .controller('mycontroller', ['$scope', function mycontroller($scope) {
    $scope.items = [{
      name: 'john',
      email: '[email protected]'
    }, {
      name: 'amy',
      email: '[email protected]'
    }, {
      name: 'lee',
      email: '[email protected]'
    }, {
      name: 'jack',
      email: '[email protected]'
    }, {
      name: 'lisa',
      email: '[email protected]'
    }];
  }]);