angular.js之路由的選擇方法-js教程-PHP中文網

首頁

web前端

js教程

angular.js之路由的選擇方法

高洛峰

Feb 06, 2017 am 11:41 AM

在一個單一頁面中，我們可以新增多個模組，使得網頁只在需要的時候載入這個模組。模組的切換大致上可以取代網頁的切換，於是，我們便可以透過模組的切換實現網頁的切換，這個切換是按需載入的。

乍看之下非常普通的東西，但是仔細想想就可以發現，這種思想可以解決非常多的資源。

例如，假如有一個頁面，需要顯示1000種商品的信息，每個商品的表現形式各不相同（設他們有各自獨立的css和js），那麼一般來說，我們就需要準備1000張網頁去載入這些資訊。但是，使用這種模組化思想，我們就可以僅在後台設定1000個各不相同的模組，然後根據需要將需要的商品的對應模組加載到唯一一張頁面上而已。

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

主體思路：

1. 後台設立多個獨立的模組

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

3. 根據需要透過路由提取需要模組載入到主頁上

4. 載入的同時，將其他模組隱藏。

那麼，路由模組的建立需要多少功夫呢？其實意外地簡單：

首先，主頁上，寫上對應的程式碼：

這個代表路由區域和視圖區域，只有寫了這個標籤才會觸發路由事件：

<html 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> <!-- 路由区域，视图区域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Part of <a href="http://todomvc.com">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行就可以了。

在路由區域和視圖區域中，我們可以添加內容進去——甚至添加一個網頁進去。

接下來請看對應的app.js。

var app = angular.module("myTodo", [&#39;ngRoute&#39;]);
//路由的配置：
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }
 
  $routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
   
});

如果只使用路由的話，以上的程式碼就夠使用了。它會保證;

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

/all
上面，網址是－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. 當出現特定的跳躍的時候（這裡規定跳轉的是/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-32/index.html #/complete

【尤其註意的一點：除了2會跳出這個頁面，其他的跳轉是顯示在規定的視圖區和路由區上面的，body網頁上的內容會被加載過來。】

接下來我們講解原理：

app.config(function($routeProvider)

這便是用來設定路由的程式碼，直接寫就好

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }

這是兩個跳轉，跳躍是一個對象，templateUrl，即模板是body.html，這就是為什麼index.html會載入body.html的原因。轉因為不重要所以pass。為空的時候，執行routeconfig

當雜湊值為"/other",即第五局，執行other_config

當雜湊值是特殊變數的時候，變數的名稱為aaa，值為X（X可以是定義好的任何指，這裡是all，complete，active中其中一個），即"/active","/complete","/all"的時候，執行routeconfig。的時候，預設跳到哈希值為"/all"。便算完成了。路由的選擇方法相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

See all articles