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

程序员文章站 2022-11-26 16:21:34

ui-router 的工作原理非常类似于 angular 的路由控制器，但它只关注状态。在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置通过...

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

总结

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

上一篇：详解基于Vue cli生成的Vue项目的webpack4升级

下一篇： PHP中::、->、self、$this几种操作符的区别介绍

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

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

mac中利用NVM管理不同node版本的方法详解

利用yarn代替npm管理前端项目模块依赖的方法详解

AngularJS模块管理问题的非常规处理方法

AngularJS模块管理问题的非常规处理方法_AngularJS

python中利用h5py模块读取h5文件中的主键方法

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

利用yarn代替npm管理前端项目模块依赖的方法详解

AngularJS模块管理问题的非常规处理方法_AngularJS

mac中利用NVM管理不同node版本的方法详解