AngularJS路由和模板

时间：2022-10-10 20:06:08

AngularJS路由和模板

前言

如果想开发一款类似gmail的web应用，我们怎么做呢？

以jQuery的思路，做响应式的架构设计时，我们要监听所有点击事件，通过事件函数触发我们加载数据，提交，弹框，验证等的功能；以 AngularJS的思路，做声明式的架构设计时，我们通过指令和路由先设定好，什么样的操作干什么事情，等事件发生时，程序就会知道该干什么了。

今天说一下，AngularJS是如何实现前端路由功能的！

目录

  1. AngularJS路由介绍
  2. 路由的代码实现
  3. 实现效果截图

1. AngularJS路由介绍

AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。

AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。

从这个角度想想，要实现一个gmail的应用，真的就不难了。

2. 路由的代码实现

理论不多说了，直接上代码！！ 还是基于我们之前用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>

<div ng-view></div>

<script src="bower_components/angular/angular.js"></script>

<script src="scripts/app.js"></script>

<script src="scripts/controllers/main.js"></script>

</body>

</html>

2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。

<hr/>

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

<ul>

<li ng-repeat="id in [1, 2, 3 ]">

<a href="#/list/{{ id }}"> ID{{ id }}</a>

</li>

</ul>

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，在这里需要声明。

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. 实现效果截图

此项目需搭载服务器，Tomecat,grunt或者nodeJS皆可，启动程序后访问

http://localhost:9000/demo-route.html

浏览器被自动打开，默认出的是http://localhost:9000/demo-route.html#/list, “#/list”是被redirectTo转向的结果。

AngularJS路由和模板

点击ID2的链接。

AngularJS路由和模板

页面被刷新了，出了detil的页面。同时，我们注意观察，页面没有整个刷新，而在视图中(ng-view)做的局部刷新。因为，chrome的开发工具的监控中，只是看到detail.html被加载。

我们再浏览地址栏中，输入212

http://localhost:9000/demo-route.html#/list/212

AngularJS路由和模板

观察chrome的开发工具的监控中，没有任何的networking操作。

在浏览地址栏中，再输入原来list的地址

http://localhost:9000/demo-route.html#/list

观察chrome的开发工具的监控，确认没有任何变化！！

从这个实验，我们看到AngularJS纯前端路由的实现思路，配合视图的局部刷新，把业务功能切片后分散到HTML的模板页面中。非常容易地实现了widget。并且，这种widget可重用性会非常高，能大大减少前端代码量。

后端组件化开发思路，流畅的嵌入前端。爽死啦！！！

转载请注明出处：
http://blog.fens.me/angularjs-route-template/

AngularJS路由和模板的更多相关文章

  1. 【转】AngularJS路由和模板

    1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...

  2. AngularJS 路由和模板实例及路由地址简化方法

    最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽 ...

  3. AngularJS 路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...

  4. Angularjs路由需要了解的那点事

    Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...

  5. angular&period;js的路由和模板在asp&period;net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  6. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  7. AngularJS进阶&lpar;二&rpar;AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  8. AngularJS路由系列&lpar;6&rpar;-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  9. &lbrack;AngularJS&rsqb; &OpenCurlyDoubleQuote;路由”的定义概念、使用详解——AngularJS学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 AngularJS“路由”的定义概念 AngularJS最近真的很火,很多同事啊同学 ...

随机推荐

  1. 微信JSApi支付~坑和如何填坑

    返回目录 微信一直用着不爽,这几天研究它的jsapi支付,即在微信内打开H5页面,完成支付的过程,在这个过程中,你将会遇到各种各样的问题,而大叔将把这些问题的解决方法写一下,希望可以给你带来帮助! 一 ...

  2. 起点CG原创教程——digicel&period;FlipBook&period;6教程

    http://blog.renren.com/blog/262793929/473221163

  3. Qt之设置QWidget背景色

    简述 QWidget是所有用户界面对象的基类,这意味着可以用同样的方法为其它子类控件改变背景颜色. Qt中窗口背景的设置,下面介绍三种方法. 使用QPalette 使用Style Sheet 绘图事件 ...

  4. 深度学习算法实践15---堆叠去噪自动编码机（SdA）原理及实现

    我们讨论了去噪自动编码机(dA),并讨论了Theano框架实现的细节.在本节中,我们将讨论去噪自动编码机(dA)的主要应用,即组成堆叠自动编码机(SdA),我们将以MNIST手写字母识别为例,用堆叠自 ...

  5. xshell4无法使用小键盘问题解决

    今天新安装了一个Xshell4.0的客户端,登录linux服务器发现无法使用小键盘进行输入,后来把终端里的——终端类型 更改成linux后重新打开标签登录服务器,发现可正常使用.默认的终端类型为:xt ...

  6. freemarker导出word带图片

    导出word带图片 如果你需要在word中添加图片,那你就在第一步制作模板时,加入一张图片占位,然后打开xml文档,可以看到如下的一片base64编码后的代码: <w:binData w:nam ...

  7. SQL SERVER Management Studio

    1.​ 实验目的 ​ 熟悉SQL SERVER Management Studio的部分操作 ​ 数据SQL SERVER简化版和完整版数据库设计 2.​ 实验内容 2.1.​ 熟悉简化版SQL ...

  8. Mybatis 源码简述

    转载请注明来自:http://www.cnblogs.com/xmzJava/p/8578399.html 日常开发中,mybatis如果报错了调错起来会比较麻烦,因为一层套着一层,如果没有对myba ...

  9. char &ast;与const char &ast;&ast;函数参数传参问题

    传参方法 ## 函数 extern void f2 ( const char ** ccc ); const char ch = 'X'; char * ch_ptr; const char ** c ...

  10. Android——UI和View——控制方式

    控制方式 只用xml实现 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

相关文章