angular 使用 ui-router 設計網頁，angularui-router

angular 使用 ui-router 設計網頁，angularui-router

文章作者：松陽

本文出自 阿修羅道，禁止用於商業用途，轉載請註明出處。  

原文連結：http://blog.csdn.net/fansongy/article/details/44162685

這是個啥？

ui-router是一個web用戶端的路由解決方案。我覺得它最大的作用是將web介面的設計分塊了。

分塊分層

最初的web訪問模型，是這樣的：  

我們訪問page1，然後訪問page2.... 

在新的模型中它變成了這個樣子：  

訪問效果是一樣的，但是從設計上已經有了變化。它變成了：只有一張網頁，在網頁中有不同的地區，每個地區都可擦寫。仔細想想好像也挺常見的，不知道其他技術是不是也這樣

代碼實現

原理講完再簡述一下實現吧

1. 下載js檔案，引入到index.html檔案中。
2. 在html中，添加註入位置: <div ui-view="">。它是當被觸發注入時，填充的位置。
3. 在html中，添加觸發器：<ANY ui-sref="XXX">。XXX是$state，它遵循xxx.xxx的樹形結構，渲染時從根節點開始渲染。
4. 在app.js中，配置路由函數 .config(function($stateProvider, $urlRouterProvider) {});

細說一下：

引入代碼

沒啥要細說的，要說就是路徑別寫錯吧 。

注入位置

對於多個分欄的結構，可以使用多個view的實現，然後反過來在config中使用bbb@AAA的聲明指定本state中子view對應的模板，例如：

//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"，未啟用狀態時，它是看不到的。具體描述可以看下官網. 通常我們都是啟用狀態，但有時總想自己控制一下。可以參考：

<ul>  <li ui-sref-active="active" class="item">    <a href ui-sref="app.user({user: 'fansy'})">@fansy</a>  </li></ul>

當user是fansy時，顯示後面那行字。這個例子是官方的，我是沒用明白這個功能，回頭在研究吧。

配置路由首先是 $urlRouterProvider

它通常用來配置非 $state 的額外的路由.例如：

$urlRouterProvider.when("","/home");

將預設頁設定為/home的URL。注意哦，這裡用的是URL，別寫錯成state了。

當然也可以寫一個任何額外頁面的定向：

$urlRouterProvider.otherwise("/home");

這樣訪問其他阿貓阿狗的頁面，就都跑到/home那去了。

然後是 $stateProvider

觸發點是按層級來的，它遵守的路由規則可以從官網的，這個頁面 中找到。通過 $state.go 函數可以將狀態位置強行切換，我們可以在任何一處寫下面的js代碼：

$state.go('home.state1');

另外，你也可以在$stateProvider 中對應的state裡面配置controller，當這種state被啟用，就會調用對應的函數了，例如：

$stateProvider.state("home",{url:"/home",templateUrl:"tmpls/home.html",controller:function($scope,$state) {console.log("enter home");}})

每當狀態變為home時，都輸出一條日誌。

最後，渲染是按層級來的。因此改變同級節點並不會重新渲染父節點。並且不改變狀態就不會重新渲染。比如一直按同一個按鈕，就不會重新渲染；沒更改跟節點，點一個"重新整理"按鈕，也不會重新整理整個頁面。

最後

其他詳細可以看它的首頁 ，另外有一篇 好文章 也值得借鑒.

如果你覺得這篇文章對你有協助，可以順手點個頂，不但不會喜當爹，還能讓更多人能看到它...