欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular.js之路由的選擇方法

 更新時間:2016年09月24日 13:59:56   投稿:jingxian  
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

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

主體思路:

1. 后臺設立多個獨立的模塊

2. 建立一個路由控制模塊

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

4. 加載的同時,將其他模塊隱藏。

那么,路由模塊的建立需要多少功夫呢?其實意外地簡單:

首先,主頁面上,寫上對應的代碼:

<ng-view></ng-view>這個代表路由區(qū)域和視圖區(qū)域,只有寫了這個標簽才會觸發(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)容進去——甚至添加一個網(wǎ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 : 它對應我們頁面的hash: all completed active
   //路由規(guī)則的優(yōu)先級按寫法的順序所決定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
  
});

如果僅僅使用路由的話,以上的代碼就足夠使用了。它會保證;

1.當頁面停留在主頁或者其他奇怪的地方的時候自動跳轉到

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

2. 當頁面跳轉方向是/other的時候,跳轉到

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html

3. 當出現(xiàn)特定的跳轉的時候(這里規(guī)定跳轉的是/active,/complete/all三個),也會跳轉到對應頁面,但這是在index下的跳轉——

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

【尤其注意的一點:除了2會跳出這個頁面,其他的跳轉是顯示在規(guī)定的視圖區(qū)和路由區(qū)上面的,body網(wǎng)頁上的內(nèi)容會被加載過來?!?/p>

接下來我們講解原理:

app.config(function($routeProvider)

這便是用來設定路由的代碼,直接寫就好

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

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

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

第二個跳轉因為不重要所以pass。

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

這一段代碼是用來進行判斷的,當哈希值發(fā)生改變的時候,執(zhí)行對應的跳轉對象。

當哈希值為""即第二句,為空的時候,執(zhí)行routeconfig

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

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

當哈希值是其他情況的時候,默認跳轉到哈希值為"/all"上。

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

以上就是小編為大家?guī)淼腶ngular.js之路由的選擇方法的全部內(nèi)容了,希望對大家有所幫助,多多支持腳本之家~

相關文章

  • AngularJS基礎 ng-readonly 指令簡單示例

    AngularJS基礎 ng-readonly 指令簡單示例

    本文主要介紹AngularJS ng-readonly 指令,這里對ng-readonly指令的資料做了整理,有學習AngularJS 指令的同學可以參考下
    2016-08-08
  • AngularJS內(nèi)置指令

    AngularJS內(nèi)置指令

    這篇文章主要詳細介紹了AngularJS內(nèi)置指令的使用方法,非常詳細,常用的一些指令操作都做了總結,有需要的小伙伴參考下
    2015-02-02
  • Angular中使用響應式表單的詳細步驟

    Angular中使用響應式表單的詳細步驟

    Angular提供了兩種處理表單的方式模板驅動表單和響應式表單(也稱為模型驅動表單),使用模板驅動表單時,模板指令被用來構建表單的內(nèi)部表示,在本文中,您探討了如何將響應式表單應用于一個示例 Angular 應用程序
    2024-02-02
  • AngularJs實現(xiàn)聊天列表實時刷新功能

    AngularJs實現(xiàn)聊天列表實時刷新功能

    這篇文章主要介紹了AngularJs實現(xiàn)聊天列表實時刷新功能,需要的朋友可以參考下
    2017-06-06
  • Angular應用里異步打開對話框技術詳解

    Angular應用里異步打開對話框技術詳解

    這篇文章主要為大家介紹了Angular應用里異步打開對話框技術詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-12-12
  • AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復的開發(fā)代碼量】

    AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復的開發(fā)代碼量】

    這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機制,結合實例形式分析了AngularJS雙向數(shù)據(jù)綁定機制的原理及實現(xiàn)方法,以及減少需要重復開發(fā)代碼量的優(yōu)勢,需要的朋友可以參考下
    2017-01-01
  • 讓angularjs支持瀏覽器自動填表

    讓angularjs支持瀏覽器自動填表

    簡單來說Angular.js是google開發(fā)者設計和開發(fā)的一套前端開發(fā)框架,幫助你簡化前端開發(fā)的負擔。當然,這里有很多其它的前端開發(fā)框架,但是如何選擇合適的前端框架對于我們這些開發(fā)人員來說就不是那么容易了!
    2014-11-11
  • Angular實現(xiàn)預加載延遲模塊的示例

    Angular實現(xiàn)預加載延遲模塊的示例

    本篇文章主要介紹了Angular實現(xiàn)預加載延遲模塊的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 深入解析AngularJS框架中$scope的作用與生命周期

    深入解析AngularJS框架中$scope的作用與生命周期

    這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對象的相關用法,需要的朋友可以參考下
    2016-03-03
  • 在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟

    在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟

    在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下
    2024-03-03

最新評論