zoukankan      html  css  js  c++  java
  • AngularJS路由

     AngularJS路由允许我们通过不同的url访问不同的内容,AngularJS中是通过 #+标记。

       #符号之后的内容在线服务端请求的时候会被浏览器忽略。所以我们就需要在客户端实现#号后面内容的功能实现。AngularJS就是通过#+标记帮助我们欺负不同的逻辑页面并将不同的页面绑定到对应的控制器上。

        $routeprovider为我们提供了when(path,object)&otherwise(object)函数按照顺序定义了多元路由,函数包含两个参数:第一个参数是url或是是url正则表达式;第二个蚕食是路由配置对象。

     路由配置对象

      路由配置对象的语法规则如下:

    $routeProvider.when(url,{

    template:string,//如果我们只需要在ng-view中插入简单的HTML内容,就使用fail参数,如when('/computers',{templte:'this is computer page'})

    templateUrl:string,//如果在ng-view中插入的不是简单HTML标签,而是复杂的内容,就可以使用该参数在ng-view中插入一个HTML模板文件。如$routeProvider.when('/computers',{templateUrl:'views/computers.html'})

    contorller:string,function or array,//在当前模板山执行controller函数,生成新的scope。

    contorllerAs:string,//为controller指定别名

    redirectTo:string,function,//重新定向的地址

    resolve:object<object,function>//指定当前controller所依赖的其他模块。

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html charset=UTF-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script type="text/javascript">
    var app=angular.module("app",['ngRoute']);
    app.contoller("homeController",function($scope,$route){$scope.$route=$route;})
    app.controller("aboutCntroller",function($scope,$route){$scope.$route=$route;})
    app.cofig(function($routeProvider){
    $routeProvider.when('/home',{
        templateUrl:'embedded.home.html'',
        contorller:'HomeController'
    }).when('/about',{
        templateUrl:'embedded.about.html',
        controller:'AbourController'
    }).otherwise(redirectTo:'/home');
    });
    </script>
    </head>
    <body ng-app="app" class="ng-scope">
    <script type='text/ng-template' id="embedded.home.html">
    <h1>Home</h1>
    </script
    <script type='text/ng-template' id="embedded.about.html">
    <h1>About</h1>
    </script>
    <div>
    <div id="navigation">
    <a href="#/home"></a>
    <a href="#/about"></a>
    </div>
    <div ng-view=""></div>
    </div>
    </html>
    AngularJS路由实例

    });

  • 相关阅读:
    github提交忽略idea
    快速上手 Python 命令行模块 Click
    Clean Python第四章元类部分 4-15演示代码修正
    Python Type Hint类型注解
    docker运行python3.8
    python3 aes加解密代码(PCKS7,CBC模式,Base64结果)
    从源代码分析Universal-Image-Loader中的线程池
    从源代码分析Android-Universal-Image-Loader的缓存处理机制
    从源代码分析Android-Universal-Image-Loader图片下载技巧
    【译】UNIVERSAL IMAGE LOADER.PART 2---ImageLoaderConfiguration详解
  • 原文地址:https://www.cnblogs.com/VARForrest/p/7840362.html
Copyright © 2011-2022 走看看