angular.js中 路由 用法及概念

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

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

　　一般我们的路由结构是这样的。

　　

  1      <script>
  2          angular.module('app' ,[])
   3              . config (' $routeProvider ', function    ($routeProvider) {
   4                   $routeProvider
   5                      .when('/' ,{
   6                          templateUrl:'view/home.html' ,
   7                          controller:'homeCtrl'
  8                           }
   9                           )
  10                      . when ('/' ,{
  11                          templateUrl:'view/home.html' ,
  12                          controller:'homeCtrl'
 13                           }
  14                           )
  15                      .when('/' ,{
  16                          templateUrl:'view/home.html' ,
  17                          controller:'homeCtrl'
 18                           }
  19                           )
  20                       . ontherwise ({
  21                          redirective:'/'
 22                       })
  23               })
  24      </script>

上边代码中，

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

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

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

　　一般在我们的index.html会有这么的一段代码

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

　　<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();

。。。。。。后续

 

查看更多关于angular.js中 路由 用法及概念的详细内容...