zoukankan      html  css  js  c++  java
  • AngularJS第六课(路由)

    路由

    实例:
    
    <body ng-app="routeDemoApp">
    
            <h1>AngularJS的路由</h1>
            <ul>
                <li><a href="#/">index</a></li>
                <li><a href="#/firstPage">firstPage</a></li>
                <li><a href="#/secondPage">secondPage</a></li>
                <li><a href="#/footer">footer</a></li>
            </ul>
            <!--3.使用了ng-view,会使得该部分的内容随路由的转变而转变-->
            <div ng-view></div>
    
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <!--1.实现载入路由的js文件-->
        <script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
        //2.ngRoute作为依赖模块
        //4.routeProvider用来提供路由规则
        //5.congfig提供了配置路由的功能
        //6.when(path,object(路由设置对象))
            angular.module('routeDemoApp',['ngRoute']).config(['$routeProvider',function($routeProvider){
                    $routeProvider
                    .when('/',{template:"这是首页"})
                    .when('/firstPage',{template:"这是第一页"})
                    .when('/secondPage',{template:"这是第二页"})
                    .when('/footer',{template:"这是尾页"})
                }
            ]);
        </script>

    路由设置对象

    $routeProvider.when(url,{路由配置对象});
    路由配置对象:
    
    1. tamplate:在ng-view中插入简单的HTML内容

    2. .tamplateUrl:在ng-view中插入HTML模版(该模版会从tamplate指定的url的服务器上获取)

    3. controller:获取当前的controller
    4. controllerAs:为controller指定别名
    5. redirectTo:重定向地址
    6. resolve:指定controller依赖模块
  • 相关阅读:
    debug和release转载
    坐标系与基本图元(8)
    坐标系与基本图元(7)
    坐标系与基本图元(5)
    坐标系与基本图元(6)
    坐标系与基本图元(4)
    坐标系与基本图元(3)
    坐标系与基本图元(2)
    BZOJ 1090
    Xor
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305964.html
Copyright © 2011-2022 走看看