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

站长资源 2024/11/13 佚名

78 1538 78

富贵资源网 Design By www.hznty.com

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>'
})

模板将被插入哪里"color: #ff0000">激活状态

有三种方法来激活状态：

调用$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); } })

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

<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,ui,route,angularjs,route

富贵资源网 Design By www.hznty.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

上一篇
 浅谈Vue的基本应用

下一篇
 javascript十六进制数字和ASCII字符之间的转换方法

富贵资源网 Design By www.hznty.com

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

再想想

暂无评论...

www.hznty.com 富贵资源网

20,135影音资源

44,641技术资源

2,817软件资源

435,032站长资源

最新文章

乱石堆中一粒砂金——《使命召唤21》评测

2024/11/13
65

【果娘聊天室】双11即将结束，各位今年买了啥

2024/11/13
10

双十一必入爆款:微星MPGZ890 EDGE TI刀锋钛

2024/11/13
7

IGN经典逆天骚操作名著——《墙头草修炼手册

2024/11/13
32

突然爆火的“网红游戏”，真的有那么多人玩吗

2024/11/13
61

何老师客串《浪人崛起》了？盘点与明星撞脸的

2024/11/13
9

热门标签

1080P高清(5) 高清电影(5) 百度云盘(5) 网盘下载(4) 破解软件(4) 绿色软件(4) 磁力链接(3) 吕布加强(3) 2022防沉迷(2) 福利资源(2) 云盘链接(2) 防沉迷(2) 18岁身份证(2) 蓝雨6080(2) WPS会员(2) 刷图排行(1) 网盘不限速(1) 鬼灭之刃(1) 无限申请QQ(1) 周杰伦新歌(1) PhotoshopCS 序列号(1) 免费动漫(1)

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

浅谈Vue的基本应用

javascript十六进制数字和ASCII字符之间的转换方法

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

友情链接