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可重用性会很是高，能大大减小前端代码量。