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. WIN10 CMD 启动虚拟WIFI

    1.以管理员身份运行命令提示符: 快捷键win+R→输入cmd→回车 2.启用并设定虚拟WiFi网卡: 运行命令:netsh wlan set hostednetwork mode=allow ssi ...

  2. Android开发笔记之《JNI常用知识汇总》

    参考资料: Android Studio中NDK开发 : http://www.tuicool.com/articles/NBjQnyAndroid Studio使用新的Gradle构建工具配置NDK ...

  3. php无刷新上传图片和文件

    核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...

  4. HBase中批量修改

    先随便写写..做个随笔记录 使用Rest连接操作Hbase.. 是微软提供的  Microsoft.Hbase.Client 类库.. 版本是0.4.1.0 一直知道   client.StoreCe ...

  5. ASP.NET 系统对象 Request（一）

    Request对象 用来获取客户端在请求一个页面或传送一个Form是提供的所有信息.它包括用户的HTTP变量.能够识别的浏览器.存储客户端的Cookie信息和请求地址等. Request对象是Syst ...

  6. 【转】4G内存下MySQL修改配置文件以优化效率（来自discuz）

    摘要:公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL 的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20万人次以上)的数据库. ...

  7. redis部署

    下载软件 [root@localhost /]# wget http://download.redis.io/releases/redis-2.8.9.tar.gz 解压.编译.安装 [root@lo ...

  8. html用户注册界面

    html用户注册界面   先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; ba ...

  9. Android四大组件知识整理

    1. Activity 1.1 什么是Activity? Activity是Context的子类,并可以处理与窗体用户的事件: 1.2 Activity的生命周期 不存在->`onCreate( ...

  10. mysql事务和锁InnoDB

    背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题.我在工作过程中,经常会有同事咨询这方面的问题.同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题.本文,准备 ...