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

    });

  • 相关阅读:
    调试技术能够让新技术的学习事半功倍
    世界500强绩效考核(KPI) [11]
    .NET 4.0新功能介绍:In Process Side By Side
    What's New in the .NET Framework Version 4
    Production Debugging for .NET Framework Applications
    Project 2007下的自动计算问题
    SQL操作全集
    WPF1.1 理解Windows图形
    .NET Framework Version 4 Application Compatibility Walkthrough
    Fixing BizTalk ENTSSO Failure on Windows 7, Vista or Server 2008 after .NET 4.0 Installation
  • 原文地址:https://www.cnblogs.com/VARForrest/p/7840362.html
Copyright © 2011-2022 走看看