利用Angularjs中模块ui-route管理状态的方法  更新时间:2016年12月27日 08:44:47   作者:strivescript   这篇文章主要给大家介绍了如何用Angularjs中的模板ui-route来管理状态的方法,文中通过示例代码介绍的很详细,相信对大家的理解和学习具有一定的参考借鉴价值,有需要的朋友可以一起来学习学习。 ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态。 在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置 通过定义controller、template和view等属性,来定义指定位置的用户界面和界面行为 通过嵌套的方式来解决页面中的一些重复出现的部位 最简单的形式 模板可以通过下面这种最简单的方式来指定 // in app-states.js (or whatever you want to name it) $stateProvider.state(‘contacts’, { template: ‘My Contacts’ }) 模板将被插入哪里? 状态被激活时,它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态,那么它的父模板就是index.html。 激活状态 有三种方法来激活状态: 调用$state.go()方法,这是一个高级的便利方法。 点击包含ui-sref指令的链接。 导航到与状态相关联的 url。 Templates 模板 可以通过下面几种方法来配置一个状态的模板。 方法一:配置template属性,指定一段 HTML 字符串,这人是设置模板的最简单的方式。 $stateProvider.state(‘contacts’, { template: ‘<h1>My Contacts</h1>’ }) 方法二:配置templateUrl属性,来加载指定位置的模板,这是设置模板的常用方法。 $stateProvider.state(‘contacts’, { templateUrl: ‘contacts.html’ }) templateUrl 的值也可以是一个函数返回的url,函数带一个预设参数stateParams。 方法三:通过 templateProvider 函数返回模板的 HTML。 $stateProvider.state(‘contacts’, { templateProvider: function ($timeout, $stateParams) { return $timeout(function () { return ‘<h1>’ + $stateParams.contactId + ‘</h1>’ }, 100); } }) 如果想在状态被激活前,让有一些默认的内容,当状态被激活之后默认内容将被状态对应的模板替换。 <body> <ui-view> <i>Some content will load here!</i> </ui-view> </body> Controllers 控制器 可以为模板指定一个控制器(controller)。警告:控制器不会被实例化如果模板没有定义。 设置控制器: $stateProvider.state(‘contacts’, { template: ‘<h1>{{title}}</h1>’, controller: function($scope){ $scope.title = ‘My Contacts’; } }) 如果在模块中已经定义了一个控制器,只需要指定控制器的名称即可: $stateProvider.state(‘contacts’, { template: …, controller: ‘ContactsCtrl’ }) 使用 controllerAs语法: $stateProvider.state(‘contacts’, { template: …, controller: ‘ContactsCtrl as contact’ }) 对于更高级的需要,可以使用controllerProvider来动态返回一个控制器函数或字符串: $stateProvider.state(‘contacts’, { template: …, controllerProvider: function($stateParams) { var ctrlName = $stateParams.type + “Controller”; return 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 是怎样作为参数注入到控制器中的。 $stateProvider.state(‘myState’, { 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属性,以免冲突) // 基于对象和基于字符串定义 state 的例子 var contacts = { name: ‘contacts’, templateUrl: ‘contacts.html’, data: { customData1: 5, customData2: “blue” } } $stateProvider .state(contacts) .state(‘contacts.list’, { templateUrl: ‘contacts.list.html’, data: { customData1: 44, customData2: “red” } }) 可以通过下面的方式来访问上面定义的数据: function Ctrl($state){ console.log($state.current.data.customData1) // 输出 5; console.log($state.current.data.customData2) // 输出 “blue”; } onEnter 和 onExit 回调函数 onEnter和onExit回调函数是可选配置项,分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。 $stateProvider.state(“contacts”, { template: ‘<h1>{{title}}</h1>’, resolve: { title: ‘My Contacts’ }, controller: function($scope, title){ $scope.title = ‘My Contacts’; }, // title 是解决依赖项,这里也是可以使用解决依赖项的 onEnter: function(title){ if(title){ … do something … } }, // title 是解决依赖项,这里也是可以使用解决依赖项的 onExit: function(title){ if(title){ … do something … } } }) State Change Events 状态改变事件 所有这些事件都是在$rootScope作用域触发 $stateChangeStart – 当模板开始解析之前触发 $rootScope.$on(‘$stateChangeStart’, function(event, toState, toParams, fromState, fromParams){ … }) 注意:使用event.preventDefault()可以阻止模板解析的发生 $rootScope.$on(‘$stateChangeStart’, function(event, toState, toParams, fromState, fromParams){ event.preventDefault(); // transitionTo() promise will be rejected with // a ‘transition prevented’ error })  $stateNotFound – v0.3.0 – 在 transition 时通过状态名查找状态,当状态无法找到时发生。该事件在 scope 链上广播,只允许一次处理错误的机会。unfoundState将作为参数传入事件监听函数,下面例子中可以看到unfoundState的三个属性。使用 event.preventDefault() 来阻止模板解析. // somewhere, assume lazy.state has not been defined $state.go(“lazy.state”, {a:1, b:2}, {inherit:false}); // somewhere else $scope.$on(‘$stateNotFound’, 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} + default options }) $stateChangeSuccess – 当模板解析完成后触发 $rootScope.$on(‘$stateChangeSuccess’, function(event, toState, toParams, fromState, fromParams){ … }) $stateChangeError – 当模板解析过程中发生错误时触发 $rootScope.$on(‘$stateChangeError’, function(event, toState, toParams, fromState, fromParams, error){ … }) View Load Events 视图加载事件 $viewContentLoading – 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope链上广播此事件。 $scope.$on(‘$viewContentLoading’, function(event, viewConfig){ // Access to all the view config properties. // and one special property ‘targetView’ // viewConfig.targetView }); $viewContentLoaded – 当视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。 $scope.$on(‘$viewContentLoading’, $scope.$on(‘$viewContentLoaded’, function(event){ … }); 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: AngularJS模块管理问题的非常规处理方法 我的Node.js学习之路(二)NPM模块管理 Nodejs进程管理模块forever详解 in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案 关于Javascript模块化和命名空间管理的问题说明 JavaScript模块管理的简单实现方式详解 Angularjs ui-route 相关文章 Angular实现双向折叠列表组件的示例代码 本篇文章主要介绍了Angular实现双向折叠列表组件的示例代码,分为左右两组,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-11-11 AngularJS的ng-click传参的方法 本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJs 常用的过滤器 本篇文章主要介绍了AngularJs常用的过滤器。具有很好的参考价值。下面跟着小编一起来看下吧 2017-05-05 Angular5.1新功能分享 这篇文章主要介绍了Angular5.1新功能以及相关的用法,需要的朋友参考学习下吧。 2017-12-12 详解使用路由延迟加载 Angular 模块 这篇文章主要介绍了详解使用路由延迟加载 Angular 模块,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 AngularJS内置指令 这篇文章主要详细介绍了AngularJS内置指令的使用方法,非常详细,常用的一些指令操作都做了总结,有需要的小伙伴参考下 2015-02-02 Angularjs为ng-click事件传递参数 这篇文章主要介绍了Angularjs为ng-click事件传递参数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-06-06 angular 内存溢出的问题解决 这篇文章主要介绍了angular 内存溢出的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 AngularJS中$apply方法和$watch方法用法总结 这篇文章主要介绍了AngularJS中$apply方法和$watch方法用法,结合实例形式总结分析了$apply方法和$watch方法的功能、参数含义、使用技巧与相关注意事项,需要的朋友可以参考下 2016-12-12 AngularJS service之select下拉菜单效果 这篇文章主要为大家详细介绍了AngularJS service之select下拉菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 最新评论

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

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

最简单的形式

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

<!-- in index.html -->
<body ng-controller="MainCtrl">
 <section ui-view></section>
</body>
// in app-states.js (or whatever you want to name it)
$stateProvider.state('contacts', {
 template: '<h1>My Contacts</h1>'
})

模板将被插入哪里?

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

激活状态

有三种方法来激活状态:

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

Templates 模板

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

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-string">'&lt;h1&gt;My Contacts&lt;/h1&gt;'</span>
})

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

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 templateUrl: <span class="hljs-string">'contacts.html'</span>
})

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

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

<span class="hljs-variable">$stateProvider</span>.state(<span class="hljs-string">'contacts'</span>, {
 templateProvider: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$timeout</span>, <span class="hljs-variable">$stateParams</span>)</span> </span>{
 <span class="hljs-keyword">return</span> <span class="hljs-variable">$timeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
 <span class="hljs-keyword">return</span> <span class="hljs-string">'&lt;h1&gt;'</span> + <span class="hljs-variable">$stateParams</span>.contactId + <span class="hljs-string">'&lt;/h1&gt;'</span>
 }, <span class="hljs-number">100</span>);
 }
})

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

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">ui-view</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">i</span>&gt;</span>Some content will load here!<span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">ui-view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>

Controllers 控制器

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

$stateProvider.state('contacts', {
 <span class="hljs-keyword">template</span>: '&lt;h1&gt;{{title}}&lt;/h1&gt;',
 controller: function($scope){
 $scope.title = '<span class="hljs-type">My</span> <span class="hljs-type">Contacts</span>';
 }
})

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

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-keyword">...</span>,
 controller: <span class="hljs-string">'ContactsCtrl'</span>
})

使用 controllerAs语法:

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-keyword">...</span>,
 controller: <span class="hljs-string">'ContactsCtrl as contact'</span>
})

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

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-keyword">...</span>,
 controllerProvider: <span class="hljs-keyword">function</span>($stateParams) {
 var ctrlName = $stateParams.type + <span class="hljs-string">"Controller"</span>;
 <span class="hljs-keyword">return</span> 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 是怎样作为参数注入到控制器中的。

<span class="hljs-variable">$stateProvider</span>.state(<span class="hljs-string">'myState'</span>, {
 resolve:{
 
 <span class="hljs-comment">// Example using function with simple return value.</span>
 <span class="hljs-comment">// Since it's not a promise, it resolves immediately.</span>
 simpleObj: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
 <span class="hljs-keyword">return</span> {value: <span class="hljs-string">'simple!'</span>};
 },
 
 <span class="hljs-comment">// Example using function with returned promise.</span>
 <span class="hljs-comment">// 这是一种典型使用方式</span>
 <span class="hljs-comment">// 请给函数注入任何想要的服务依赖,例如 $http</span>
 promiseObj: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$http</span>)</span></span>{
 <span class="hljs-comment">// $http returns a promise for the url data</span>
 <span class="hljs-keyword">return</span> <span class="hljs-variable">$http</span>({method: <span class="hljs-string">'GET'</span>, url: <span class="hljs-string">'/someUrl'</span>});
 },
 
 <span class="hljs-comment">// Another promise example. </span>
 <span class="hljs-comment">// 如果想对返回结果进行处理, 可以使用 .then 方法</span>
 <span class="hljs-comment">// 这是另一种典型使用方式</span>
 promiseObj2: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$http</span>)</span></span>{
 <span class="hljs-keyword">return</span> <span class="hljs-variable">$http</span>({method: <span class="hljs-string">'GET'</span>, url: <span class="hljs-string">'/someUrl'</span>})
  .then (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
  <span class="hljs-keyword">return</span> doSomeStuffFirst(data);
  });
 }, 
 
 <span class="hljs-comment">// 使用服务名的例子,这将在模块中查找名称为 'translations' 的服务,并返回该服务 </span>
 <span class="hljs-comment">// Note: The service could return a promise and</span>
 <span class="hljs-comment">// it would work just like the example above</span>
 translations: <span class="hljs-string">"translations"</span>,
 
 <span class="hljs-comment">// 将服务模块作为解决函数的依赖项,通过参数传入</span>
 <span class="hljs-comment">// 提示:依赖项 $stateParams 代表 url 中的参数</span>
 translations2: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(translations, <span class="hljs-variable">$stateParams</span>)</span></span>{
  <span class="hljs-comment">// Assume that getLang is a service method</span>
  <span class="hljs-comment">// that uses $http to fetch some translations.</span>
  <span class="hljs-comment">// Also assume our url was "/:lang/home".</span>
  translations.getLang(<span class="hljs-variable">$stateParams</span>.lang);
 },
 
 <span class="hljs-comment">// Example showing returning of custom made promise</span>
 greeting: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$q</span>, <span class="hljs-variable">$timeout</span>)</span></span>{
  <span class="hljs-keyword">var</span> deferred = <span class="hljs-variable">$q</span>.defer();
  <span class="hljs-variable">$timeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  deferred.resolve(<span class="hljs-string">'Hello!'</span>);
  }, <span class="hljs-number">1000</span>);
  <span class="hljs-keyword">return</span> deferred.promise;
 }
 },
 
 <span class="hljs-comment">// 控制器将等待上面的解决项都被解决后才被实例化</span>
 controller: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting)</span></span>{
 
 <span class="hljs-variable">$scope</span>.simple = simpleObj.value;
 
 <span class="hljs-comment">// 这里可以放心使用 promiseObj 中的对象</span>
 <span class="hljs-variable">$scope</span>.items = promiseObj.items;
 <span class="hljs-variable">$scope</span>.items = promiseObj2.items;
 
 <span class="hljs-variable">$scope</span>.title = translations.getLang(<span class="hljs-string">"english"</span>).title;
 <span class="hljs-variable">$scope</span>.title = translations2.title;
 
 <span class="hljs-variable">$scope</span>.greeting = greeting;
 }
})

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

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

<span class="hljs-comment">// 基于对象和基于字符串定义 state 的例子</span>
<span class="hljs-keyword">var</span> contacts = { 
name: <span class="hljs-string">'contacts'</span>,
templateUrl: <span class="hljs-string">'contacts.html'</span>,
data: {
 customData1: <span class="hljs-number">5</span>,
 customData2: <span class="hljs-string">"blue"</span>
} 
}
$stateProvider
.state(contacts)
.state(<span class="hljs-string">'contacts.list'</span>, {
templateUrl: <span class="hljs-string">'contacts.list.html'</span>,
data: {
 customData1: <span class="hljs-number">44</span>,
 customData2: <span class="hljs-string">"red"</span>
} 
})

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

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Ctrl</span><span class="hljs-params">(<span class="hljs-variable">$state</span>)</span></span>{
console.log(<span class="hljs-variable">$state</span>.current.data.customData1) <span class="hljs-comment">// 输出 5;</span>
console.log(<span class="hljs-variable">$state</span>.current.data.customData2) <span class="hljs-comment">// 输出 "blue";</span>
}

onEnter 和 onExit 回调函数

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

$stateProvider.state(<span class="hljs-string">"contacts"</span>, {
template: <span class="hljs-string">'&lt;h1&gt;{{title}}&lt;/h1&gt;'</span>,
resolve: { title: <span class="hljs-string">'My Contacts'</span> },
controller: <span class="hljs-keyword">function</span>($scope, title){
$scope.title = <span class="hljs-string">'My Contacts'</span>;
},
// title 是解决依赖项,这里也是可以使用解决依赖项的
onEnter: <span class="hljs-keyword">function</span>(title){ 
<span class="hljs-keyword">if</span>(title){ <span class="hljs-keyword">...</span> do something <span class="hljs-keyword">...</span> }
},
// title 是解决依赖项,这里也是可以使用解决依赖项的
onExit: <span class="hljs-keyword">function</span>(title){
<span class="hljs-keyword">if</span>(title){ <span class="hljs-keyword">...</span> do something <span class="hljs-keyword">...</span> }
}
})

State Change Events 状态改变事件

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

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

$rootScope.$on(<span class="hljs-string">'$stateChangeStart'</span>, 
<span class="hljs-keyword">function</span>(event, toState, toParams, fromState, fromParams){ <span class="hljs-keyword">...</span> })

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

<span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$on</span>(<span class="hljs-string">'$stateChangeStart'</span>, 
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event, toState, toParams, fromState, fromParams)</span></span>{ 
 event.preventDefault(); 
 <span class="hljs-comment">// transitionTo() promise will be rejected with </span>
 <span class="hljs-comment">// a 'transition prevented' error</span>
})

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

// somewhere, assume lazy.<span class="hljs-keyword">state</span> has not been defined
<span class="hljs-variable">$state</span>.go(<span class="hljs-string">"lazy.state"</span>, {a:<span class="hljs-number">1</span>, b:<span class="hljs-number">2</span>}, {inherit:false});
// somewhere else
<span class="hljs-variable">$scope</span>.<span class="hljs-variable">$on</span>('<span class="hljs-variable">$stateNotFound</span>', 
function(event, unfoundState, <span class="hljs-keyword">from</span>State, <span class="hljs-keyword">from</span>Params){ 
 console.<span class="hljs-keyword">log</span>(unfoundState.<span class="hljs-keyword">to</span>); // <span class="hljs-string">"lazy.state"</span>
 console.<span class="hljs-keyword">log</span>(unfoundState.<span class="hljs-keyword">to</span>Params); // {a:<span class="hljs-number">1</span>, b:<span class="hljs-number">2</span>}
 console.<span class="hljs-keyword">log</span>(unfoundState.options); // {inherit:false} + <span class="hljs-keyword">default</span> options
})

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

$rootScope.$on(<span class="hljs-string">'$stateChangeSuccess'</span>, 
<span class="hljs-keyword">function</span>(event, toState, toParams, fromState, fromParams){ <span class="hljs-keyword">...</span> })

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

$rootScope.$on(<span class="hljs-string">'$stateChangeError'</span>, 
<span class="hljs-keyword">function</span>(event, toState, toParams, fromState, fromParams, error){ <span class="hljs-keyword">...</span> })

View Load Events 视图加载事件

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

<span class="hljs-variable">$scope</span>.<span class="hljs-variable">$on</span>(<span class="hljs-string">'$viewContentLoading'</span>, 
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event, viewConfig)</span></span>{ 
 <span class="hljs-comment">// Access to all the view config properties.</span>
 <span class="hljs-comment">// and one special property 'targetView'</span>
 <span class="hljs-comment">// viewConfig.targetView </span>
});

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

$scope.$on(<span class="hljs-string">'$viewContentLoading'</span>, 
$scope.$on(<span class="hljs-string">'$viewContentLoaded'</span>, 
<span class="hljs-keyword">function</span>(event){ <span class="hljs-keyword">...</span> });

总结

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

您可能感兴趣的文章:

  • AngularJS模块管理问题的非常规处理方法
  • 我的Node.js学习之路(二)NPM模块管理
  • Nodejs进程管理模块forever详解
  • in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
  • 关于Javascript模块化和命名空间管理的问题说明
  • JavaScript模块管理的简单实现方式详解
张贴在3