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>