angular.js之路由的選擇方法

更新時(shí)間：2016年09月24日 13:59:56 投稿：jingxian

下面小編就為大家?guī)?lái)一篇angular.js之路由的選擇方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在一個(gè)單頁(yè)面中，我們可以添加多個(gè)模塊，使得網(wǎng)頁(yè)只在需要的時(shí)候加載這個(gè)模塊。模塊的切換大致上可以代替網(wǎng)頁(yè)的切換，于是，我們便可以通過(guò)模塊的切換實(shí)現(xiàn)網(wǎng)頁(yè)的切換，這個(gè)切換是按需加載的。

乍一看非常普通的東西，但是仔細(xì)想想就可以發(fā)現(xiàn)，這種思想可以解決非常多的資源。

例如，假如有一個(gè)頁(yè)面，需要顯示1000種商品的信息，每個(gè)商品的表現(xiàn)形式各不相同（設(shè)他們有各自獨(dú)立的css和js），那么一般來(lái)說(shuō)，我們就需要準(zhǔn)備1000張網(wǎng)頁(yè)去加載這些信息。但是，使用這種模塊化思想，我們就可以僅僅在后臺(tái)設(shè)定1000個(gè)各不相同的模塊，然后根據(jù)需要將需要的商品的對(duì)應(yīng)模塊加載到唯一一張頁(yè)面上而已。

而要做到上面介紹的功能就必須使用路由功能了。

主體思路：

1. 后臺(tái)設(shè)立多個(gè)獨(dú)立的模塊

2. 建立一個(gè)路由控制模塊

3. 根據(jù)需要通過(guò)路由提取需要模塊加載到主頁(yè)上

4. 加載的同時(shí)，將其他模塊隱藏。

那么，路由模塊的建立需要多少功夫呢？其實(shí)意外地簡(jiǎn)單：

首先，主頁(yè)面上，寫上對(duì)應(yīng)的代碼：

<ng-view></ng-view>這個(gè)代表路由區(qū)域和視圖區(qū)域，只有寫了這個(gè)標(biāo)簽才會(huì)觸發(fā)路由事件：

<html lang="en" ng-app="myTodo"><head>
    <meta charset="utf-8">
    <title>angularjs • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
      .pagination {
        overflow: hidden;
        padding: 20px;
      }
      .pagination ul li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px solid black;
        float: left;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ng-view></ng-view> <!-- 路由區(qū)域，視圖區(qū)域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a >Sindre Sorhus</a></p>
      <p>Part of <a >TodoMVC</a></p>
    </footer>
    
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
  

</body>
</html>

其他的東西都是裝飾，只要看第24行就可以了。

在路由區(qū)域和視圖區(qū)域中，我們可以添加內(nèi)容進(jìn)去——甚至添加一個(gè)網(wǎng)頁(yè)進(jìn)去。

接下來(lái)請(qǐng)看對(duì)應(yīng)的app.js。

var app = angular.module("myTodo", ['ngRoute']);
//路由的配置：
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: 'myTodoCtrl'*/
  }

  var ohter_config = {
    templateUrl: "other.html"
  }

  $routeProvider.
   when("",routeconfig).
   //status ： 它對(duì)應(yīng)我們頁(yè)面的hash: all completed active
   //路由規(guī)則的優(yōu)先級(jí)按寫法的順序所決定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
  
});

如果僅僅使用路由的話，以上的代碼就足夠使用了。它會(huì)保證;

1.當(dāng)頁(yè)面停留在主頁(yè)或者其他奇怪的地方的時(shí)候自動(dòng)跳轉(zhuǎn)到

/all
上面，網(wǎng)址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。

2. 當(dāng)頁(yè)面跳轉(zhuǎn)方向是/other的時(shí)候，跳轉(zhuǎn)到

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
上
3. 當(dāng)出現(xiàn)特定的跳轉(zhuǎn)的時(shí)候（這里規(guī)定跳轉(zhuǎn)的是/active,/complete/all三個(gè))，也會(huì)跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面，但這是在index下的跳轉(zhuǎn)——

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

【尤其注意的一點(diǎn)：除了2會(huì)跳出這個(gè)頁(yè)面，其他的跳轉(zhuǎn)是顯示在規(guī)定的視圖區(qū)和路由區(qū)上面的，body網(wǎng)頁(yè)上的內(nèi)容會(huì)被加載過(guò)來(lái)?！?/p>

接下來(lái)我們講解原理：

app.config(function($routeProvider)

這便是用來(lái)設(shè)定路由的代碼，直接寫就好

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: 'myTodoCtrl'*/
  }

  var ohter_config = {
    templateUrl: "other.html"
  }

這是兩個(gè)跳轉(zhuǎn)，跳轉(zhuǎn)是一個(gè)對(duì)象，templateUrl，即模板是body.html，這就是為什么index.html會(huì)加載body.html的原因。第二個(gè)參數(shù)是為這個(gè)模板添加控制器，名字是——myTodoCtrl。

第二個(gè)跳轉(zhuǎn)因?yàn)椴恢匾詐ass。

$routeProvider.
   when("",routeconfig).
   //status ： 它對(duì)應(yīng)我們頁(yè)面的hash: all completed active
   //路由規(guī)則的優(yōu)先級(jí)按寫法的順序所決定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});

這一段代碼是用來(lái)進(jìn)行判斷的，當(dāng)哈希值發(fā)生改變的時(shí)候，執(zhí)行對(duì)應(yīng)的跳轉(zhuǎn)對(duì)象。

當(dāng)哈希值為""即第二句，為空的時(shí)候，執(zhí)行routeconfig

當(dāng)哈希值為"/other",即第五局，執(zhí)行other_config

當(dāng)哈希值是一個(gè)特殊變量的時(shí)候，變量的名稱為aaa，值為X（X可以是定義好的任何指，這里是all，complete，active中其中一個(gè)），即"/active","/complete","/all"的時(shí)候，執(zhí)行routeconfig。

當(dāng)哈希值是其他情況的時(shí)候，默認(rèn)跳轉(zhuǎn)到哈希值為"/all"上。

我們得到了哈希值，執(zhí)行了后面的對(duì)象，取出對(duì)象的模板，添加在了主頁(yè)上面，啟動(dòng)了控制器，整個(gè)路由便算完成了。

以上就是小編為大家?guī)?lái)的angular.js之路由的選擇方法的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~

您可能感興趣的文章: