Angular路由（三）

AngularJs ng-route路由详解

其实主要是$routeProvider搭配ng-view实现。

ng-view的实现原理，基本就是根据路由的切换，动态编译html模板。

前提

首先必须在页面引入angular.js和angular-route，注意在angular-route以前引入angular

<script type="text/javascript" src="js/angular.min.js" ></script>

<script type="text/javascript" src="js/angular-route.js" ></script>

 

讲解

route和ng-view要搭配使用。ng-view至关于提供了页面模板的挂载点，当切换URL进行跳转时，不一样的页面模板会放在ng-view所在的位置，而后须要routeProvider配置路由的映射。

通常经过两个方法：

when（）:配置路径和参数；

otherwise：配置其余的路径跳转，能够想成default。

说明一下when（）的第二个参数：{

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

template:对应路径的页面模板，会出如今ng-view处，好比“<div>###</div>”

templateUrl:对应模板的路径，好比“src/xxxx.html”

}

说明一下otherwise的参数:

redirectTo:重定向地址

具体代码以下：

控制器的代码:

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

app.controller("ctrl",function($scope){
})

})

路由的代码：

app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/aa",{ templateUrl:"view/aa.html", controller:"ctrl" }) .when("/bb",{ templateUrl:"view/bb.html" }) .otherwise({ redirectTo:"/aa" })}])