AngularJS 06（路由）

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}}