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

2024-10-28 21:54:44

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。

激活状态

有三种方法来激活状态：

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

Templates 模板

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

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-string">'<h1>My Contacts</h1>'</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">'<h1>'</span> + <span class="hljs-variable">$stateParams</span>.contactId + <span class="hljs-string">'</h1>'</span>
 }, <span class="hljs-number">100</span>);
 }
})

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

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

Controllers 控制器

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

$stateProvider.state('contacts', {
 <span class="hljs-keyword">template</span>: '<h1>{{title}}</h1>',
 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">'<h1>{{title}}</h1>'</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中UI Router的使用方法

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p
AngularJS 使用 UI Router 实现表单向导

我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由让我们言归正传,开始创建我们的最棒的表单! 创建工程创建工程有个模板结构. 需要个布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri
angular基于路由控制ui-router实现系统权限控制

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
AngularJs ng-route路由详解及实例代码

前提首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular.js"></script> <script src="../../bower_components/angular-route/angular-route.js"></script> 这主要是
浅析angularJS中的ui-router和ng-grid模块

在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
AngularJS基于ui-route实现深层路由的方法【路由嵌套】

本文实例讲述了AngularJS基于ui-route实现深层路由的方法.分享给大家供大家参考,具体如下: 1.前面我们通过了简单的ng-route实现了简单层次的路由,对于深层次的路由,我们可以通过ui-route来实现. (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换. (2)ui-route的改进:在具有富客户端的单页应用中,要在一个页面中呈现不同的视图,我们可以通过ui-route实现路由的嵌套. 2 . ui-route的使用
Angularjs中UI Router全攻略

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon
angularJS中router的使用指南

这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来复制代码代码如下:  <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>
AngularJs中route的使用方法和配置

angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一.该强大的地方有很多,比如双向数据绑定,应用了后端的MVC模式到前端,自定义指令等. 既然是单页面应用,肯定离不开页面的切换.我们首先来说一下angular的路由. angular实现页面切换时用了route. <script src="js/plugins/angular/angular.min.js"></script> <script src="js/p
利用Angularjs中模块ui-route管理状态的方法

ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态. 在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置通过定义controller.template和view等属性,来定义指定位置的用户界面和界面行为通过嵌套的方式来解决页面中的一些重复出现的部位最简单的形式模板可以通过下面这种最简单的方式来指定  <body ng-controller="MainCtrl"> &
AngularJS中监视Scope变量以及外部调用Scope方法

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ
AngularJS中控制器函数的定义与使用方法示例

本文实例讲述了AngularJS中控制器函数的定义与使用方法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></tex
angularjs中回车键触发某一事件的方法

要求:在输入框中输入值以后,按回车键触发某一事件的执行 html: <input id="input" name="input" ng-model="querykdUser.page.pageSize" ng-keyup="myKeyup($event)" class="form-control" style="width:60px;"> js: $scope.myKeyup
在angularJs中进行数据遍历的2种方法

2种方式分别为: 1.数组数据遍历 2.对象数据遍历 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module"
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用 http服务的在服务端发送请求时,也就是调用 http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status, headers, config) { //... }).
关于AngularJS中ng-repeat不更新视图的解决方法

最近写AngularJS项目中,遇到一个问题,先对数组进行赋值,ng--repeat正常工作,然后对数组进行修改,ng-repeat似乎没有工作,视图没有更新. 原因是ng-repeat会已默认值排序,由于我的数组中的元素有重复,所以ng-repeat没有对重复的元素进行刷新,只要对ng-repeat指定track by就可以了 <tr ng-repeat="selectedCriterias in selectedCriteriasArray track by $index"&
在VUE中实现文件下载并判断状态的方法

新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func
在AngularJS中使用jQuery的zTree插件的方法

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么. jQuery ZTree是国内非常不错的JQuery插件,功能齐全,文档和API也非常的友好,之前项目上常用此插件. AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能. 因此,花了一点时间
AngularJS中取消对HTML片段转义的方法例子

今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-bind 的话是被转义过的,使用 data-ng-bind-html 则可以取消转义. 但是直接使用 data-ng-bind-html 的话会提示错误复制代码代码如下: Error: [$sce:unsafe] Attempting to use an unsafe value in a saf

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

相关推荐

随机推荐