路由
路由使用
// 1.创建模块
var app = angular.module('myApp', ['ngRoute'])
// 2.配置路由规则(约定什么样的锚点值，对应什么样的内容)
// 第一个参数与controller第二个参数类似
app.config(['$routeProvider',function($routeProvider){
// 第一个参数：对应的url中锚点值
// 当angular检测到url中锚点变为/ali里，
//就会把template对应的内容插入到页面拥有ng-view指令的标签中
$routeProvider.when('/ali',{
template:'<div>阿里在二楼!</div>',
// 指定一个控制器的名字,
// 当前url中锚点值为/ali时就会执行控制器中的回调函数
// 我们可以直接在template/templateUrl对应的模板中使用该
//控制器中对应的$scope属性值
controller:'demoController'
//templateUrl
})
.when('/baidu',{
template:'<div>百度在1楼</div>'
})
}])
路由完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>route</title>
</head>
<body ng-app="myApp">
<div ng-view>
</div>
<script src="libs/angular.js"></script>
<script src="libs/angular-route.js"></script>
<script>
// 1.创建模块
var app = angular.module('myApp', ['ngRoute'])
// 2.配置路由规则(约定什么样的锚点值，对应什么样的内容)
// 第一个参数与controller第二个参数类似
app.config(['$routeProvider',function($routeProvider){
// 第一个参数：对应的url中锚点值
// 当angular检测到url中锚点变为/ali里，就会把template对应的
//内容插入到页面拥有ng-view指令的标签中
$routeProvider.when('/ali',{
template:'<div>{{msg}}</div>',
// 指定一个控制器的名字,
// 当前url中锚点值为/ali时就会执行控制器中的回调函数
// 我们可以直接在template/templateUrl对应的模板中使用
//该控制器中对应的$scope属性值
controller:'demoController'
//templateUrl
})
.when('/baidu',{
template:'<div>百度在1楼</div>',
// controller:''
})
}])
app.controller('demoController',['$scope',function($scope){
$scope.msg = "我是中国人，我爱自己的祖国!"
}])
</script>
</body>
</html>
路由参数
- 在原有规则中可以加冒号:,
- 表示:号后的内容是可以变的(但是必须要有)
- 在控制器中可以通过$routeParams得到myname对应的值
$routeProvider.when('/company/:myname？')
// <body ng-app="myApp">
<div ng-view>
</div>
<script src="libs/angular.js"></script>
<script src="libs/angular-route.js"></script>
<script>
// 1.创建模块
var app = angular.module('myApp', ['ngRoute'])
// 2.配置路由规则(约定什么样的锚点值，对应什么样的内容)
// 第一个参数与controller第二个参数类似
app.config(['$routeProvider',function($routeProvider){
// 第一个参数：对应的url中锚点值
// 当angular检测到url中锚点变为/ali里，
//就会把template对应的内容插入到页面拥有ng-view指令的标签中
// 在规则中以：号开始,后面跟上一个名字
//(就相当于变量名，表明当前位置可以写成任意的值)
// ?号表示当前位置如果没有值，也可以匹配到
$routeProvider.when('/company/:myname?',{
template:'<div>{{msg}}</div>',
// 指定一个控制器的名字,
// 当前url中锚点值为/ali时就会执行控制器中的回调函数
// 我们可以直接在template/templateUrl对应的模板中
//使用该控制器中对应的$scope属性值
controller:'demoController'
//templateUrl
})
.when('/xxx',{
template:'<div>唂</div>'
})
// 当以上规则都不匹配时，匹配otherwise里的规则
.otherwise({
// 这里相应于把页面锚点值改为/company/ali
redirectTo:'/company/ali'
})
}])
app.controller('demoController',[
'$scope',
'$routeParams'
,function($scope,$routeParams){
console.log($routeParams)
// $routeParams的属性包含了路由参数及值
// 假设有一组数据
$scope.data = {
baidu:'二楼',
ali:'三楼',
tx:'四楼'
}
$scope.msg = "你要找的公司在"+$scope.data[$routeParams.myname]
}])
</script>
otherwise
- 当不匹配when方法对应的规则时，就会匹配otherwise对应的规则
webapi
api
-
- console.log('小明') //小明
- I/O docuemnt.getGetElementById('')
豆瓣API
$http
http.get('./in_theaters/data.json')
.then(function(res){
// 成功的回调函数
// console.log(res.data)
$scope.data = res.data
})
网友评论