利用Angularjs中模块ui-route管理状态的方法
ui-router的工作原理非常类似于Angular的路由控制器，但它只关注状态。
- 在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置
- 通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为
- 通过嵌套的方式来解决页面中的一些重复出现的部位
最简单的形式
模板可以通过下面这种最简单的方式来指定
<!--inindex.html--> <bodyng-controller="MainCtrl"> <sectionui-view></section> </body>
//inapp-states.js(orwhateveryouwanttonameit)
$stateProvider.state('contacts',{
template:'<h1>MyContacts</h1>'
})
模板将被插入哪里?
状态被激活时，它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层的状态，那么它的父模板就是index.html。
激活状态
有三种方法来激活状态：
- 调用$state.go()方法，这是一个高级的便利方法。
- 点击包含ui-sref指令的链接。
- 导航到与状态相关联的url。
Templates模板
可以通过下面几种方法来配置一个状态的模板。方法一：配置template属性，指定一段HTML字符串，这人是设置模板的最简单的方式。
$stateProvider.state(<spanclass="hljs-string">'contacts'</span>,{
template:<spanclass="hljs-string">'<h1>MyContacts</h1>'</span>
})
方法二：配置templateUrl属性，来加载指定位置的模板，这是设置模板的常用方法。
$stateProvider.state(<spanclass="hljs-string">'contacts'</span>,{
templateUrl:<spanclass="hljs-string">'contacts.html'</span>
})
templateUrl的值也可以是一个函数返回的url，函数带一个预设参数stateParams。
方法三：通过templateProvider函数返回模板的HTML。
<spanclass="hljs-variable">$stateProvider</span>.state(<spanclass="hljs-string">'contacts'</span>,{
templateProvider:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(<spanclass="hljs-variable">$timeout</span>,<spanclass="hljs-variable">$stateParams</span>)</span></span>{
<spanclass="hljs-keyword">return</span><spanclass="hljs-variable">$timeout</span>(<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">()</span></span>{
<spanclass="hljs-keyword">return</span><spanclass="hljs-string">'<h1>'</span>+<spanclass="hljs-variable">$stateParams</span>.contactId+<spanclass="hljs-string">'</h1>'</span>
},<spanclass="hljs-number">100</span>);
}
})
如果想在状态被激活前，让<ui-view>有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。
<spanclass="hljs-tag"><<spanclass="hljs-title">body</span>></span> <spanclass="hljs-tag"><<spanclass="hljs-title">ui-view</span>></span> <spanclass="hljs-tag"><<spanclass="hljs-title">i</span>></span>Somecontentwillloadhere!<spanclass="hljs-tag"></<spanclass="hljs-title">i</span>></span> <spanclass="hljs-tag"></<spanclass="hljs-title">ui-view</span>></span> <spanclass="hljs-tag"></<spanclass="hljs-title">body</span>></span>
Controllers控制器
可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。设置控制器：
$stateProvider.state('contacts',{
<spanclass="hljs-keyword">template</span>:'<h1>{{title}}</h1>',
controller:function($scope){
$scope.title='<spanclass="hljs-type">My</span><spanclass="hljs-type">Contacts</span>';
}
})
如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：
$stateProvider.state(<spanclass="hljs-string">'contacts'</span>,{
template:<spanclass="hljs-keyword">...</span>,
controller:<spanclass="hljs-string">'ContactsCtrl'</span>
})
使用controllerAs语法：
$stateProvider.state(<spanclass="hljs-string">'contacts'</span>,{
template:<spanclass="hljs-keyword">...</span>,
controller:<spanclass="hljs-string">'ContactsCtrlascontact'</span>
})
对于更高级的需要，可以使用controllerProvider来动态返回一个控制器函数或字符串：
$stateProvider.state(<spanclass="hljs-string">'contacts'</span>,{
template:<spanclass="hljs-keyword">...</span>,
controllerProvider:<spanclass="hljs-keyword">function</span>($stateParams){
varctrlName=$stateParams.type+<spanclass="hljs-string">"Controller"</span>;
<spanclass="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：函数的返回值将作为依赖注入项，如果函数是一个耗时的操作，那么控制器必须等待该函数执行完成（beresolved）才会被实例化。
例子
在controller实例化之前，resolve中的每一个对象都必须beresolved，请注意每个resolvedobject是怎样作为参数注入到控制器中的。
<spanclass="hljs-variable">$stateProvider</span>.state(<spanclass="hljs-string">'myState'</span>,{
resolve:{
<spanclass="hljs-comment">//Exampleusingfunctionwithsimplereturnvalue.</span>
<spanclass="hljs-comment">//Sinceit'snotapromise,itresolvesimmediately.</span>
simpleObj:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">()</span></span>{
<spanclass="hljs-keyword">return</span>{value:<spanclass="hljs-string">'simple!'</span>};
},
<spanclass="hljs-comment">//Exampleusingfunctionwithreturnedpromise.</span>
<spanclass="hljs-comment">//这是一种典型使用方式</span>
<spanclass="hljs-comment">//请给函数注入任何想要的服务依赖，例如$http</span>
promiseObj:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(<spanclass="hljs-variable">$http</span>)</span></span>{
<spanclass="hljs-comment">//$httpreturnsapromisefortheurldata</span>
<spanclass="hljs-keyword">return</span><spanclass="hljs-variable">$http</span>({method:<spanclass="hljs-string">'GET'</span>,url:<spanclass="hljs-string">'/someUrl'</span>});
},
<spanclass="hljs-comment">//Anotherpromiseexample.</span>
<spanclass="hljs-comment">//如果想对返回结果进行处理，可以使用.then方法</span>
<spanclass="hljs-comment">//这是另一种典型使用方式</span>
promiseObj2:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(<spanclass="hljs-variable">$http</span>)</span></span>{
<spanclass="hljs-keyword">return</span><spanclass="hljs-variable">$http</span>({method:<spanclass="hljs-string">'GET'</span>,url:<spanclass="hljs-string">'/someUrl'</span>})
.then(<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(data)</span></span>{
<spanclass="hljs-keyword">return</span>doSomeStuffFirst(data);
});
},
<spanclass="hljs-comment">//使用服务名的例子，这将在模块中查找名称为'translations'的服务，并返回该服务</span>
<spanclass="hljs-comment">//Note:Theservicecouldreturnapromiseand</span>
<spanclass="hljs-comment">//itwouldworkjustliketheexampleabove</span>
translations:<spanclass="hljs-string">"translations"</span>,
<spanclass="hljs-comment">//将服务模块作为解决函数的依赖项，通过参数传入</span>
<spanclass="hljs-comment">//提示：依赖项$stateParams代表url中的参数</span>
translations2:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(translations,<spanclass="hljs-variable">$stateParams</span>)</span></span>{
<spanclass="hljs-comment">//AssumethatgetLangisaservicemethod</span>
<spanclass="hljs-comment">//thatuses$httptofetchsometranslations.</span>
<spanclass="hljs-comment">//Alsoassumeoururlwas"/:lang/home".</span>
translations.getLang(<spanclass="hljs-variable">$stateParams</span>.lang);
},
<spanclass="hljs-comment">//Exampleshowingreturningofcustommadepromise</span>
greeting:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(<spanclass="hljs-variable">$q</span>,<spanclass="hljs-variable">$timeout</span>)</span></span>{
<spanclass="hljs-keyword">var</span>deferred=<spanclass="hljs-variable">$q</span>.defer();
<spanclass="hljs-variable">$timeout</span>(<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">()</span></span>{
deferred.resolve(<spanclass="hljs-string">'Hello!'</span>);
},<spanclass="hljs-number">1000</span>);
<spanclass="hljs-keyword">return</span>deferred.promise;
}
},
<spanclass="hljs-comment">//控制器将等待上面的解决项都被解决后才被实例化</span>
controller:<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(<spanclass="hljs-variable">$scope</span>,simpleObj,promiseObj,promiseObj2,translations,translations2,greeting)</span></span>{
<spanclass="hljs-variable">$scope</span>.simple=simpleObj.value;
<spanclass="hljs-comment">//这里可以放心使用promiseObj中的对象</span>
<spanclass="hljs-variable">$scope</span>.items=promiseObj.items;
<spanclass="hljs-variable">$scope</span>.items=promiseObj2.items;
<spanclass="hljs-variable">$scope</span>.title=translations.getLang(<spanclass="hljs-string">"english"</span>).title;
<spanclass="hljs-variable">$scope</span>.title=translations2.title;
<spanclass="hljs-variable">$scope</span>.greeting=greeting;
}
})
为$state对象提供自定义数据
可以给$state对象提供自定义数据（建议使用data属性，以免冲突）
<spanclass="hljs-comment">//基于对象和基于字符串定义state的例子</span>
<spanclass="hljs-keyword">var</span>contacts={
name:<spanclass="hljs-string">'contacts'</span>,
templateUrl:<spanclass="hljs-string">'contacts.html'</span>,
data:{
customData1:<spanclass="hljs-number">5</span>,
customData2:<spanclass="hljs-string">"blue"</span>
}
}
$stateProvider
.state(contacts)
.state(<spanclass="hljs-string">'contacts.list'</span>,{
templateUrl:<spanclass="hljs-string">'contacts.list.html'</span>,
data:{
customData1:<spanclass="hljs-number">44</span>,
customData2:<spanclass="hljs-string">"red"</span>
}
})
可以通过下面的方式来访问上面定义的数据：
<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-title">Ctrl</span><spanclass="hljs-params">(<spanclass="hljs-variable">$state</span>)</span></span>{
console.log(<spanclass="hljs-variable">$state</span>.current.data.customData1)<spanclass="hljs-comment">//输出5;</span>
console.log(<spanclass="hljs-variable">$state</span>.current.data.customData2)<spanclass="hljs-comment">//输出"blue";</span>
}
onEnter和onExit回调函数
onEnter和onExit回调函数是可选配置项，分别称为当一个状态变得活跃的和不活跃的时候触发。回调函数也可以访问所有解决依赖项。
$stateProvider.state(<spanclass="hljs-string">"contacts"</span>,{
template:<spanclass="hljs-string">'<h1>{{title}}</h1>'</span>,
resolve:{title:<spanclass="hljs-string">'MyContacts'</span>},
controller:<spanclass="hljs-keyword">function</span>($scope,title){
$scope.title=<spanclass="hljs-string">'MyContacts'</span>;
},
//title是解决依赖项，这里也是可以使用解决依赖项的
onEnter:<spanclass="hljs-keyword">function</span>(title){
<spanclass="hljs-keyword">if</span>(title){<spanclass="hljs-keyword">...</span>dosomething<spanclass="hljs-keyword">...</span>}
},
//title是解决依赖项，这里也是可以使用解决依赖项的
onExit:<spanclass="hljs-keyword">function</span>(title){
<spanclass="hljs-keyword">if</span>(title){<spanclass="hljs-keyword">...</span>dosomething<spanclass="hljs-keyword">...</span>}
}
})
StateChangeEvents状态改变事件
所有这些事件都是在$rootScope作用域触发
$stateChangeStart–当模板开始解析之前触发
$rootScope.$on(<spanclass="hljs-string">'$stateChangeStart'</span>,
<spanclass="hljs-keyword">function</span>(event,toState,toParams,fromState,fromParams){<spanclass="hljs-keyword">...</span>})
注意：使用event.preventDefault()可以阻止模板解析的发生
<spanclass="hljs-variable">$rootScope</span>.<spanclass="hljs-variable">$on</span>(<spanclass="hljs-string">'$stateChangeStart'</span>,
<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(event,toState,toParams,fromState,fromParams)</span></span>{
event.preventDefault();
<spanclass="hljs-comment">//transitionTo()promisewillberejectedwith</span>
<spanclass="hljs-comment">//a'transitionprevented'error</span>
})
$stateNotFound–v0.3.0–在transition时通过状态名查找状态，当状态无法找到时发生。该事件在scope链上广播，只允许一次处理错误的机会。unfoundState将作为参数传入事件监听函数，下面例子中可以看到unfoundState的三个属性。使用event.preventDefault()来阻止模板解析.
//somewhere,assumelazy.<spanclass="hljs-keyword">state</span>hasnotbeendefined
<spanclass="hljs-variable">$state</span>.go(<spanclass="hljs-string">"lazy.state"</span>,{a:<spanclass="hljs-number">1</span>,b:<spanclass="hljs-number">2</span>},{inherit:false});
//somewhereelse
<spanclass="hljs-variable">$scope</span>.<spanclass="hljs-variable">$on</span>('<spanclass="hljs-variable">$stateNotFound</span>',
function(event,unfoundState,<spanclass="hljs-keyword">from</span>State,<spanclass="hljs-keyword">from</span>Params){
console.<spanclass="hljs-keyword">log</span>(unfoundState.<spanclass="hljs-keyword">to</span>);//<spanclass="hljs-string">"lazy.state"</span>
console.<spanclass="hljs-keyword">log</span>(unfoundState.<spanclass="hljs-keyword">to</span>Params);//{a:<spanclass="hljs-number">1</span>,b:<spanclass="hljs-number">2</span>}
console.<spanclass="hljs-keyword">log</span>(unfoundState.options);//{inherit:false}+<spanclass="hljs-keyword">default</span>options
})
$stateChangeSuccess–当模板解析完成后触发
$rootScope.$on(<spanclass="hljs-string">'$stateChangeSuccess'</span>,
<spanclass="hljs-keyword">function</span>(event,toState,toParams,fromState,fromParams){<spanclass="hljs-keyword">...</span>})
$stateChangeError–当模板解析过程中发生错误时触发
$rootScope.$on(<spanclass="hljs-string">'$stateChangeError'</span>,
<spanclass="hljs-keyword">function</span>(event,toState,toParams,fromState,fromParams,error){<spanclass="hljs-keyword">...</span>})
ViewLoadEvents视图加载事件
$viewContentLoading–当视图开始加载，DOM渲染完成之前触发，该事件将在$scope链上广播此事件。
<spanclass="hljs-variable">$scope</span>.<spanclass="hljs-variable">$on</span>(<spanclass="hljs-string">'$viewContentLoading'</span>,
<spanclass="hljs-function"><spanclass="hljs-keyword">function</span><spanclass="hljs-params">(event,viewConfig)</span></span>{
<spanclass="hljs-comment">//Accesstoalltheviewconfigproperties.</span>
<spanclass="hljs-comment">//andonespecialproperty'targetView'</span>
<spanclass="hljs-comment">//viewConfig.targetView</span>
});
$viewContentLoaded–当视图加载完成，DOM渲染完成之后触发，视图所在的$scope发出该事件。
$scope.$on(<spanclass="hljs-string">'$viewContentLoading'</span>,
$scope.$on(<spanclass="hljs-string">'$viewContentLoaded'</span>,
<spanclass="hljs-keyword">function</span>(event){<spanclass="hljs-keyword">...</span>});
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。