AngularJS路由與模板templateUrl學習筆記

時間 2020-02-03

標籤 angularjs 路由模板 templateurl 學習筆記欄目 AngularJS 简体版

原文原文鏈接

1. AngularJS路由介紹html

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

AngularJS的前端路由，雖然URL輸入不同，頁面展現不同，其實完成的單頁(ng-app)視圖(ng-view)的局部刷新。這樣來看，AngularJS作單頁應用就有點標配的感受了。chrome

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

例子緩存

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

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

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

參數詳解：grunt

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>

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

這個頁面是佈局模板，是HTML的代碼片斷。包括了一組ID的列表，經過ID列表的連接，能夠進入到ID的詳細頁面。

代碼以下

複製代碼

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

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，在這裏須要聲明。

代碼以下

複製代碼

在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可重用性會很是高，能大大減小前端代碼量。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。