AngularJS学习(四)——路由angular-route.js

ng-route模块作为主应用模块的依赖模块——angular.module(“mainApp”,[“ngRoute”]);

ng-view指令为当前路由把对应的视图模板载入到布局模板中,以下面的三个链接为例,每一个链接都一个对应的视图和对应的控制器。点击上面任意一个链接,向服务器请求的地址都是一样的(http://baidu.com),这是因为“#!”后面的内容在向服务器请求时会被浏览器忽略掉。当切换url进行跳转是,ng-view所在在标签的内容就会由该路由对应的视图所填充。

 

通过不同的url访问不同的内容,实现多视图单页web应用

http://baidu.com/#!/first

http://baidu.com/#!/second

http://baidu.com/#!/third

(AngularJS1.6以前是用#标记的,在AngularJS1.6以后就由#!标记了)

 

AngularJS路由功能是有$routeProvider服务和ng-view搭配实现,ng-view相当于提供了页面模板的挂载点,当切换url进行跳转时,不同的页面模板会在拥有ng-view指令的标签的位置,然后通过$routeProvider配置的路由映射。

<div ng-app=”myapp”>
       <ul>
              <li><a  href=”#!/”>首页</a></li>
              <li><a  href=”#!/computer”>电脑</a></li>
              <li><a  href=”#!/printers”>打印机</a></li>
       </ul>
       <div ng-view></div>
</div>
//定义主模块,并进行依赖注入
angular.module("myapp",['ngRoute']);
//定义路由
angular.module("myapp").config(["$routeProvider",function($routeProvider){
       $routeProvider.when('/',{
              template:'首页'
       }).when('/computer',{
              template:'这个电脑介绍页'
       }).when('/printers',{
              template:'这是打印机介绍页',
       }). otherwise({
              redirectTo: '/ '//相当于default,默认显示
       });
}]);

 

when函数有两个参数,第一个参数#!后面的字符串,第二个参数是路由配置对象

配置对象参数:

template:

templateUrl:

controller:

controllerUrl:

redirectTo:字符串或function——重定向地址

resolve:object<key,function>当前controller所依赖的其他模块

 

when函数的第一个参数可带参数:

$routeProvider.when('/:params1/params2',{
              template:'首页'
       }).otherwise({
              redirectTo: '/ '//相当于default,默认显示
       });

路由中的$routeParams可以在控制器中拿到这个参数

.controller(“”controllerName”,function($scope,$routeParams){
       $routeParams.params1
       $routeParams.params2
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值