AngularJS基础总结（二） 之页面跳转Route

AngulagJs的页面使用Route跳转

设置页面不同于控制页面，登录页面不同于账号信息页面。。。。就是说一个应用很多功能不同的页面
我们可以使用Angular简单优雅地实现这个功能（页面之间的控制跳转…）
1.除了引用AngularJs.js外，还要引用路由JS,

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>／／AngularJs.js    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>／／路由JS

2.通过$routeProvider定义路由，示例

 angular.module('ngRouteExample', ['ngRoute'])            .controller('HomeController', function ($scope, $route) { $scope.$route = $route;})            .controller('AboutController', function ($scope, $route) { $scope.$route = $route;})            .config(function ($routeProvider) {                $routeProvider.                when('/home', {//'/home'定义的路由路径，以后通过此路径访问，通常定义为短路径                    templateUrl: 'embedded.home.html',//id 为"embedded.home.html"的代码块                    controller: 'HomeController'//路由跳转的controller,后面必须定义此控制器                }).                when('/about', {//'/about'定义的路由路径，以后通过此路径访问，通常定义为短路径                    templateUrl: 'embedded.about.html',id 为"embedded.about.html"的代码块                    controller: 'AboutController'//路由跳转的controller,后面必须定义此控制器                }).                ／／otherwise()定义了当应用找不到指定路由的时候跳转的路由                otherwise({                    redirectTo: '/home'//'/about'定义的路由路径，以后通过此路径访问，通常定义为短路径                });            });

在html代码中使用href=”#path”来进行跳转

<div>    <div id="navigation">        <a href="#/home"><!--通过heft="#path"方式进行跳转-->            home／／跳转名        </a>        <a href="#/about"><!--通过heft="#path"方式进行跳转-->            about／／跳转名        </a>    </div>    <div ng-view="">    </div></div>

跳转界面内容：

<script type="text/ng-template" id="embedded.home.html">／／#是路由实际访问的路径，可以是asp.net mvc的访问路径（如此例），也可是具体的页面路径，如“test/test.html"    <div class="banner">        <ul class="img">            <li><a href="#"><img src="images/1.jpg"></a></li>            <li><a href="#"><img src="images/2.jpg"></a></li>            <li><a href="#"><img src="images/3.jpg"></a></li>            <li><a href="#"><img src="images/4.jpg"></a></li>        </ul>        <ul class="num">        </ul>        <div class="btn btn_l">&lt;</div>        <div class="btn btn_r">&gt;</div>    </div></script><script type="text/ng-template" id="embedded.about.html">    <canvas id="can" width="1000" height="1000">        您好    </canvas>    <script type="text/javascript">        var canvas =document.getElementById('can');        var c =canvas.getContext('2d');        g=c.createRadialGradient(400,300,10,400,300,300);        g.addColorStop(0,"#000000");        g.addColorStop(0.8,"red");        g.addColorStop(1,"#FFFFFF");        c.fillStyle=g        c.arc(400,300,300,0,Math.PI*2);        c.fill()</script>