angular路由配置用法

 

　　在如今，很多事用于HTML5嵌套在webview，成为（伪）app，用a链接来跳转，简单页面来说的话，速度还是可以的，但是应用越来越多，是用不流畅，当然原生的app像安卓以及IOS来说的话，跳转是非常流畅的，所以这里引入路由这个知识点。

　　应用越来越多，切换起来没有那么流畅。碍于网速，加载起来更家的慢。

　　在angular里面，我们可以应用路由进行单页面切换，因为在angular里面，我们用户一般在加载这样的应用是，会整个的缓存在手机上。使用路由进行切换时，不用在发起HTTP请求，从而提高加载速度，用户体验也比较好。

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

　　路由的结构：

　　　　

<script>
        angular.module('app',[])
            .config('$routeProvider',function  ($routeProvider) {
                $routeProvider
                    .when('/',{
                        templateUrl:'view/home.html',
                        controller:'homeCtrl'
                        }
                        )
                    .when('/',{
                        templateUrl:'view/home.html',
                        controller:'homeCtrl'
                        }
                        )
                    .when('/',{
                        templateUrl:'view/home.html',
                        controller:'homeCtrl'
                        }
                        )
                    .ontherwise({
                        redirective:'/'
                    })
            })
    </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();