這是個啥？
ui-router是一個web客戶端的路由解決方案。我覺得它大的作用是將web界面的設計分塊了。
分塊分層
初的web訪問模型，是這樣的：
我們訪問page1，然后訪問page2....
在新的模型中它變成了這個樣子：
訪問效果是一樣的，但是從設計上已經有了變化。它變成了：只有一張網頁，在網頁中有不同的區域，每個區域都可擦寫。仔細想想好像也挺常見的，不知道其他技術是不是也這樣
代碼實現
原理講完再簡述一下實現吧
下載js文件，引入到index.html文件中。
在html中，添加注入位置: <div ui-view="">。它是當被觸發注入時，填充的位置。
在html中，添加觸發器：<ANY ui-sref="XXX">。XXX是$state，它遵循xxx.xxx的樹形結構，渲染時從根節點開始渲染。
在app.js中，配置路由函數 .config(function($stateProvider, $urlRouterProvider) {});
細說一下：
引入代碼
沒啥要細說的，要說就是路徑別寫錯吧 。
注入位置
對于多個分欄的結構，可以使用多個view的實現，然后反過來在config中使用bbb@AAA的聲明指定本state中子view對應的模板，例如：
[cpp] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
//in js
$stateProvider
.state('index', {
url: '/index',
views: {
'': {
templateUrl: 'tpls/index.html'
},
'main1@index': {
templateUrl: 'tpls/form1.html'
},
'main2@index': {
templateUrl: 'tpls/form2.html'
}
}
})
//in html
<div class="container">
<div ui-view="main1"></div>
<div ui-view="main2"></div>
</div>
這個代碼中將form1.html 和 form2.html 填充到了對應的的view中。
添加觸發器
如果在標簽中添加了 ui-sref="xxx"，未激活狀態時，它是看不到的。具體描述可以看下官網. 通常我們都是激活狀態，但有時總想自己控制一下?？梢詤⒖迹?/p>
[html] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'fansy'})">@fansy</a>
</li>
</ul>
當user是fansy時，顯示后面那行字。這個例子是官方的，我是沒用明白這個功能，回頭在研究吧。
配置路由
首先是 $urlRouterProvider
它通常用來配置非 $state 的額外的路由.例如：
[cpp] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
$urlRouterProvider.when("","/home");
將默認頁設置為/home的URL。注意哦，這里用的是URL，別寫錯成state了。
當然也可以寫一個任何額外頁面的定向：
[cpp] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
$urlRouterProvider.otherwise("/home");
這樣訪問其他阿貓阿狗的頁面，就都跑到/home那去了。
然后是 $stateProvider
觸發點是按層級來的，它遵守的路由規則可以從官網的，這個頁面 中找到。通過 $state.go 函數可以將狀態位置強行切換，我們可以在任何一處寫下面的js代碼：
[cpp] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
$state.go('home.state1');
另外，你也可以在$stateProvider 中對應的state里面配置controller，當這種state被激活，就會調用對應的函數了，例如：
[javascript] view plaincopyprint?在CODE上查看代碼片派生到我的代碼片
$stateProvider
.state("home",{
url:"/home",
templateUrl:"tmpls/home.html",
controller:function($scope,$state) {
console.log("enter home");
}
})
每當狀態變為home時，都輸出一條日志。
后，渲染是按層級來的。因此改變同級節點并不會重新渲染父節點。并且不改變狀態就不會重新渲染。比如一直按同一個按鈕，就不會重新渲染；沒更改跟節點，點一個"刷新"按鈕，也不會刷新整個頁面。
后
其他詳細可以看它的主頁 ，另外有一篇 好文章 也值得借鑒.
文章作者：松陽
本文出自 阿修羅道，禁止用于商業用途，轉載請注明出處。
原文鏈接：http://blog.csdn.net/fansongy/article/details/44162685
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
