首页 > 其他 > 详细

Angular路由(三)

时间:2017-06-26 21:58:47      阅读:339      评论:0      收藏:0      [点我收藏+]

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"
})
}])

 

Angular路由(三)

原文:http://www.cnblogs.com/weiyz/p/7078033.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!