AngularJS的ngroute 路由传参
程序员文章站
2024-02-14 16:05:28
...
转自:出处
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div class="header">
<a href="#div1">第一个div</a>
<a href="#div2">第二个div</a>
<a href="#div3">第三个div</a>
<a href="#content/13">点击去内容</a>
</div>
<div ng-view></div>
</div>
</body>
</html>var app = angular.module("myApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/div1', {
template: '<p>这是div1{{text}}</p>',
controller: 'div1Controller'
})
.when('/div2', {
template: '<p>这是div2{{text}}</p>',
controller: 'div2Controller'
})
.when('/div3', {
template: '<p>这是div3{{text}}</p>',
controller: 'div3Controller'
})
.when('/content/:id', {
template: '<p>这是content{{id}}</p>',
controller: 'div4Controller'
})
.otherwise({
redirectTo: '/div1'
});
}]);
app.controller('div1Controller', function ($scope) {
$scope.text = 'phonegap中文网div1Controller';
})
app.controller('div2Controller', function ($scope) {
$scope.text = 'phonegap中文网div2Controller';
})
app.controller('div3Controller', function ($scope) {
$scope.text = 'phonegap中文网div3Controller';
})
app.controller('div4Controller', function ($scope, $routeParams, $location) {
if ($routeParams.id==0) {
$location.path('/div1');//进行页面跳转
}
console.log($routeParams);
$scope.id = $routeParams.id;
$scope.text = 'phonegap中文网div3Controller';
})