香港交友討論區HkEasyChat

 找回密碼
 新會員註冊
..
喜歡本頁?立即SHARE


香港交友討論區HkEasyChat»論壇forum Hkeasychat電腦網絡 Blog/網頁設計程式區 AngularJS路由與模板templateUrl學習筆記-js教程-網頁制 ...
您正在討論區的: AngularJS路由與模板templateUrl學習筆記-js教程-網頁制 ...
查看: 232|回復: 0
收起左側

[網頁設計/制作] AngularJS路由與模板templateUrl學習筆記-js教程-網頁制作

[複製鏈接]

簽到天數: 2 天

連續簽到: 1 天

[LV.1]初來乍到

評論頭像

前面文章介紹了AngularJS表單的一些驗證例子,在此我們接著來學習AngularJS路由與模板templateUrl的一些配置方法,有興趣的不防進入參考。

1. AngularJS路由介紹
AngularJS路由弁酮O一個純前端的解決方案,與我們熟悉的後台路由不太一樣。後台路由,通過不同的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的模型,難免有些暈
此段代碼主要弁遄J根據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構建的項目。
業務場景︰論壇弁遄A帖子列表頁(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)
代碼如下復制代碼



route


Route Demo index









2). 增加︰app/views/route/list.html
這個頁面是布局模板,是HTML的代碼片段。包括了一組ID的列表,通過ID列表的鏈接,可以進入到ID的詳細頁面。
代碼如下復制代碼

Route : List.html






  • ID{{ id }}


3). 增加︰app/views/route/detail.html
這個頁面是布局模板,是HTML的代碼片段。通過ID訪問,包含ID號, (ID的文章內容)

Route {{id}}: detail.html



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轉向的結果。

AngularJS路由與模板templateUrl學習筆記-js教程-網頁制作,香港交友討論區
點擊ID2的鏈接。
AngularJS路由與模板templateUrl學習筆記-js教程-網頁制作,香港交友討論區

頁面被刷新了,出了detil的頁面。同時,我們注意觀察,頁面沒有整個刷新,而在視圖中(ng-view)做的局部刷新。因為,chrome的開發工具的監控中,只是看到detail.html被加載。
我們再瀏覽地址欄中,輸入212

http://localhost:9000/demo-route.html#/list/212AngularJS路由與模板templateUrl學習筆記-js教程-網頁制作,香港交友討論區
觀察chrome的開發工具的監控中,沒有任何的networking操作。
在瀏覽地址欄中,再輸入原來list的地址
http://localhost:9000/demo-route.html#/list觀察chrome的開發工具的監控,確認沒有任何變化!!
從這個實驗,我們看到AngularJS純前端路由的實現思路,配合視圖的局部刷新,把業務弁鄐薑躩嶀懂疏閾TML的模板頁面中。非常容易地實現了widget。並且,這種widget可重用性會非常高,能大大減少前端代碼量。
[/td] [/tr]        [/table]


系統自動相關推薦tag:forum,吹水區,alexa



上一篇︰解決IE瀏覽器input file隱藏不能上傳文件問題-js教程-網頁制作
下一篇︰js驗證輸入字符串是否為空或者空格-js教程-網頁制作
+10
loading...
 
   
   
   
如您覺得" AngularJS路由與模板templateUrl學習筆記-js教程-網頁制作 "很膠,請share出去
您正在回覆: AngularJS路由與模板templateUrl學習筆記-js教程-網頁制作
您需要登錄後才可以回帖 登錄 | 新會員註冊

本版積分規則

回post預設係匿名,如唔想匿名回post請會員自己勾走

討論區|閱讀版|閱讀版大量|百科|純文字網頁|香港交友討論區

Copyright © 香港易聊HKEASYCHAT Co. All Rights Reserved
香港廣告銷售No.1

手機版|使用條款|論壇政策|廣告合作|工作機會

HK ADVERTISEMENT 2015 GOLDEN REWARDS

GMT+8, 24-8-2017 06:45 PM

快速回復 返回頂部 返回列表
保持討論區活躍高登錄一齊討論啦~ hkeasychat