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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。