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路由实例

    });

  • 相关阅读:
    PL/SQL详细介绍
    Linux服务器性能评估(转)
    oracle命令(转)
    Makefile介绍(转)
    delphi 指针
    浏览器的工作原理(转)
    高性能分布式计算与存储系统设计概要(上)(转)
    HTTP协议详解(转)
    MySQL性能优化(转)
    redhat 6.2安装telnet服务
  • 原文地址:https://www.cnblogs.com/VARForrest/p/7840362.html
Copyright © 2011-2022 走看看