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. ICLR 2013 International Conference on Learning Representations深度学习论文papers

    ICLR 2013 International Conference on Learning Representations May 02 - 04, 2013, Scottsdale, Arizon ...

  2. Unity3d笔试题大全

    1.       [C#语言基础]请简述拆箱和装箱. 答: 装箱操作: 值类型隐式转换为object类型或由此值类型实现的任何接口类型的过程. 1.在堆中开辟内存空间. 2.将值类型的数据复制到堆中. ...

  3. 高性能CSS

    避免使用@import 有两种方式加载样式文件,一种是link元素,另一种是CSS 2.1加入@import.而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟.虽然规则允许在样 ...

  4. Maven核心概念之仓库，生命周期与插件

    宏观图 一.仓库 统一存储全部Maven项目共享的构建的位置就是仓库. 仓库分为本地仓库和远程仓库.远程仓库又分为中央仓库(中央仓库是Maven核心自带的远程仓库),伺服(还有一种特殊的远程仓库,为节 ...

  5. LIBSVM与LIBLINEAR

    对于多分类问题以及核函数的选取,以下经验规则可以借鉴: 如果如果特征数远远大于样本数的情况下,使用线性核就可以了. 如果特征数和样本数都很大,例如文档分类,一般使用线性核, LIBLINEAR比LIB ...

  6. 算法笔记_035:寻找最小的k个数（Java）

    目录 1 问题描述 2 解决方案 2.1 全部排序法 2.2 部分排序法 2.3 用堆代替数组法 2.4线性选择算法   1 问题描述 有n个整数,请找出其中最小的k个数,要求时间复杂度尽可能低. 2 ...

  7. openerp创建动态视图-fields_view_get

    openerp的视图结构是以XML的格式存放于ir.ui.view表中,属于静态格式,设计之后就固定, 但可以通过在model中重写fields_view_get函数,在视图加载时修改arch属性,动 ...

  8. mac下的git的安装与简单的配置

    git 本地操作 git 简单介绍 .Git是分布式的SCM,SVN是集中式的 2.Git每一个历史版本号存储完整的文件,SVN存储文件差异 3.Git可离线完毕大部分操作,SVN则相反 4.Git有 ...

  9. oracle 存储过程 调用动态sql

      oracle 存储过程 调用动态sql CreationTime--2018年8月16日11点25分 Author:Marydon 1.错误实现方式 --开始时间拼接' 00:00:00' V_S ...

  10. Ubuntu下添加新分区并设置挂载点

    Ubuntu下添加新分区并设置挂载点   最近在做Android项目,可是解压根文件系统以后,就报警说硬盘不够.当初设置使用的大小为15G.不过扩展分区还是很方便的.当然首先你得设置添加使用的硬盘大小 ...