Angular的模板與路由功能

時間 2019-12-08

原文原文鏈接

理解Angular的模板功能

模板功能，是Angular的最核心的功能之一。
本節經過velocity模板與angular的模板功能對比，來講明angular的模板功能是如何工做的。html

傳統的velocity服務端模板工做流程以下：

step:1 Template 模板web

#用來標識Velocity的腳本語句服務器
$用來標識一個對象(或理解爲變量)app

<h1>$data.title</h1>
 <ul>
     #foreach($name in $data.names)
         <li>$name</li>
     #end
 </ul>

step:2 Model 數據ide

$變量的實際值存在服務器的 Model 中，這些數據結合#表示的velocity語法規則，在服務端轉變成HTML也就是View 視圖網站

var data = {
    "title": "分類信息網站",
    "names": [
        "58同城",
        "趕集網"
    ]
};

step:3 View 視圖ui

在傳統的服務端模板中，Template 模板和 Model 數據組裝成 View 視圖的過程發生在服務端，而後再把生成的HTML頁面發送到遊覽器中。this

<h1>分類信息網站</h1>
<ul>
    <li>58同城</li>
    <li>趕集網</ul>
</ul>

Angular的模板的功能：

step:1 Template 模板spa

用ng-app ng-controller ng-repeat等標籤屬性表示Angular語法，官方術語叫作 指令code
用{{}}表示變量
ng-repeat至關於velocity中的#foreach；
ng-app 告訴Angular應該接頁面中的哪一塊，通常寫在<html>標籤中，讓Angular接管整個頁面；
ng-controller 每一個頁面可能會有幾個controller，它的做用是告訴Angular模板的對應的Angular數據由哪部分代碼管理。

<html ng-app="web">
<body ng-controller="mainController">
    <h1>{{data.title}}</h1>
     <ul>
         <li ng-repeat="name in data.names">{{name}}</li>
     </ul>
</body>
</html>

step:2 Model 數據

$scope.data 就至關於上面velocity中模擬的 data 對象
angular.module('web',[])對應的是模板中ng-app="web";controller('mainController',fn)對應的是模板中的<body ng-controller="mainController">。代表$scope.data的做用域僅適用於<body>中的Angular模板。

angular.module('web', [])
.controller('mainController', function($scope){
    $scope.data = {
        "title": "分類信息網站",
        "names": [
            "58同城",
            "趕集網"
        ]
    };
});

step:3 View 視圖

在遊覽器中，Angular將Template 模板和Model 數據組裝起來了，輸出最終的HTML頁面，也就是View 視圖。

<h1>分類信息網站</h1>
<ul>
    <li>58同城</li>
    <li>趕集網</ul>
</ul>

Angular與velocity極其的相識，其功能都將Template 模板和 Model 數據組裝起來，輸出成View 視圖。其主要的不一樣在於，Angular的組裝過程發生在遊覽器中，而velocity組裝過程發生在服務器中。

咱們能夠經過下表將Angular模板功能和velocity進行一個簡單對比。

對比	Angular	velocity
模板語法	指令	`#`開頭的腳本語句
模板變量	{{}}	`$`開頭的模板變量
數據	`$scope.data`	模擬的data對象
工做原理	模板+數據=視圖	模板+數據=視圖
模板類型	客戶端模板	服務端模板

Angular的路由功能及其原理

路由功能的實現原理

在單頁面應用中，View 視圖會根據用戶的操做進行切換，在傳統頁面中，視圖的切換意味着頁面跳轉，用戶會經過遊覽器中的後退，前進按鈕來進行操做。而這正是單頁面應用中，須要的功能。實現原理以下：

點擊某個按鈕或連接
使用hash修改地址欄
加載相應視圖
點擊前進/後退
地址欄變化觸發hashchange事件
監聽到相應事件，加載對應視圖

如此一來，便造成了經過地址欄進行導航的深度連接，也就是咱們所須要的路由機制。經過路由機制，一個單頁應用的各個視圖就能夠很好的組織起來了。

html:

<div id="btns">
    <input type="button" value="a">
    <input type="button" value="b">
    <input type="button" value="c">
</div>

<div id="page" style="display: none;">
    <p>我是頁面<span></span></p>
</div>

js:

// 每次按鈕點擊的時候改變hash值。
$('input').click(function(event) {
    var hash = $(this).val();
    document.location.hash = '/' + hash;
});

// 用戶點擊遊覽器回退\前進或點擊按鈕都會引發hash值的改變。
// 當hash值改變時，改變 View 視圖。
$(window).on('hashchange', function(e){
    var hash = document.location.hash.replace(/#\//,'');
    if (/(a|b|c)/.test(hash) ) {
        $('#page span').text(hash);
        $('#page').show();
        $('#btns').hide();
    } else {
        $('#page').hide();
        $('#btns').show();
    }
});

Angular的路由功能

step1:引入依賴

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

<script>
var app = angular.module('web', ['ngRoute']) //引入route模塊，有點相似於require.js的引入
// ...
</script>

須要注意的是，以上文件的版本要一致，1.2.x的angular不能引用1.4.x版本的angular-ruote文件。

step2:編寫模板

ng-view當前路由把對應的視圖模板載入到該<div>中。
type="text/ng-template"代表<script>標籤中存的是Angular的模板文本。
href="#/"Angular所控制的hash路徑

<div ng-view="" ></div>
<script type="text/ng-template" id="list.html">
    <div id="btns" ng-controller="listContr">
        <a ng-repeat="item in list" href="#/{{item}}" ><div>{{item}}</div></a>
    </div>
</script>
<script type="text/ng-template" id="item.html">
    <div id="page" ng-controller="itemContr">
        <p>我是頁面<span>{{item}}</span></p>
    </div>
</script>

step3:定義路由表

爲了給應用配置路由，須要使用configAPI，經過$routeProvider.whenAPI\otherwiseAPI來定義的路由規則。

當URL爲/時，AngularJS會使用listContr控制器和list模板
當URL爲/:item時，這裏的:item是變量，AngularJS會使用itemContr控制器和item.html模板。
otherwise`redirectTo表示，非以上路由，對頁面進行重定向到/`頁面。

app.config(function($routeProvider){
    $routeProvider.
    when('/', {
        controller: 'listContr',  //  默認爲所有職位
        templateUrl: 'list'
    }).
    when('/:item',{          // 篩選職位
        controller: 'itemContr',
        templateUrl: 'item'
    }).
    otherwise({
        redirectTo: '/'
    });
});

step4:編寫Controller

$routeParams對應的是路由的參數.

app.controller('listContr', function($scope){
    $scope.list = ['a','b','c'];
}).
controller('itemContr', function($scope, $routeParams){
    $scope.item = $routeParams.item;
})