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)

  1. <!DOCTYPE html>
  2. <html ng-app="routeApp">
  3. <head>
  4. <title>route</title>
  5. <script src="lib/angular/angular.min.js"></script>
  6. <!--需要额外引入angular-route.min.js-->
  7. <script src="lib/angular/angular-route.min.js"></script>
  8. <script src="scripts/app.js"></script>
  9. <script src="scripts/controllers/main.js"></script>
  10. </head>
  11. <body >
  12. <h1>Route Demo index</h1>
  13. <div ng-view></div>
  14. </body>
  15. </html>

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

  1. <hr/>
  2. <h3>Route : List.html</h3>
  3. <ul>
  4. <li ng-repeat="id in [1, 2, 3 ]">
  5. <a href="#/list/{{ id }}"> ID{{ id }}</a>
  6. </li>
  7. </ul>

3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)

  1. <hr/>
  2. <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。

  1. var routeApp = angular.module('routeApp',['ngRoute']);
  2. routeApp.config(['$routeProvider',function ($routeProvider) {
  3. $routeProvider
  4. .when('/list', {
  5. templateUrl: 'views/route/list.html',
  6. controller: 'RouteListCtl'
  7. })
  8. .when('/list/:id', {
  9. templateUrl: 'views/route/detail.html',
  10. controller: 'RouteDetailCtl'
  11. })
  12. .otherwise({
  13. redirectTo: '/list'
  14. });
  15. }]);

在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。

  1. routeApp.controller('RouteListCtl',function($scope) {
  2. });
  3. routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
  4. $scope.id = $routeParams.id;
  5. });

分别对应该路由中的两个控制器声明。

angular路由介绍的更多相关文章

  1. angular路由（自带路由篇）

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  2. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  3. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  5. node之路由介绍

    路由介绍 ----路由是指向客户端提供它所发出的请求内容的机制:----对基于 Web 的客户端 / 服务器端程序而言,客户端在 URL 中指明它想要的内容,具体来说就是路径和查询字符串 下面我看看一 ...

  6. angular 路由的引用

    使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install  -g  angu ...

  7. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  8. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  9. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

随机推荐

  1. jQuery 回调函数

    jQuery(回调函数) 此函数的作用将callback参数以函数的定义形式,在页面onload的时候进行调用.相当于$(document).ready(callback). <script t ...

  2. Hadoop Combiners

    In the last post and in the preceding one we saw how to write a MapReduce program for finding the to ...

  3. C# int与string转化

    1.int-->string ; string s1 = a.ToString(); string s2 = Convert.ToString(a); 2.string -->int &q ...

  4. js Object.is 相等判断

    Object.is使用“Same-value equality”(同值相等)算法进行相等判断.它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致. Object.is('foo', ...

  5. scribe 搭建遇到的问题

    1.如果安装了多个boost版本或boost路径不是scribe脚本指定的话,会出现问题: checking whether the Boost::System library is availabl ...

  6. Mongoose使用——nodejs结合mongodb

    0. 前言: Mongoose是NodeJS的驱动,不能作为其他语言的驱动.Mongoose有两个特点: 通过关系型数据库的思想来设计非关系型数据库 基于mongodb驱动,简化操作 Mongooos ...

  7. 【LeetCode】117. Populating Next Right Pointers in Each Node II (2 solutions)

    Populating Next Right Pointers in Each Node II Follow up for problem "Populating Next Right Poi ...

  8. Android—— 定制界面风格

    统一的用户界面是可以使得应用程序更友好.要做到用户界面的统一,我们就必须用到风格(style)和主题(theme).OPhone系统提供了很多系统默认的风格和主题,但是很多情况下,这些不能满足我们的需 ...

  9. Linux命令-压缩解压命令:bzip2、bunzip2

    bzip2是gzip的升级版 bzip2 [选项] 源文件名(压缩前) -k 保留源文件,(区别gzip不支持保留源文件) bunzip2 [选项] 源文件名(压缩后) 压缩文件: bzip2 -k ...

  10. 对象语义与值语义、资源管理（RAII、资源所有权）、模拟实现auto_ptr<class>、实现Ptr_vector

    一.对象语义与值语义 1.值语义是指对象的拷贝与原对象无关.拷贝之后就与原对象脱离关系,彼此独立互不影响(深拷贝).比如说int,C++中的内置类型都是值语义,前面学过的三个标准库类型string,v ...