02-AngularJs-路由router

AngularJS中路由总结

概述

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

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

为什么需要前端路由？

1. ajax请求无法留下历史记录。
2. 用户无法直接通过url进入应用中的指定页面（无法保存书签、无法分享给好友）。
3. ajax对seo是个灾难（无法进行搜索引擎优化）。

前端路由的基本原理

1. 哈希
2. html5中新的history api
3. 路由的核心是给应用定义“状态”
4. 使用路由机制会影响到应用的整体编码方式（需要预先定义好状态）
5. 考虑兼容性与“优雅降级”

路由的主要功能

$routeProvider服务和ng-view实现
ng-view实现原理：根据路由的切换，动态编译html模板

路由的结构1

angular.module('myApp', ['ngRoute'])
/*配置函数*/
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .when('/day/:id', {
      templateUrl: 'views/day.html',
      controller: 'DayCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
})

config函数是一个配置函数，在使用$routeProvider这样的一个服务。
when：代表当你访问“/”根目录的时候，去访问templeteUrl中的那个模板
Controller：应用于根目录这个模板时的controller
otherwise：当路径访问错误，找不到，默认跳转到这个页面。

路由的结构2(ui-router)

angular.module('app',[ui.router])
/*配置函数*/
.config(function($interpolateProvider,$stateProvider,$urlRouterProvider)){
    $interpolateProvider.startSymbol('[:');
    $interpolateProvider.startSymbol(':]');    
    /*配置路由*/
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home',{
        url:'/home',
        templeteUrl:'home.tpl'
    })
    /*当访问“/”根目录的时候，去访问templeteUrl中的那个模板*/
    .state('login',{
        url:'/login',
        templeteUrl:'login.tpl'
    })  
}

路由在html中的使用

方式1：引入单个

<header><h1>Header</h1></header>
<div class="content">
    <div ng-view="home.tpl"></div>
</div>
<footer><h5>Footer</h5></footer

方式2：路由切换

<div class=page>
    <div ng-view="home.tpl"></div>
</div>
<div class="tab">
    <a ui-sref="home">首页</a>
    <a ui-sref="login">登录</a>
</div>

注：可如下方式在html页面中，创建templeteUrl模板

<script type="text/ng-template" id="login.tpl">
    <div ng-controller="LoginController"></div>
</script>

<div ng-view></div>这里面呢。就是我们注入的某个模板（template） 例如：<div ng-view="tpl/abc.html”></div> 就相当于注入叫做abc.html的模板。ng-view这个指令优先级是1000的终极指令。就是说权限很高。

　　在注入这个abc.html的模板的时候。我们一般都用了路由设置，路由相当于一个遥控器。这个ng-view就是一部电视机。如果某个模板同当前的路由相关联：
1 创建一个新的作用域；(用路由（遥控器）打开某个电视台)
2 移除上一个视图，同时上一个作用域也会被清除；（换台，什么都没了）
3 将新的作用域同当前模板关联在一起；（电视机播放新的电视台）
4 如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；
5 触发$viewContentLoaded事件；
6 如果提供了onload属性，调用该属性所指定的函数。

$location 服务

AngularJS提供了一个服务用以解析地址栏中的URL，并让你可以访问应用当前路径所对应的路由。它同样提供了修改路径和处理各种形式导航的能力。我们一般比较常用的：
1.path()
　path() 用来获取页面当前的路径：
　$location.path(); // 返回当前路径
　修改当前路径并跳转到应用中的另一个URL：
　$location.path('/'); // 把路径修改为 ‘/’ 路由
2.replace()
如果你希望跳转后用户不能点击后退按钮（对于登录之后的跳转这种发生在某个跳转之后的
再次跳转很有用）， AngularJS提供了replace() 方法来实现这个功能：

  $location.path('/home');

  $location.replace();

// 或者

  $location.path('/home').replace();