长生界辰东小说,盗墓笔记第二季,完结小说排行榜

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

2019-11-19 17:25:12

字體：大中小

供稿：網(wǎng)友

頁面?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í)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：走進(jìn)javascript――不起眼的基礎(chǔ)，值和分號(hào)

下一篇：實(shí)例解析js中try、catch、finally的執(zhí)行規(guī)則