-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path48-路由.html
85 lines (80 loc) · 3.04 KB
/
48-路由.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>路由服务</title>
<style>
#header{width: 100%; height: 80px; background: greenyellow;}
#content{width: 100%; height: 600px; background: #eee;}
</style>
</head>
<body>
<div ng-controller="indexCtrl" id="parent" >
<div id="header">
<!--<a href="#index">首页</a>
<a href="#student">学员</a>
<a href="#course">课程</a>-->
<a href="" ng-click="$location.path('index')">首页</a>
<a href="" ng-click="$location.path('student')">学员</a>
<a href="" ng-click="$location.path('course')">课程</a>
<a href="" ng-click="$location.path('test/1')">传参测试1</a>
<a href="" ng-click="$location.path('test/2')">传参测试2</a>
</div>
<div id="content" ng-view></div><!--ng-view作用：显示路由的页面的信息-->
</div>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js" ></script>
<script>
/*
1.引入路由插件
2.在主页里引入 ng-view ，用来显示各个页面的内容
3.将路由服务进行依赖注入
4.对路由信息进行配置(when 对页面的路由进行配置,template 对页面内容的配置,controller定义控制器)
5.如果页面内容比较多，我们使用templateUrl 链接一个显示页面
6.可以进行重定向 ，一般重定向到主页或登录页注册页 otherwise redirectTo
7.传参 $routeParams ，config的when 中进行配置使用 ：名称
* */
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/index',{
template:'<p>{{name}}--我是主页</p>',//定义模板
controller:'indexCtrl'//定义控制器
})
.when('/student',{
template:'<p>{{name}}--我是学员页</p>',
controller:'studentCtrl'
})
.when('/course',{
//template:'<p>{{name}}--我是课程页</p>',
templateUrl:'course.html',
controller:'courseCtrl'
})
.when('/test/:num',{//:num 页面的参数
//template:'<p>{{name}}--我是课程页</p>',
template:'<p>我是传参页，我的参数是：{{num}}</p>',
controller:'indexCtrl'
})
.otherwise({//可以进行重定向 ，一般重定向到主页或登录页注册页
//重定向的优势： 首先 ，首页自动显示了，其次，如果url地址出错 或者找不到会自动定位到首页
redirectTo:'/index'
});
}]);
//定义主页的控制器
m1.controller('indexCtrl',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
$scope.name = "test";
$scope.$location = $location;
console.log($routeParams);
$scope.num = $routeParams.num;
}]);
//定义主页的控制器
m1.controller('studentCtrl',['$scope',function($scope){
$scope.name = "李德华";
}]);
//定义主页的控制器
m1.controller('courseCtrl',['$scope',function($scope){
$scope.name = "angular课程";
}]);
</script>
</body>
</html>