码迷,mamicode.com
首页 > Web开发 > 详细

[AngularJS] ui-router: Abstract States

时间:2014-12-17 06:43:01      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:style   blog   ar   io   color   os   sp   for   on   

ui-router has the powerful ability to define abstract states, or states that can‘t be navigated to, but are useful for defining a set of states with shared properties.

 

angular.module("auth", [])

    .config(function ($stateProvider) {

      $stateProvider
          .state(‘in‘, {
            url: ‘/in‘,
            template: ‘<h1>Sign In</h1>‘ +
                ‘<button class="btn btn-primary" ng-click="signIn()">Sign In Now</button>‘
          })
          .state(‘up‘, {
            url: ‘/up‘,
            template: ‘<h1>Sign Up for a Free Account.</h1>‘
          })
    });    

 

For example, the sign in page an sign up page share the same content. Those content can be written into the abstract ui router.

angular.module("auth", [])

    .config(function ($stateProvider) {

      $stateProvider
          .state(‘sign‘, {
            abstract: true,
            url: ‘/sign‘,
            template: ‘<a ui-sref=".in">Sign In</a>‘ +
                ‘<a ui-sref=".up">Sign Up!</a>‘ +
                ‘<ui-view/>‘,
            controller: function($scope, authService){
              $scope.signIn = function(){
                authService.signIn();
              }
            },
            resolve: {},
            data: {},
            onEnter: function(){},
            onExit: function(){}
          })
          .state(‘sign.in‘, {
            url: ‘/in‘,
            template: ‘<h1>Sign In</h1>‘ +
                ‘<button class="btn btn-primary" ng-click="signIn()">Sign In Now</button>‘
          })
          .state(‘sign.up‘, {
            url: ‘/up‘,
            template: ‘<h1>Sign Up for a Free Account.</h1>‘
          })
    });

 

[AngularJS] ui-router: Abstract States

标签:style   blog   ar   io   color   os   sp   for   on   

原文地址:http://www.cnblogs.com/Answer1215/p/4168508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!