angularjs路由

路由的概念：

平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当我们用一般的html页面做移动端，简单时候我们可以用这样的标签去链接页面时，速度还是可以的。

　　但是当我们的应用越来越多时，切换起来没那么流畅。又是碍于网速，页面加载进来有点慢。但是在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。

ajax没返回回退的箭头

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

、

每个 URL 都有对应的视图和控制器。

代码：
config函数是一个配置函数。在使用

$routeProvider这样的一个服务。

when：代表当你访问这个“/”根目录的时候 去访问 templateUrl中的那个模板。
controller可想已知，就是我们配套的controller，就是应用于根目录的这个 模板时的controller。

ontherwise 就是当你路径访问错误时，找不到。最后跳到这个默认的 页面。　

路由的使用方式：

代码：

Document

路由demo

• 首页
• 首页2
• 首页3

<script src="angular.min.js"></script>
<script src="angular-route.js"></script>

var app=angular.module('app',['ngRoute']); app.config( [' $routeProvider', function($routeProvider){ $routeProvider .when('/page1',{ templateUrl:'page1.html', controller:'page1' }) .when('/page2',{ templateUrl:'page2.html', controller:'page2' }) .when('/page3',{ templateUrl:'page3.html', controller:'page3' }) .otherwise({redirectTo:'/page1'}); }] )

练习：自己新建一个页面

angular路由
路由 (route) ，几乎所有的 MVC(VM) 框架都应该具有的特性，因为它是前端构建单页面应用 (SPA) 必不可少的组成部分。
那么，对于 angular 而言，它自然也有 内置 的路由模块：叫做 ngRoute 。
不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！
于是，一个基于 ngRoute 开发的 第三方路由模块 ，叫做 ui.router ，受到了大家的“追捧”。
ngRoute vs ui.router
首先，无论是使用哪种路由，作为框架额外的附加功能，它们都将以 模块依赖 的形式被引入，简而言之就是：在引入路由 源文件 之后，你的代码应该这样写(以 ui.router 为例)：
angular.module(“myApp”, [“ui.router”]); // myApp为自定义模块，依赖第三方路由模块ui.router

这样做的目的是： 在程序启动(bootstrap)的时候，加载依赖模块(如：ui.router)，将所有 挂载 在该模块的 服务(provider) ， 指令(directive) ， 过滤器(filter) 等都进行注册 ，那么在后面的程序中便可以调用了。
说到这里，就得看看 ngRoute模块 和 ui.router模块 各自都提供了哪些服务，哪些指令？
1. ngRoute
2. $routeProvider(服务提供者) ——— 对应于下面的urlRouterProvider和stateProvider 3.$route(服务) ——— 对应于下面的urlRouter和state
4. $routeParams(服务) ——— 对应于下面的stateParams 5. ng-view(指令) ——— 对应于下面的ui-view 6. ui.router 7.$urlRouterProvider(服务提供者) ——— 用来配置路由重定向
8. $urlRouter(服务) 9.$stateProvider(服务提供者) ——— 用来配置路由
10. $state(服务) ——— 用来显示当前路由状态信息，以及一些路由方法（如：跳转） 11.$stateParams(服务) ——— 用来存储路由匹配时的参数
12. ui-view(指令) ——— 路由模板渲染，对应的dom相关联
13. ui-sref(指令)