angularJS 路由 ng-route

angular中的ng-route主要由$routeProvider和ng-view实现，ng-view的实现原理，是根据路由的切换，动态编译html模板——$compile(html)(scope)。

前提：

首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular。如:

<script src="js/angular.min.js"></script>
<script src="module/rootModule.js"></script>

这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。

还需要在模块声明中注入对ng-route的依赖：

var app = angular.module('myApp',['ngRoute']);

路由实现:

路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。

一般主要通过两个方法：

when()：配置路径和参数;

otherwise：配置其他的路径跳转，可以想成default。

when的第二个参数：

controller：对应路径的控制器函数，或者名称

controllerAs：给控制器起个别名

template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"

templateUrl：对应模板的路径，比如"src/xxx.html"

resolve：这个参数着重说下，该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果。

详细的例子，可以参考下面的样例。

redirectTo：重定向地址

reloadOnSearch：设置是否在只有地址改变时，才加载对应的模板;search和params改变都不会加载模板

caseInsensitiveMatch：路径区分大小写

 

路由有几个常用的事件：

$routeChangeStart：这个事件会在路由跳转前触发

$routeChangeSuccess：这个事件在路由跳转成功后触发

$routeChangeError：这个事件在路由跳转失败后触发

使用：

在页面中，写入URL跳转的按钮链接以及ng-view

<div ng-controller="myCtrl">
        <ul>
            <li><a href="#/a">click a</a></li>
            <li><a href="#/b">click b</a></li>
        </ul>
        <ng-view></ng-view>
        <!-- <div ng-view ></div> -->
    </div>

ng-view可以作为标签出现，也可以作为元素出现。

js中定义路由：

//定义模块
var app = angular.module('myApp',['ngRoute']);

//定义路由 映射到控制器和模板
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        //.when（） 声明相关的路由
        //第一个参数，自定义的名称
        .when('/login',{
            //提供模板
            templateUrl:'resources/Home.html',
            //提供控制器
            controller:'loginCtrl'
        })
        .when('/register',{
            //提供模板
            templateUrl:'resources/About.html',
            //提供控制器
            controller:'loginCtrl'
        })
        .otherwise({
            redirectTo:'/index',
        });
}])

otherwise(params)方法对应路径匹配不到时的情况，这时候我们可以配置一个redirectTo参数，让它重定向到404页面或者是首页。