首頁 > 開發者 > AngularJS

AngularJS路由與模板templateUrl學習筆記

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1. AngularJS路由介紹

AngularJS路由功能是一個純前端的解決方案，與我們熟悉的後台路由不太一樣。後台路由，通過不同的URL會路由到不同的控制器上(controller)，再渲染(render)到頁面(HTML)。AngularJS的前端路由，需求提前對指定的(ng-app)，定義路由規則(routeProvider)，然後通過不同的URL，告訴(ng-app)載入哪個頁面(HTML)，再渲染到(ng-app)視圖(ng-view)中。

AngularJS的前端路由，雖然URL輸入不一樣，頁面展示不一樣，其實完成的單頁(ng-app)視圖(ng-view)的局部重新整理。這樣來看，AngularJS做單頁應用就有點標配的感覺了。

從這個角度想想，要實現一個gmail的應用，真的就不難了。

例子

AngularJS 本身就涉及到了WEB開發理念中的MVC，即模型 視圖 控制器
而在PHP開發中已經有一套MVC的模型，難免有些暈

此段代碼主要功能：根據URL動態參數變化，動態替換AngularJS所指定的模板

http://網域名稱/index.html#/role/edit/2 指向 http://網域名稱/role/edit?id=2
http://網域名稱/index.html#/role/edit/3 指向 http://網域名稱/role/edit?id=3

參數詳解：

url: 是匹配的url規則
templateUrl: 是指定模板，此參數可以

上代碼：

 代碼如下 複製代碼

// 編輯角色
.state('/role/edit', {
    url: "/role/edit/:id", //url: "/role/edit?id",
    templateUrl: function($routeParams) {
        return '/role/edit?id=' + $routeParams.id + '&_=' + Math.random(); //new Date().getTime();
    },
    data: {pageTitle: '編輯角色'},
    controller: "GeneralPageController",
    resolve: {
        deps: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([{
                name: 'MetronicApp',
                insertBefore: '#ng_load_plugins_before',
                files: []
            }]);
        }]
    }
})

url 後面增加了js隨機數 防止緩衝 Math.random()

好了，我們再看一個項目布局的例子

目錄

AngularJS路由介紹
路由的代碼實現
實現效果截圖

. 路由的代碼實現

理論不多說了，直接上代碼！！ 還是基於我們之前用yeoman構建的項目。

業務情境：論壇功能，貼文清單頁(list.html) 和 文章內容頁(detail.html)。

代碼檔案：

1. 增加：app/demo-route.html
2. 增加：app/views/route/list.html
3. 增加：app/views/route/detail.html
4. 修改: app/scripts/app.js
5. 修改: app/scripts/controllers/main.js
1). 增加：app/demo-route.html

這個檔案是首頁面(ng-app)，包含視圖(ng-view)

 代碼如下 複製代碼

<!doctype html>
<head>
<meta charset="utf-8">
<title>route</title>
</head>
<body ng-app="routeApp">
<h1>Route Demo index</h1>

<div ng-view></div>

<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>

2). 增加：app/views/route/list.html

這個頁面是布局模板，是HTML的程式碼片段。包括了一組ID的列表，通過ID列表的連結，可以進入到ID的詳細頁面。

 代碼如下 複製代碼

<hr/>
<h3>Route : List.html</h3>

<ul>
<li ng-repeat="id in [1, 2, 3 ]">
<a href="#/list/{{ id }}"> ID{{ id }}</a>
</li>
</ul>

3). 增加：app/views/route/detail.html

這個頁面是布局模板，是HTML的程式碼片段。通過ID訪問，包含ID號, (ID的文章內容)

<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>


4). 修改: app/scripts/app.js

這個是ng-app檔案的定義，我們在demo-route.html中定義了routeApp，在這裡需要聲明。

 代碼如下 複製代碼
var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
      $routeProvider
      .when('/list', {
        templateUrl: 'views/route/list.html',
        controller: 'RouteListCtl'
      })
      .when('/list/:id', {
          templateUrl: 'views/route/detail.html',
          controller: 'RouteDetailCtl'
      })
      .otherwise({
        redirectTo: '/list'
      });
}]);

在routeApp模組中，我們定義了路由和布局模板。routeApp的預設URL是/list，即http://localhost:9000/demo-route.html#/list。 跳轉詳細頁的路由是/list/:id，id為參數。

同時，/list的布局模板是views/route/list.html，屬於RouteListCtl的控制器管理空間。

5). 修改: app/scripts/controllers/main.js

這個檔案定義控制器controller。

 代碼如下 複製代碼
routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
    $scope.id = $routeParams.id;
});

分別對應該路由中的兩個控制器聲明。

程式寫好，我們開啟瀏覽器看效果。

3. 實現效果截圖

別忘了用下面命令，啟動程式。

grunt server

瀏覽器被自動開啟，預設出的是http://localhost:9000/demo-route.html#/list, “#/list”是被redirectTo轉向的結果。


點擊ID2的連結。

頁面被重新整理了，出了detil的頁面。同時，我們注意觀察，頁面沒有整個重新整理，而在視圖中(ng-view)做的局部重新整理。因為，chrome的開發工具的監控中，只是看到detail.html被載入。

我們再瀏覽地址欄中，輸入212

http://localhost:9000/demo-route.html#/list/212
觀察chrome的開發工具的監控中，沒有任何的networking操作。
在瀏覽地址欄中，再輸入原來list的地址 
http://localhost:9000/demo-route.html#/list
觀察chrome的開發工具的監控，確認沒有任何變化！！
從這個實驗，我們看到AngularJS純前端路由的實現思路，配合視圖的局部重新整理，把業務功能切片後分散到HTML的模板頁面中。非常容易地實現了widget。並且，這種widget可重用性會非常高，能大大減少前端代碼量。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
angularjs sample angularjs limitto angularjs selenium sharepoint angularjs angularjs ebook angularjs essentials angularjs panel
相關文章
angularjs上傳圖片預覽__js
angularjs 圖片上傳 回顯__js
angularjs 中通過ui-router設定不同網頁不同內容__js
AngularJS的orderBy和track by的同時使用問題
angularjs post Request header field Content-Type is not allow...
angularjs + springmvc 上傳和下載

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More