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="home({itemid: 'abc'})">Item</a>
  <a ui-sref="drugs({name: 'abc', searchParams: 'persian', page: 'labradoodle'})">Animals</a>
</div>

JavaScript

angular.module('myapp', ['ui.router'])
  .config(function myconfig($stateProvider) {

    $stateProvider
      .state('home', {
        url: '/',
        template: '<div>asdadasdas</div>'
      })
      .state('drugs', {
        url: '/drugs/searchby/:name?searchParams&page',
        template: '<div> {{name}} {{searchParams}}{{page}}</div>',
        controller: function($scope, $stateParams) {
	$scope.name = $stateParams.name;
  	$scope.searchParams = $stateParams.searchParams;
      	$scope.page = $stateParams.page;


},
        params: {
          searchParams: null,
          page: null
        }
      });


  })
  .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]'
    }];
  }]);