ROUTE:路由(地图–映射)
路由就是根据一个地址,帮助我们找到最终的处理页面。
域名:www.tarena.com.cn
会映射成一个IP地址192.168.10.5
路由器A–》路由器B–》路由器C
IPv4—>IPv6
定义路由:
占位符,整个页面只能有一个
使用路由
- 锚点链接
- 路由参数
定义路由的前期工作
1. 要额外追加一个脚本文件angular-route.js并且版本要在1.3.1或者1.2.5以上
2. 其次要在module里面把ngRoute注入到里面
var app=angular.module("myApp",['ngRoute']);
app.controller("testCtrl",testController);
ng-view
占位符:脚本来实现,在页面的不同位置显示当前替换的内容,一次只能填充指定的一个,并且页面中只能有一个ng-view,并且标有ng-view的div,他里面原本的内容失效,将有替换的的内容代替。
在单页面实现多个视图的单页面应用
只是简单的创建一个占位符
<div ng-view></div>
ng-template
提供类:(锚点路径)根据路径来找我们需要找哪个控制器找哪个模板
使用script标签创建脚本视图,页面中可以定义多个,script脚本里面的内容可以随便写,因为他只是一个占位符。
<div class="col-sm-6">
<script id="login.html" type="text/ng-template">
Login
</script>
</div>
<div class="col-sm-6">
<script id="about.html" type="text/ng-template">
About
</script>
</div>
$routeProvider
- 映射相应的HTML页面或者ng-template模板
- 添加控制器使用相同键的服务
module.js
//定义模块
var app=angular.module("myApp",['ngRoute']);
//定义路由映射(模板,控制器)
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/login",{
templateUrl:"login.html",
controller:"lgoinCtrl"
})
.when("/about",{
templateUrl:"about.html",
controller:"aboutCtrl"
})
.otherwise({
redirectTo:"/login"//重新跳回login
})
}])
//定义控制器
app.controller("testCtrl",testController);
index.html
<div class="row">
<div class="col-sm-6">
<a href="#login" class="btn btn-default btn-block">login</a>
</div>
<div class="col-sm-6">
<a href="#about" class="btn btn-success btn-block">about</a>
</div>
</div>
<div ng-view></div>
<div class="row">
<div class="col-sm-6">
<script id="login.html" type="text/ng-template">
<div class="form-group">
<label for="username">UserName</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="username">密码</label>
<input type="text" class="form-control" />
</div>
<p>
<button type="submit" class="btn btn-info btn-block">提交</button>
</p>
</script>
</div>
<div class="col-sm-6">
<script id="about.html" type="text/ng-template">
<div class="thumbnail">
<img class="img-responsive" alt="" src="img/HBuilder.png" />
<div class="caption">
<h4>About me</h4>
<p>这是图片的描述信息</p>
</div>
</div>
</script>
</div>
</div>
页面加载会根据锚点路径,找脚本ng-template,再根据对应的templateUrl寻找对应路径,显示对应的脚本模块,当页面中没有ng-template的时候,会寻找ng-view,在根据路由中对应的路径寻找相应的页面,并且对应的控制器,定义的变量可以在对应的区域使用。
路由参数
声明参数
<a href="#about?name=Tarena" class="btn btn-success btn-block">about</a>
接受参数
- $routeParams
- $routeParams.id
显示参数
{{id}}