文档章节

理解AngularJS ngRoute

maweitao
 maweitao
发布于 2014/08/27 11:06
字数 893
阅读 5967
收藏 2

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。

个人了解到AngularJS,是由于在寻找可以动态利用Ajax从服务器端取得部分页面这一功能而找到EmberJS,而后又根据EmberJS找到的AngularJS。而在AngularJS中,实现这一功能的,就是ngRoute。

所以,个人与AngularJS的结缘,是由于ngRoute一点也不为过。

理解

AngularJS的基础是其模块机制。在模块的基础上,我们可以利用JavaScript的一些特性来做我们想做的任何的事情。

ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。

在使用ngRoute的时候,实际上,我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的,如ng-grid。

在ngRoute中,主要有$route、$routeProvider、$routeParams三个服务项目。

$routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。

安装

  1. 使用Google CDN

1
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

  1. 使用Bower

由于国内网络环境的和谐,个人强烈建议使用此种方式!

1
bower install angular-route@X.Y.Z

  1. 使用官方CDN

1
http://code.angularjs.org/X.Y.Z/angular-route.js

使用

ngRoute并没有在AngularJS的核心包里面,所以在使用的时候,需要引入一个独立的库。

  1. 在HTML中引入ngRoute

1
2
3
4
<!-- index.html --><script src="angular.js" /><script src="angular-route.js" />

  1. 在应用主模块中,引入ngRoute

1
2
3
 myApp = angular.module(, []);

  1. 在模块的config中绑定URL路径与控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 configFn = 
    $routeProvider.
      when(, {
        templateUrl: ,
        controller: 
      }).
      when(, {
        templateUrl: ,
        controller: 
      }).
      otherwise({
        redirectTo: 
      });
};

myApp.config(configFn);

$routeProvider

$routeProvider是一个用于配置路由内置服务。由于它是一个服务,根据service的使用建议,我们主要将其当做为工具来使用,所以我们一般直接使用$routeProvider.XXX来调用它的成员方法来实现一定的功能,而不是实例化一个$routeProvider的实例。它主要有以下两个成员函数:

  1. otherwise(params):设定映射信息到$route.current,一般用于指定没有标明的路由如何处理。
  2. when(path, route):向$route服务添加新的路由。path是指定的URL路径,route标明路由的处理。

$routeProvider.when(path, route)中的路由处理参数对象,常用的有如下的属性:

  • controller:用于指向用于路由处理的控制器。
  • template:用于指向用于路由的视图模板。
  • redirectTo:重定向。(使用$location)

不常用属性:

  • controllerAs:控制器别名,一旦设定,在视图中的scope就得使用这个别名来调用控制器。
  • templateUrl
  • resolve

$route

$route用于将控制器与视图相连。它观察$location.url(),并且尝试映射路径到一个已经存在的路由定义中。它依赖$location、$routeParams。它主要有如下成员函数:

  • reload() 用于重新加载当前的路由,哪怕$location没有改变。调用后,ngView将创建新的Scope等。

它主要有如下事件:

  • $routeChangeStart:路由改变之前触发;
  • $routeChangeSuccess:路由改变之后触发;
  • $routeChangeError:路由改变出错触发;

$routeParams

$routeParams允许你检索当前路由的参数。主要使用$locationsearch()path()方法。

参考

© 著作权归作者所有

maweitao
粉丝 12
博文 27
码字总数 26297
作品 0
武汉
私信 提问
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
40
0
AngularJS 1.3.2 发布,HTML 的 Web 框架

AngularJS 1.3.2 发布,Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很...

oschina
2014/11/09
2.8K
8
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
17K
16
AngularJS 1.3.12/1.4.0 Beta3 发布

AngularJS 1.3.12/1.4.0 Beta2 发布,AngularJS 1.3.12 改进内容如下: Bug 修复 $controller: throw better error when controller expression is bad (632b2ddd,#10875, #10910) $parse: ......

oschina
2015/02/05
1K
6
AngularJS 2014-10-22

前台代码起来越多,需要用一种更高效方式整合 MVC只是手段,终极目标是模块化和复用 第一部分:快速上手 1.1 感受AngularJS的4大核心特性 1.2 搭建开发、调试、测试环境 第二部分:基本概念和...

jayronwang
2014/10/22
411
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
19分钟前
2
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
39分钟前
5
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
40分钟前
4
0
HTML5+CSS3从入门到精通 中文pdf版​

本文转载于:专业的前端网站➵HTML5+CSS3从入门到精通 中文pdf版 HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指...

前端老手
42分钟前
5
0
聊聊nacos client的ConfigFilterChainManager

序 本文主要研究一下nacos client的ConfigFilterChainManager IConfigFilterChain nacos-1.1.3/api/src/main/java/com/alibaba/nacos/api/config/filter/IConfigFilterChain.java public in......

go4it
49分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部