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. Alpha阶段第八次Scrum Meeting

    情况简述 Alpha阶段第八次Scrum Meeting 敏捷开发起始时间 2016/10/31 00:00 敏捷开发终止时间 2016/10/32 00:00 会议基本内容摘要 跟助教进行了交流,明 ...

  2. 运维请注意：”非常危险“的Linux命令大全

    Linux命令是一种很有趣且有用的东西,但在你不知道会带来什么后果的时候,它又会显得非常危险.所以,在输入某些命令前,请多多检查再敲回车. rm –rf rm –rf是删除文件夹和里面附带内容的一种最 ...

  3. 5 构建Mysql+heartbeat+DRBD+LVS集群应用系统系列之生产环境下drbd裂脑处理

    preface 公司的业务变更,导致服务器要搬迁,所以需要关闭服务器,然后到新地在开启服务器. 关机前确定drbd+heartbeat+mysql是正常使用的,没有异常,Heartbeat和drbd都 ...

  4. Protecting against XML Entity Expansion attacks

    https://blogs.msdn.microsoft.com/tomholl/2009/05/21/protecting-against-xml-entity-expansion-attacks/ ...

  5. tyvj1294 小v的舞会

    背景 "梦中伊人,断我男儿几寸柔肠,于断桥,不知西风自憔悴那姑娘."小v的梦中伊人要带领一大帮姐妹MM们来小v家举办舞会,然而怎么安排跳舞的顺序成了大问题,你能帮他么? 描述 有n ...

  6. Linux进程间通信（六）：共享内存 shmget()、shmat()、shmdt()、shmctl()

    下面将讲解进程间通信的另一种方式,使用共享内存. 一.什么是共享内存 顾名思义,共享内存就是允许两个不相关的进程访问同一个逻辑内存.共享内存是在两个正在运行的进程之间共享和传递数据的一种非常有效的方式 ...

  7. Go - 项目收藏

    谷歌官方维护了一个基于go语言的开源项目列表: https://github.com/golang/go/wiki/Projects Web框架 web.go.beego Go项目 httpmq:A ...

  8. linux mingling

    grep 文本搜索工具 -i 忽略大小写 -v 不显示匹配行 -c 显示符合条件的行数值 文本搜索支持正则表达式 1 2 3 cat /etc/passwd | grep root // 显示包含ro ...

  9. DirectAccess

    DirectAccess Direct Access 称为直接访问,它是Windows 7(企业版或者更高级版本)和Windows Server 2008 R2中的一项新功能.凭借这个功能,外网的用户 ...

  10. 转:mysql根据经纬度查找排序

    一.MySql不使用空间函数,简单版 1.粗算,根据场景得到一个range,计算经纬度,得到的是一个矩形区域(A),不精确,但是已经有范围这个雏形了,最容易实现的方式之一. 1 2 3 4 5 6 w ...