AngularJS:路由

路由器和交换器的区别:路由器范围内的所有人都能收到通知,交换器针对某个人收到通知

1.router路由

描述:router路由是angularJS中提出的,用于构建单页面应用的模块。
其本质是从a标签点击跳转功能延展而来的。
说明:
(1)router功能的实现需要依赖于angularJS的扩展库文件angular-route.min.js
(2)router功能的实现需要依赖于ng-view指令
ng-view指令的作用是提供标注【显示不同页面的容器】的作用
(3)router功能的实现需要依赖于a标签的href属性 href=’#要加载的页面代号’
此属性设置目的,是在a标签点击的时候能够通知路由,要加载哪一个页面
(4)router路由的具体语法是通过app页面数据模型创建的, 通过config方法来构建一个路由
在路由中,通过.when()来判定加载哪一个页面
在路由中,通过.otherwise()来决定路由默认加载哪一个页面
语法:

app模型.config(['$routeProvider', function ($routeProvider){
		$routeProvider
			.when('/页面代号',{
				templateUrl:'要加载的页面的url地址(以路由所在的位置为起点)',
				controller:'对应页面的控制器名称'
						})
			...多个when...
			.otherwise({
				redirectTo:'/默认加载页面的代号'
						});
		 		}]);

注意:
(1)如果需要使用路由功能,那么在创建页面数据模型app的时候,必须要注入一条名为ngRoute的信息,此注入信息相当于对当前页面声明:我要使用路由功能】
语法:var app = angular.module('app', ['ngRoute']);
(2)在承载不同页面的容器上记得不要忘记加ng-view,否则路由选中的页面无法加载。
举例;

<div style="" ng-view></div>
//此div会自动创建一个class=“ng-scope” ,所以如果创建新的类名会覆盖路由
//因而一般使用id

2.router路由文件的写法

css文件:apps文件(自己写的)+libs文件(引用的文件)
js文件:apps文件(自己写的:app.js+route.js+controllers文件:不同页面的控制器)+libs文件(引用的文件:angular-route.min.js+angular.js)
res文件:audio文件+img文件+video文件
view文件:index.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值