1.AngularJS路由允许我们通过不同的URL访问不同的内容；通过AngularJS可以实现多视图的单页WEB访问（SPA）

2.通常我们的URL形式为http://runoob.com/first/page，但在单页Web应用中AngularJS通过#+标记实现，例如：

http://runoob.com/#/first

http://runoob.com/#/second

http://runoob.com/#/third

3.当我们点击以上的任意的一个链接时，向服务端请的地址都是一样的（http://runoob.com/）。因为#号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现#号后面内容的功能实现。AngularJS路由就通过#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

4.简单实例：

<html>

　　<head>

　　　　<meta charset="utf-8">

　　　　<title>AngularJS路由实例<title>

　　</head>

　　<body ng-app='routingDemoApp'>

　　<h2>AnuglarJS路由应用</h2>

　　<ul>

　　　　<li><a href="#/">首页</a></li>

　　　　<li><a href="#/computers">电脑</a></li>

　　　　<li><a href="#/printers">打印机</a></li>

　　　　<li><a href="#/blabla">其他</a></li>

　　</ul>

　　<div ng-view></div>                 //使用ngView指令，该<div>内的HTML内容会根据路由的变化而变化

　　<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

　　<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>                   //载入了实现路由的js文件：angular-route.js

　　<script>

　　　　angular.module('routingDemoApp',['ngRoute'])    //包含了ngRoute模块作为主应用模块的依赖模块

　　　　.config(['$routeProvider',function($routeProvider{   //AngularJS模块的config函数用于配置路由规则，通过使用configAPI，我们请求把$routeProvider注入到我们的配置函数且使用$routeProviderAPI定义我们的路由规则

　　　　　　$routeProvider;        //配置$routeProvider,AngularJS的$routeProvider用了定义路由规则

　　　　　　.when('/',{template:'这是首页页面'})     //$routeProvider为我们提供了when(path，object)&otherwise(object)函数按顺序定义所有路由，函数包含两个参数：第一个参数是URL或者URL正则规则；第二个参数是路由配置对象

　　　　　　.when('/computers',{template:'这是电脑分类页面'})

　　　　　　.when('/printers',{template:'这是打印机页面'})

　　　　})]);

　　</script>

</body>

</html>

5.路由设置对象：AngularJS路由也可以通过不同的模板来实现，$routeProvider.when函数的第一个参数是URL或者URL正则规则，第二个参数为路由配置对象；语法规则如下：

$routeProvider.when(url,{

　　template:string,           //如果我们只需要在ng-view中插入简单的HTML内容，则使用该参数.when('/computers',{template:'这是电脑分类页面'})

　　templateUrl:string,      //如果我们只需要在ng-view中插入HTML模板文件，则使用该参数：$routeProvider.when('/computers',{templateUrl:'views/computers.html',});从服务器端获取view/computers.html文件插入到ng-view中

　　controller:string,function或array,             //function，string，或数组类型，在当前模板上执行的controller函数，生成新的scope

　　controllerAs:string,             //string，为controller指定别名

　　redirectTo:string,function,       //重定向的地址

　　resolve:object<key,function>        //指定当前controller所依赖的其他模块

});

Angular JS 学习之路由的更多相关文章

  1. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  2. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  3. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  4. Angular JS中的路由

      前  言            本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...

  5. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  6. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  7. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  8. Angular JS学习之表达式

    1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...

  9. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

随机推荐

  1. c# winform 动态画矩形 矩形大小可以拖动

    http://jhlong12345.blog.163.com/blog/static/1230631292015544450189/#  结合上一篇,继续 矩形大小的调整   还有小bug,思路有了 ...

  2. Centos下安装jdk

    下载 由于oracle官网下载jdk需要网站验证,所以不能使用wget直接下载. 一种比较快的方式是在本地下载tar.gz或者rpm,之后上传到Linux. tar.gz格式只需解压,放到指定目录下, ...

  3. 探索ASP.NET MVC框架之路由系统

    引言 对于ASP.NET MVC的路由系统相信大家肯定不陌生.今天我们就深入ASP.NET的框架内部来看一下路由系统到底是怎么通过我们给出的地址(例如:/Home/Index)解析出Controlle ...

  4. windows7下修改hosts文件无效解决办法(转)

    通常会为了开发方便.或者屏蔽掉一些恶意网站,我们会在hosts(c:\windows\system32\drivers\etc\hosts)文件中进行相应的域名指向,例:

  5. 每秒执行一个shell脚本（转载）

      上周迁移了一台服务器,发现其中一个项目的数据没有更新,查询原服务器的数据,数据有更新,并找到了rsync服务,从其他服务器传输数据,那么如何找到这台服务器?因为是从远程传输到本地,而且不是很频繁, ...

  6. JSP动作元素之include

    采用include指令导入的页面输入静态导入,采用<jsp:include-/>指令属于动态导入. 语法格式如下: <jsp:include page="{relative ...

  7. 只用@property定义一个属性speed，子类不能直接用_speed，需要在interface的成员变量列表里写上_speed

    //写法一: @interface Person : NSObject { } @property (nonatomic, strong) NSString *name; @end @implemen ...

  8. iphone如何导出微信聊天记录到电脑?

    有个小美眉买了个iphone,但发现自己就是一小白,很多功能都不会用,微信倒是用得挺上手的,可以晚上聊到三四点,流量直接飙升500MB.最近她说手机太卡了,问ytkah帮她整一下.拿起她的IPhone ...

  9. javascript数据结构-介绍

    github博客地址 名词解释 数据结构是计算机存储.组织数据的方式.数据结构是指相互之间存在一种或多种特定关系的数据元素的集合.通常情况下,精心选择的数据结构可以带来更高的运行或者存储效率.数据结构 ...

  10. dataTables 使用小细节

    1.dataTables 日期查询 var row_content = []; //暂存表格的行内容 var rows=[]; //暂存表格行索引 /**将日期缓存添加,清除上一次日期搜索的缓存*/ ...