《ui-route教程》由会员分享，可在线阅读，更多相关《ui-route教程（8页珍藏版）》请在金锄头文库上搜索。
1、学习 angular ui-router - 管理状态，有需要的朋友可以参考下。参考原文：https:/ 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。 在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置 通过定义 controller、template 和 view 等属性，来定义指定位置的用户界面和界面行为 通过嵌套的方式来解决页面中的一些重复出现的部位最简单的形式模板可以通过下面这种最简单的方式来指定12341234/ in app-states.js (or whatever you want to name it)$stateProvider.stat
2、e(contacts, template: My Contacts)模板将被插入哪里?状态被激活时，它的模板会自动插入到父状态对应的模板中包含 ui-view 属性的元素内部。如果是顶层的状态，那么它的父模板就是 index.html。激活状态有三种方法来激活状态：1. 调用$state.go()方法，这是一个高级的便利方法；2. 点击包含 ui-sref 指令的链接；3. 导航到与状态相关联的 url。Templates 模板可以通过下面几种方法来配置一个状态的模板。方法一：配置 template 属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式123$stateProvide
3、r.state(contacts, template: My Contacts)方法二：配置 templateUrl 属性，来加载指定位置的模板，这是设置模板的常用方法。123$stateProvider.state(contacts, templateUrl: contacts.html)templateUrl 的值也可以是一个函数返回的 url，函数带一个预设参数 stateParams。12345$stateProvider.state(contacts, templateUrl: function (stateParams)return /partials/contacts. + st
4、ateParams.filterBy + .html;)方法三：通过 templateProvider 函数返回模板的 HTML。1234567$stateProvider.state(contacts, templateProvider: function ($timeout, $stateParams) return $timeout(function () return + $stateParams.contactId + , 100);)如果想在状态被激活前，让有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。12345Some content will load he
5、re!Controllers 控制器可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。设置控制器：123456$stateProvider.state(contacts, template: 学习 ui-router - 管理状态,controller: function($scope)$scope.title = My Contacts;)如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：1234$stateProvider.state(contacts, template: .,controller: ContactsCtrl)使用 c
6、ontrollerAs 语法：1234$stateProvider.state(contacts, template: .,controller: ContactsCtrl as contact)对于更高级的需要，可以使用 controllerProvider 来动态返回一个控制器函数或字符串：1234567$stateProvider.state(contacts, template: .,controllerProvider: function($stateParams) var ctrlName = $stateParams.type + Controller;return ctrlNa
7、me;)控制器可以使用$scope.on()方法来监听事件状态转换。控制器可以根据需要实例化，当相应的 scope 被创建时。例如，当用户点击一个 url 手动导航一个状态时，$stateProvider 将加载对应的模板到视图中，并且将控制器和模板的 scope绑定在一起。解决器 Resolve可以使用 resolve 为控制器提供可选的依赖注入项。resolve 配置项是一个由 key/value 构成的对象。 key string：注入控制器的依赖项名称。 factory - string|function：o string：一个服务的别名o function：函数的返回值将作为依赖注入
8、项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。例子在 controller 实例化之前，resolve 中的每一个对象都必须 be resolved，请注意每个 resolved object 是怎样作为参数注入到控制器中的。1234567891011121314151617181920212223242526$stateProvider.state(myState, resolve:/ Example using function with simple return value./ Since its not a promise, i
9、t resolves immediately.simpleObj: function()return value: simple!;,/ Example using function with returned promise./ 这是一种典型使用方式/ 请给函数注入任何想要的服务依赖，例如 $httppromiseObj: function($http)/ $http returns a promise for the url datareturn $http(method: GET, url: /someUrl);,/ Another promise example. / 如果想对返回结果
10、进行处理， 可以使用 .then 方法/ 这是另一种典型使用方式promiseObj2: function($http)return $http(method: GET, url: /someUrl).then (function (data) return doSomeStuffFirst(data););, / 使用服务名的例子，这将在模块中查找名称为 translations 的服务，并返回该服务 / Note: The service could return a promise and/ it would work just like the example above2728293
11、0313233343536373839404142434445464748495051525354555657585960616263646566translations: translations,/ 将服务模块作为解决函数的依赖项，通过参数传入/ 提示：依赖项 $stateParams 代表 url 中的参数translations2: function(translations, $stateParams)/ Assume that getLang is a service method/ that uses $http to fetch some translations./ Also
12、 assume our url was /:lang/home.translations.getLang($stateParams.lang);,/ Example showing returning of custom made promisegreeting: function($q, $timeout)var deferred = $q.defer();$timeout(function() deferred.resolve(Hello!);, 1000);return deferred.promise;,/ 控制器将等待上面的解决项都被解决后才被实例化controller: funct
13、ion($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting)$scope.simple = simpleObj.value;/ 这里可以放心使用 promiseObj 中的对象$scope.items = promiseObj.items;$scope.items = promiseObj2.items;$scope.title = translations.getLang(english).title;$scope.title = translations2.title;$scop
14、e.greeting = greeting;)为 $state 对象提供自定义数据可以给 $state 对象提供自定义数据（建议使用 data 属性，以免冲突）123456789101112131415161718/ 基于对象和基于字符串定义 state 的例子var contacts = name: contacts,templateUrl: contacts.html,data: customData1: 5,customData2: blue $stateProvider.state(contacts).state(contacts.list, templateUrl: contacts
15、.list.html,data: customData1: 44,customData2: red )可以通过下面的方式来访问上面定义的数据：1234function Ctrl($state)console.log($state.current.data.customData1) / 输出 5;console.log($state.current.data.customData2) / 输出 blue;onEnter 和 onExit 回调函数onEnter 和 onExit 回调函数是可选配置项，分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。12345678910$stateProvider.state(contacts, template: 学习 ui-router - 管理状态,resolve: title: My Contacts ,controller: function($scope, title)$scope.title = My Contacts;,/ title 是解决依赖项，这里也是可以使用解决依赖项的onEnter: function(title) i
