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