Angular的模板与路由功能

2024年4月11日 215次阅读 来源: 穿越过来的键盘手

理解Angular的模板功能

模板功能，是Angular的最核心的功能之一。
本节通过velocity模板与angular的模板功能对比，来说明angular的模板功能是如何工作的。

传统的velocity服务端模板工作流程如下：

step:1 Template 模板

  1. #用来标识Velocity的脚本语句

  2. $用来标识一个对象(或理解为变量)

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

step:2 Model 数据

$变量的实际值存在服务器的 Model 中，这些数据结合#表示的velocity语法规则，在服务端转变成HTML也就是View 视图

var data = {
    "title": "分类信息网站",
    "names": [
        "58同城",
        "赶集网"
    ]
};

step:3 View 视图

在传统的服务端模板中，Template 模板和 Model 数据 组装成 View 视图 的过程发生在服务端，然后再把生成的HTML页面发送到游览器中。

<h1>分类信息网站</h1>
<ul>
    <li>58同城</li>
    <li>赶集网</ul>
</ul>

Angular的模板的功能：

step:1 Template 模板

  1. 用ng-app ng-controller ng-repeat等标签属性表示Angular语法，官方术语叫做 指令

  2. 用{{}}表示变量

  3. 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 数据

  1. $scope.data 就相当于 上面velocity中模拟的 data 对象

  2. 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进行一个简单对比。

对比Angularvelocity
模板语法指令 #开头的脚本语句
模板变量{{}} $开头的模板变量
数据$scope.data模拟的data对象
工作原理模板+数据=视图模板+数据=视图
模板类型客户端模板服务端模板

Angular的路由功能及其原理

路由功能的实现原理

在单页面应用中，View 视图会根据用户的操作进行切换，在传统页面中，视图的切换意味着页面跳转，用户会通过游览器中的后退，前进按钮来进行操作。而这正是单页面应用中，需要的功能。实现原理如下：

  1. 点击某个按钮或链接

  2. 使用hash修改地址栏

  3. 加载相应视图

  4. 点击前进/后退

  5. 地址栏变化触发hashchange事件

  6. 监听到相应事件，加载对应视图

如此一来，便形成了通过地址栏进行导航的深度链接，也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。

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:编写模板

  1. ng-view当前路由把对应的视图模板载入到该<div>中。

  2. type="text/ng-template"表明<script>标签中存的是Angular的模板文本。

  3. 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;
})
    原文作者：穿越过来的键盘手
    原文地址: https://segmentfault.com/a/1190000003118044
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞