作者原文地址&＃xff1a;http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/
参考原文&＃xff1a;https://github.com/angular-ui/ui-router/wiki
ui-router 的工作原理非常类似于 Angular 的路由控制器&＃xff0c;但它只关注状态。
- 在应用程序的整个用户界面和导航中&＃xff0c;一个状态对应于一个页面位置
- 通过定义
controller、template和view等属性&＃xff0c;来定义指定位置的用户界面和界面行为 - 通过嵌套的方式来解决页面中的一些重复出现的部位
最简单的形式
模板可以通过下面这种最简单的方式来指定
<body ng-controller&＃61;"MainCtrl"><section ui-view>section>
body>
// in app-states.js (or whatever you want to name it)
$stateProvider.state(&＃39;contacts&＃39;, {template: &＃39;<h1>My Contactsh1>&＃39;
})
模板将被插入哪里?
激活状态状态被激活时&＃xff0c;它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态&＃xff0c;那么它的父模板就是index.html。
有三种方法来激活状态&＃xff1a;
- 调用
$state.go()方法&＃xff0c;这是一个高级的便利方法&＃xff1b; - 点击包含
ui-sref指令的链接&＃xff1b; - 导航到与状态相关联的 url。
Templates 模板
可以通过下面几种方法来配置一个状态的模板。
方法一&＃xff1a;配置template属性&＃xff0c;指定一段 HTML 字符串&＃xff0c;这人是设置模板的最简单的方式
$stateProvider.state(&＃39;contacts&＃39;, {template: &＃39;
My Contacts
&＃39;
})方法二&＃xff1a;配置templateUrl属性&＃xff0c;来加载指定位置的模板&＃xff0c;这是设置模板的常用方法。
$stateProvider.state(&＃39;contacts&＃39;, {templateUrl: &＃39;contacts.html&＃39;
})
templateUrl的值也可以是一个函数返回的url&＃xff0c;函数带一个预设参数stateParams。
$stateProvider.state(&＃39;contacts&＃39;, {templateUrl: function (stateParams){return &＃39;/partials/contacts.&＃39; &＃43; stateParams.filterBy &＃43; &＃39;.html&＃39;;}
})
方法三&＃xff1a;通过templateProvider函数返回模板的 HTML。templateUrl的值也可以是一个函数返回的url&＃xff0c;函数带一个预设参数stateParams。
$stateProvider.state(&＃39;contacts&＃39;, {templateProvider: function ($timeout, $stateParams) {return $timeout(function () {return &＃39;
&＃39; &＃43; $stateParams.contactId &＃43; &＃39;
&＃39;
}, 100
);}
}) 如果想在状态被激活前&＃xff0c;让
<body><ui-view><i>Some content will load here!i>ui-view>
body>
Controllers 控制器
可以为模板指定一个控制器&＃xff08;controller&＃xff09;。警告&＃xff1a;控制器不会被实例化如果模板没有定义。
设置控制器&＃xff1a;
$stateProvider.state(&＃39;contacts&＃39;, {template: &＃39;
{{title}}
&＃39;
,controller: function($scope){$scope.title &＃61; &＃39;My Contacts&＃39;
;}
}) 如果在模块中已经定义了一个控制器&＃xff0c;只需要指定控制器的名称即可&＃xff1a;
$stateProvider.state(&＃39;contacts&＃39;, {template: ...,controller: &＃39;ContactsCtrl&＃39;
})
使用controllerAs语法&＃xff1a;
$stateProvider.state(&＃39;contacts&＃39;, {template: ...,controller: &＃39;ContactsCtrl as contact&＃39;
})
对于更高级的需要&＃xff0c;可以使用controllerProvider来动态返回一个控制器函数或字符串&＃xff1a;
$stateProvider.state(&＃39;contacts&＃39;, {
template: ...,
controllerProvider: function($stateParams) {
var ctrlName &＃61; $stateParams.type &＃43; "Controller";
return ctrlName;
}
})
控制器可以使用$scope.on()方法来监听事件状态转换。
控制器可以根据需要实例化&＃xff0c;当相应的scope被创建时。例如&＃xff0c;当用户点击一个url手动导航一个状态时&＃xff0c;$stateProvider将加载对应的模板到视图中&＃xff0c;并且将控制器和模板的scope绑定在一起。
解决器 Resolve
可以使用resolve为控制器提供可选的依赖注入项。
resolve配置项是一个由key/value构成的对象。
- key – {string}&＃xff1a;注入控制器的依赖项名称。
- factory - {string|function}&＃xff1a;
- string&＃xff1a;一个服务的别名
- function&＃xff1a;函数的返回值将作为依赖注入项&＃xff0c;如果函数是一个耗时的操作&＃xff0c;那么控制器必须等待该函数执行完成&＃xff08;be resolved&＃xff09;才会被实例化。
例子
在controller实例化之前&＃xff0c;resolve中的每一个对象都必须 be resolved&＃xff0c;请注意每个 resolved object 是怎样作为参数注入到控制器中的。
$stateProvider.state(&＃39;myState&＃39;, {resolve:{// Example using function with simple return value.// Since it&＃39;s not a promise, it resolves immediately.simpleObj: function(){return {value: &＃39;simple!&＃39;};},// Example using function with returned promise.// 这是一种典型使用方式// 请给函数注入任何想要的服务依赖&＃xff0c;例如 $httppromiseObj: function($http){// $http returns a promise for the url datareturn $http({method: &＃39;GET&＃39;, url: &＃39;/someUrl&＃39;});},// Another promise example. // 如果想对返回结果进行处理&＃xff0c; 可以使用 .then 方法// 这是另一种典型使用方式promiseObj2: function($http){return $http({method: &＃39;GET&＃39;, url: &＃39;/someUrl&＃39;}).then (function (data) {return doSomeStuffFirst(data);});}, // 使用服务名的例子&＃xff0c;这将在模块中查找名称为 &＃39;translations&＃39; 的服务&＃xff0c;并返回该服务 // Note: The service could return a promise and// it would work just like the example abovetranslations: "translations",// 将服务模块作为解决函数的依赖项&＃xff0c;通过参数传入// 提示&＃xff1a;依赖项 $stateParams 代表 url 中的参数translations2: function(translations, $stateParams){// Assume that getLang is a service method// that uses $http to fetch some translations.// Also assume our url was "/:lang/home".
translations.getLang($stateParams.lang);},// Example showing returning of custom made promisegreeting: function($q, $timeout){var deferred &＃61; $q.defer();$timeout(function() {deferred.resolve(&＃39;Hello!&＃39;);}, 1000);return deferred.promise;}},// 控制器将等待上面的解决项都被解决后才被实例化controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){$scope.simple &＃61; simpleObj.value;// 这里可以放心使用 promiseObj 中的对象$scope.items &＃61; promiseObj.items;$scope.items &＃61; promiseObj2.items;$scope.title &＃61; translations.getLang("english").title;$scope.title &＃61; translations2.title;$scope.greeting &＃61; greeting;}})
为 $state 对象提供自定义数据
可以给 $state 对象提供自定义数据&＃xff08;建议使用data属性&＃xff0c;以免冲突&＃xff09;
// 基于对象和基于字符串定义 state 的例子
var contacts &＃61; { name: &＃39;contacts&＃39;,templateUrl: &＃39;contacts.html&＃39;,data: {customData1: 5,customData2: "blue"}
}
$stateProvider.state(contacts).state(&＃39;contacts.list&＃39;, {templateUrl: &＃39;contacts.list.html&＃39;,data: {customData1: 44,customData2: "red"} })
可以通过下面的方式来访问上面定义的数据&＃xff1a;
function Ctrl($state){console.log($state.current.data.customData1) // 输出 5;console.log($state.current.data.customData2) // 输出 "blue";
}
onEnter 和 onExit 回调函数
onEnter和onExit回调函数是可选配置项&＃xff0c;分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。
$stateProvider.state("contacts", {template: &＃39;
{{title}}
&＃39;
,resolve: { title: &＃39;My Contacts&＃39;
},controller: function($scope, title){$scope.title &＃61; &＃39;My Contacts&＃39;
;},// title 是解决依赖项&＃xff0c;这里也是可以使用解决依赖项的onEnter:
function(title){ if(title){ ...
do something ... }},// title 是解决依赖项&＃xff0c;这里也是可以使用解决依赖项的onExit:
function(title){if(title){ ...
do something ... }}
}) State Change Events 状态改变事件
所有这些事件都是在$rootScope作用域触发
- $stateChangeStart - 当模板开始解析之前触发
$rootScope.$on(&＃39;$stateChangeStart&＃39;,
function(event, toState, toParams, fromState, fromParams){ ... })
注意&＃xff1a;使用event.preventDefault()可以阻止模板解析的发生
$rootScope.$on(&＃39;$stateChangeStart&＃39;,
function(event, toState, toParams, fromState, fromParams){ event.preventDefault(); // transitionTo() promise will be rejected with // a &＃39;transition prevented&＃39; error
})
- $stateNotFound -
v0.3.0 - 在 transition 时通过状态名查找状态&＃xff0c;当状态无法找到时发生。该事件在 scope 链上广播&＃xff0c;只允许一次处理错误的机会。unfoundState将作为参数传入事件监听函数&＃xff0c;下面例子中可以看到unfoundState的三个属性。使用 event.preventDefault() 来阻止模板解析&＃xff0c;
// somewhere, assume lazy.state has not been defined
$state.go("lazy.state", {a:1, b:2}, {inherit:false});// somewhere else
$scope.$on(&＃39;$stateNotFound&＃39;,
function(event, unfoundState, fromState, fromParams){ console.log(unfoundState.to); // "lazy.state"console.log(unfoundState.toParams); // {a:1, b:2}console.log(unfoundState.options); // {inherit:false} &＃43; default options
})
- $stateChangeSuccess - 当模板解析完成后触发
$rootScope.$on(&＃39;$stateChangeSuccess&＃39;,
function(event, toState, toParams, fromState, fromParams){ ... })
- $stateChangeError - 当模板解析过程中发生错误时触发
$rootScope.$on(&＃39;$stateChangeError&＃39;,
function(event, toState, toParams, fromState, fromParams, error){ ... })
View Load Events 视图加载事件
$viewContentLoading - 当视图开始加载&＃xff0c;DOM渲染完成之前触发&＃xff0c;该事件将在$scope链上广播此事件。
$scope.$on(&＃39;$viewContentLoading&＃39;,
function(event, viewConfig){ // Access to all the view config properties.// and one special property &＃39;targetView&＃39;// viewConfig.targetView
});
- $viewContentLoaded - 当视图加载完成&＃xff0c;DOM渲染完成之后触发&＃xff0c;视图所在的
$scope发出该事件。
$scope.$on(&＃39;$viewContentLoading&＃39;,
$scope.$on(&＃39;$viewContentLoaded&＃39;,
function(event){ ... });
本文转自吕大豹博客园博客&＃xff0c;原文链接http://www.cnblogs.com/lvdabao/articles/4657235.html&＃xff0c;如需转载请自行联系原作者
京公网安备 11010802041100号