浪荡艳妇爆乳jufd汗だく肉感,久久人妻内射无码一区三区,久久婷婷色香五月综合缴缴情

快捷導(dǎo)航

angular.js 路由及頁面?zhèn)鲄⑹纠?/h1>

更新時(shí)間：2017年02月24日 15:11:29 作者：GOODDEEP

本篇文章主要介紹了angular.js 路由及頁面?zhèn)鲄⑹纠【幱X得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

頁面?zhèn)鲄?shù)方法：1、$rootScope。2、（url）/user/:name/:age。

頁面轉(zhuǎn)換方法：1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。2、$state.Go。3、$location.path。4、ui-sref

（1）自帶路由ngRoute

<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>AngularJS 路由實(shí)例</title> 
  </head> 
  <body ng-app='routingDemoApp' ng-controller="myCtrl"> 
    <h2>AngularJS 路由應(yīng)用</h2> 
       名: <input type="text" ng-model="names"><br> 
    <ul> 
      <li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁1</a></li> 
      <li><a href="#/second/2/3" rel="external nofollow" >second</a></li> 
      <li><a href="#/printers" rel="external nofollow" >打印機(jī)</a></li> 
      <li><a href="#/blabla" rel="external nofollow" >其他</a></li> 
    </ul> 
    <div ng-view></div> 
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> 
    <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> 
    var transform =function(data){return $.param(data);  }  
      var app=angular.module('routingDemoApp',['ngRoute']); 
      app.controller('myCtrl', function($scope,$http, $rootScope) { 
         $http({ 
          method:'POST', 
          url:"http://localhost:8090/angu_demo/test.chtm", 
          data:{"age":20 } 
         })  
        .success(function(data,header,config,status){ 
        //響應(yīng)成功 
          $scope.names = data[0].age; 
          $rootScope.name="rrrrrr"; 
 
        }).error(function(data,header,config,status){ 
        //處理響應(yīng)失敗 
        }); 
      }); 
      app.controller('AboutController', function($scope,$http,$rootScope,$routeParams) { 
         
         $scope.id = $routeParams.id; 
        $scope.age = $routeParams.age;  
        $scope.name=$rootScope.name; 
       
      }) 
      app.config(['$routeProvider', function($routeProvider){ 
        $routeProvider 
        .when('/',{template:'這是首頁頁面'}) 
        .when('/second/:id/:age', 
          {templateUrl: 'second.html', 
          controller: 'AboutController'} 
        ) 
        .when('/printers',{template:'這是打印機(jī)頁面'}) 
        .when('/second_2',{template:'這是second_2'}) 
        .otherwise({redirectTo:'/'}); 
      }]); 
       
      
    </script> 
    
    
  </body> 
</html>

(2)ui-router

<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>AngularJS 路由實(shí)例 </title> 
     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>  
 
    <script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script>  
   
  </head> 
  <body ng-app="routerApp" > 
  <div ng-controller="MainCtrl"> 
    <ul> 
      <li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁1</a></li> 
      <li><a href="#/second/" rel="external nofollow" >second</a></li> 
      <li><a href="#/third" rel="external nofollow" >third</a></li> 
    </ul> 
    <a href="#/fourth/42" rel="external nofollow" >href傳參數(shù)</a> 
    <a ui-sref="fifth({'name':123,'id':256})">ui-sref傳參數(shù)</a> 
    <button ng-click="ngclick_go()" class="btn btn-primary " >state.go傳參數(shù)</button> 
     <button ng-click="ngclick_location()" class="btn btn-primary " >location傳參數(shù)</button> 
     <div ui-view></div>  
     <div ui-view="second0"></div>  
    <div ui-view="second1"></div>  
    <div ui-view="second2"></div>  
</div> 
  <script type="text/javascript"> 
   /* var app = angular.module('routerApp', ['ui.router']); */ 
   var app=angular.module('routerApp',['ui.router']); 
   app.controller('MainCtrl', function($scope, $state,$location) { 
     $scope.ngclick_go = function() { 
       $state.go('sixth',{name: 42}); // 跳轉(zhuǎn)后的URL： #/camnpr/appManager 
      }; 
      $scope.ngclick_location = function() { 
        $location.path('/sixth/detail/42'); // 功能也是跳轉(zhuǎn)的 
      }; 
      
      
     
    }); 
    app.config(function($stateProvider, $urlRouterProvider) { 
      $urlRouterProvider.otherwise('/second');  //與原生的$routerProvider寫法不一樣的就是$urlRouterProvider先寫默認(rèn)路徑 
      $stateProvider   //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法 
        .state('second', { 
          url: '/second', 
           views: {'second0': { 
              templateUrl: 'second0.html' ,  //看到templateUrl:后面包含了很多的模板 
              controller: 'MainCtrl'  
            }, 
            'second1': { 
              templateUrl: 'second1.html', 
              controller: 'MainCtrl' 
               
            }, 
            'second2': { 
              templateUrl: 'second2.html', 
              controller: 'MainCtrl' 
            } 
          }  
        }) 
        .state('third', { 
          url: '/third', 
          templateUrl: 'third.html' ,   //看到templateUrl:后面包含了很多的模板 
          controller: 'MainCtrl'  
        }) 
         
         .state('fourth', { 
          url: '/fourth/:name', 
          templateUrl: 'forth.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            $scope.name=$stateParams.name; 
            alert(=$stateParams.name) 
          } 
 
        }) 
         .state('fifth', { 
          url: '/fifth/:name/:id', 
          templateUrl: 'fifth.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            alert($stateParams.name+"  "+$stateParams.id) 
          } 
 
        }) 
        .state('sixth', { 
          url: '/sixth/detail/:name', 
          templateUrl: 'sixth.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            alert($stateParams.name) 
          } 
 
        }) 
        /* .state('fourth', { 
          url: '/fourth/:name', 
          templateUrl: 'third1.html' ,    //看到templateUrl:后面包含了很多的模板 
          controller: function ($stateParams,$scope) { 
            $scope.name=$stateParams.name; 
          } 
 
        }) */ 
         
    }); 
  
   </script> 
    
  </body> 
</html>

下載地址：angu_demo_jb51.rar

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: