ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。

在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置
通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为
通过嵌套的方式来解决页面中的一些重复出现的部位

最简单的形式

模板可以通过下面这种最简单的方式来指定

My Contacts' })

模板将被插入哪里?

状态被激活时，它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态，那么它的父模板就是index.html。

激活状态

有三种方法来激活状态：

调用$state.go()方法，这是一个高级的便利方法。
点击包含ui-sref指令的链接。
导航到与状态相关联的 url。

Templates 模板

可以通过下面几种方法来配置一个状态的模板。方法一：配置template属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式。

,{ template: My Contacts' })

方法二：配置templateUrl属性，来加载指定位置的模板，这是设置模板的常用方法。

,{ templateUrl: })

templateUrl 的值也可以是一个函数返回的url，函数带一个预设参数stateParams。

方法三：通过 templateProvider 函数返回模板的 HTML。

.state(,{ templateProvider: ,) { ( { ' + .contactId + ' },); } })

如果想在状态被激活前，让有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。

> > >Some content will load here!> > >

Controllers 控制器

可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。设置控制器：

: '

',controller: function($scope){ $scope.title = ' '; } })

如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：

,{ template: ,controller: })

使用 controllerAs语法：

,controller: })

对于更高级的需要，可以使用controllerProvider来动态返回一个控制器函数或字符串：

,controllerProvider: ($stateParams) { var ctrlName = $stateParams.type + ; ctrlName; } })

控制器可以使用 $scope.on()方法来监听事件状态转换。控制器可以根据需要实例化，当相应的 scope 被创建时。例如，当用户点击一个 url 手动导航一个状态时，$stateProvider 将加载对应的模板到视图中，并且将控制器和模板的 scope 绑定在一起。

解决器 Resolver

可以使用 resolver 为控制器提供可选的依赖注入项。 resolver 配置项是一个由key/value构成的对象。

key – {string} ：注入控制器的依赖项名称。

factory – {string|function} ：

1、string：一个服务的别名

2、function：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（be resolved）才会被实例化。

例子

在 controller 实例化之前，resolve 中的每一个对象都必须 be resolved，请注意每个 resolved object 是怎样作为参数注入到控制器中的。

.state(,{ resolve:{

// Example using function with simple return value.
// Since it's not a promise,it resolves immediately.
simpleObj: function(){
return {value: 'simple!'};
},// Example using function with returned promise.
// 这是一种典型使用方式
// 请给函数注入任何想要的服务依赖，例如 $http
promiSEObj: function($http){
// $http returns a promise for the url data
return $http({method: 'GET',url: '/someUrl'});
},// Another promise example.
// 如果想对返回结果进行处理，可以使用 .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 above
translations: "translations",// 将服务模块作为解决函数的依赖项，通过参数传入
// 提示：依赖项 $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 promise
greeting: function($q,$timeout){
var deferred = $q.defer();
$timeout(function() {
deferred.resolve('Hello!');
},1000);
return deferred.promise;
}
},// 控制器将等待上面的解决项都被解决后才被实例化
controller: function($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;

$scope.greeting = greeting;
}
})

为 $state 对象提供自定义数据

可以给 $state 对象提供自定义数据（建议使用data属性，以免冲突）

contacts = { name: ,templateUrl: ,data: { customData1: ,customData2: } } $stateProvider .state(contacts) .state(,{ templateUrl: ,data: { customData1: ,customData2: } })

可以通过下面的方式来访问上面定义的数据：

){ console.log(.current.data.customData1) 输出 5; console.log(.current.data.customData2) 输出 "blue"; }

onEnter 和 onExit 回调函数

onEnter和onExit回调函数是可选配置项，分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。

,{ template: {{title}}',resolve: { title: },controller: ($scope,title){ $scope.title = ; },// title 是解决依赖项，这里也是可以使用解决依赖项的 onEnter: (title){ (title){ do something } },// title 是解决依赖项，这里也是可以使用解决依赖项的 onExit: (title){ (title){ do something } } })

State Change Events 状态改变事件

所有这些事件都是在$rootScope作用域触发

$stateChangeStart – 当模板开始解析之前触发

,(event,toState,toParams,fromState,fromParams){ })

注意：使用event.preventDefault()可以阻止模板解析的发生

.(,{ event.preventDefault(); })

$stateNotFound – v0.3.0 – 在 transition 时通过状态名查找状态，当状态无法找到时发生。该事件在 scope 链上广播，只允许一次处理错误的机会。unfoundState将作为参数传入事件监听函数，下面例子中可以看到unfoundState的三个属性。使用 event.preventDefault() 来阻止模板解析.

has not been defined .go(,{a:,b:},{inherit:false}); // somewhere else .('',function(event,unfoundState,State,Params){ console.(unfoundState.); // console.(unfoundState.Params); // {a:,b:} console.(unfoundState.options); // {inherit:false} + options })

$stateChangeSuccess – 当模板解析完成后触发

,fromParams){ })

$stateChangeError – 当模板解析过程中发生错误时触发

,fromParams,error){ })

View Load Events 视图加载事件

$viewContentLoading – 当视图开始加载，DOM渲染完成之前触发，该事件将在$scope链上广播此事件。

.(,viewConfig){ });

$viewContentLoaded – 当视图加载完成，DOM渲染完成之后触发，视图所在的$scope发出该事件。

,$scope.$on(,(event){ });

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

原文链接：https://www.f2er.com/js/43107.html

利用Angularjs中模块ui-route管理状态的方法