angular.js 路由及页面传参示例
页面传参数方法:1、$rootScope。2、(url)/user/:name/:age。
页面转换方法:1、href="#/"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"。2、$state.Go。3、$location.path。4、ui-sref
(1)自带路由ngRoute
<html> <head> <metacharset="utf-8"> <title>AngularJS路由实例</title> </head> <bodyng-app='routingDemoApp'ng-controller="myCtrl"> <h2>AngularJS路由应用</h2> 名:<inputtype="text"ng-model="names"><br> <ul> <li><ahref="#/"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页1</a></li> <li><ahref="#/second/2/3"rel="externalnofollow">second</a></li> <li><ahref="#/printers"rel="externalnofollow">打印机</a></li> <li><ahref="#/blabla"rel="externalnofollow">其他</a></li> </ul> <divng-view></div> <scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <scriptsrc="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> vartransform=function(data){return$.param(data);} varapp=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){ //响应成功 $scope.names=data[0].age; $rootScope.name="rrrrrr"; }).error(function(data,header,config,status){ //处理响应失败 }); }); 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:'这是打印机页面'}) .when('/second_2',{template:'这是second_2'}) .otherwise({redirectTo:'/'}); }]); </script> </body> </html>
(2)ui-router
<html> <head> <metacharset="utf-8"> <title>AngularJS路由实例</title> <scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <scriptsrc="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script> </head> <bodyng-app="routerApp"> <divng-controller="MainCtrl"> <ul> <li><ahref="#/"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">首页1</a></li> <li><ahref="#/second/"rel="externalnofollow">second</a></li> <li><ahref="#/third"rel="externalnofollow">third</a></li> </ul> <ahref="#/fourth/42"rel="externalnofollow">href传参数</a> <aui-sref="fifth({'name':123,'id':256})">ui-sref传参数</a> <buttonng-click="ngclick_go()"class="btnbtn-primary">state.go传参数</button> <buttonng-click="ngclick_location()"class="btnbtn-primary">location传参数</button> <divui-view></div> <divui-view="second0"></div> <divui-view="second1"></div> <divui-view="second2"></div> </div> <scripttype="text/javascript"> /*varapp=angular.module('routerApp',['ui.router']);*/ varapp=angular.module('routerApp',['ui.router']); app.controller('MainCtrl',function($scope,$state,$location){ $scope.ngclick_go=function(){ $state.go('sixth',{name:42});//跳转后的URL:#/camnpr/appManager }; $scope.ngclick_location=function(){ $location.path('/sixth/detail/42');//功能也是跳转的 }; }); app.config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise('/second');//与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径 $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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。