ui-router All Versions

Examples

• 3

  Basic Example
  3

  app.js

  angular.module('myApp', ['ui.router'])
    .controller('controllerOne', function() {
      this.message = 'Hello world from Controller One!';
    })
    .controller('controllerTwo', function() {
      this.message = 'Hello world from Controller Two!';
    })
    .controller('controllerThree', function() {
      this.message = 'Hello world from Controller Three!';
    })
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('one', {
          url: "/one",
          templateUrl: "view-one.html",
          controller: 'controllerOne',
          controllerAs: 'ctrlOne'
        })
        .state('two', {
          url: "/two",
          templateUrl: "view-two.html",
          controller: 'controllerTwo',
          controllerAs: 'ctrlTwo'
        })
        .state('three', {
          url: "/three",
          templateUrl: "view-three.html",
          controller: 'controllerThree',
          controllerAs: 'ctrlThree'
        });
  
        $urlRouterProvider.otherwise('/one');
    });
  

  index.html

  <div ng-app="myApp">
    <nav>
      <!-- links to switch routes -->
      <a ui-sref="one">View One</a>
      <a ui-sref="two">View Two</a>
      <a ui-sref="three">View Three</a>
    </nav>
    <!-- views will be injected here -->
    <div ui-view></div>
    <!-- templates can live in normal html files -->
    <script type="text/ng-template" id="view-one.html">
      <h1>{{ctrlOne.message}}</h1>
    </script>
  
    <script type="text/ng-template" id="view-two.html">
      <h1>{{ctrlTwo.message}}</h1>
    </script>
  
    <script type="text/ng-template" id="view-three.html">
      <h1>{{ctrlThree.message}}</h1>
    </script>
  </div>
  

  edited Nov 10 '16 at 13:27

  

  
  discuss (1)
• 3

  Multiple Views
  3

  app.js

  angular.module('myApp', ['ui.router'])
    .controller('controllerOne', function() {
      this.message = 'Hello world from Controller One!';
    })
    .controller('controllerTwo', function() {
      this.message = 'Hello world from Controller Two!';
    })
    .controller('controllerThree', function() {
      this.message = 'Hello world from Controller Three!';
    })
    .controller('controllerFour', function() {
      this.message = 'Hello world from Controller Four!';
    })
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('one', {
          url: "/one",
          views: {
            "viewA": {
              templateUrl: "view-one.html",
              controller: 'controllerOne',
              controllerAs: 'ctrlOne'
            },
            "viewB": {
              templateUrl: "view-two.html",
              controller: 'controllerTwo',
              controllerAs: 'ctrlTwo'
            }
          }
        })
        .state('two', {
          url: "/two",
          views: {
            "viewA": {
              templateUrl: "view-three.html",
              controller: 'controllerThree',
              controllerAs: 'ctrlThree'
            },
            "viewB": {
              templateUrl: "view-four.html",
              controller: 'controllerFour',
              controllerAs: 'ctrlFour'
            }
          }
        });
  
      $urlRouterProvider.otherwise('/one');
    });
  

  index.html

  <div ng-app="myApp">
    <nav>
      <!-- links to switch routes -->
      <a ui-sref="one">Route One</a>
      <a ui-sref="two">Route Two</a>
    </nav>
    <!-- views will be injected here -->
    <div ui-view="viewA"></div>
    <div ui-view="viewB"></div>
    <!-- templates can live in normal html files -->
    <script type="text/ng-template" id="view-one.html">
      <h1>{{ctrlOne.message}}</h1>
    </script>
  
    <script type="text/ng-template" id="view-two.html">
      <h1>{{ctrlTwo.message}}</h1>
    </script>
  
    <script type="text/ng-template" id="view-three.html">
      <h1>{{ctrlThree.message}}</h1>
    </script>
  
    <script type="text/ng-template" id="view-four.html">
      <h1>{{ctrlFour.message}}</h1>
    </script>
  </div>
  

  edited Nov 10 '16 at 13:27

  

  
  discuss
• 2

  Using resolve functions to load data
  2

  app.js

  angular.module('myApp', ['ui.router'])
    .service('User', ['$http', function User ($http) {
      this.getProfile = function (id) {
        return $http.get(...) // method to load data from API
      };
    }])
    .controller('profileCtrl', ['profile', function profileCtrl (profile) {
      // inject resolved data under the name of the resolve function
      // data will already be returned and processed
      this.profile = profile;
    }])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('profile', {
          url: "/profile/:userId",
          templateUrl: "profile.html",
          controller: 'profileCtrl',
          controllerAs: 'vm',
          resolve: {
            profile: ['$stateParams', 'User', function ($stateParams, User) {
              // $stateParams will contain any parameter defined in your url
              return User.getProfile($stateParams.userId)
                // .then is only necessary if you need to process returned data
                .then(function (data) {
                  return doSomeProcessing(data);
                });
            }]
          }
        }]);
  
        $urlRouterProvider.otherwise('/');
    });
  

  profile.html

  <ul>
    <li>Name: {{vm.profile.name}}</li>
    <li>Age: {{vm.profile.age}}</li>
    <li>Sex: {{vm.profile.sex}}</li>
  </ul>
  

  View UI-Router Wiki entry on resolves here.

  Resolve functions must be resolved before the $stateChangeSuccess event is fired, which means that the UI will not load until all resolve functions on the state have finished. This is a great way to ensure that data will be available to your controller and UI. However, you can see that a resolve function should be fast in order to avoid hanging the UI.

  created Sep 12 '16 at 9:13

  
  discuss
• 1

  Nested Views / States
  1

  app.js

  var app = angular.module('myApp',['ui.router']);
  
  app.config(function($stateProvider,$urlRouterProvider) {
  
      $stateProvider
  
      .state('home', {
          url: '/home',
          templateUrl: 'home.html',
          controller: function($scope){
              $scope.text = 'This is the Home'
          }
      })
  
      .state('home.nested1',{
          url: '/nested1',
          templateUrl:'nested1.html',
          controller: function($scope){
              $scope.text1 = 'This is the nested view 1'
          }
      })
  
      .state('home.nested2',{
          url: '/nested2',
          templateUrl:'nested2.html',
          controller: function($scope){
              $scope.fruits = ['apple','mango','oranges'];
          }
      });
  
      $urlRouterProvider.otherwise('/home');
  
  });
  

  index.html

    <div ui-view></div>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
     <script src="angular-ui-router.min.js"></script>
     <script src="app.js"></script>
  

  home.html

  <div>
  <h1> {{text}} </h1>
  <br>
      <a ui-sref="home.nested1">Show nested1</a>
      <br>
      <a ui-sref="home.nested2">Show nested2</a>
      <br>
  
      <div ui-view></div>
  </div>
  

  nested1.html

  <div>
  <h1> {{text1}} </h1>
  </div>
  

  nested2.html

  <div>
      <ul>
        <li ng-repeat="fruit in fruits">{{ fruit }}</li>
      </ul>    
  </div>
  

  edited Nov 8 '16 at 20:49

  

  
  discuss