您的位置：首页 > Web前端 > AngularJS

angular通过路由实现跳转 resource加载数据

2016-06-08 15:27 666 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>

</head>
<body>
<div ng-app="myApp">

<div class="header">

<a href="#/content/zhangsan">张三</a>
<a href="#/content/lisi">李四</a>
</div>
<div ng-view></div>

</div>
<script type="text/javascript">
var app = angular.module("myApp", ['ngRoute','ngResource']);

app.config(['$routeProvider',function($routeProvider){

$routeProvider
.when('/content/:name',{
template : '<p><span>姓名：{{data[0].name}}</span> <br><span>job：{{data[0].job}}</span></p>',
controller : 'nameController'
})
.otherwise({
redirectTo : '/content/zhangsan'
});

}]);

app.controller('nameController',['$scope','$routeParams','$resource',function($scope,$routeParams,$resource){
if($routeParams){
var obj=$resource($routeParams['name']+'.json',{},{});

$scope.data=obj.query();

console.log($scope.data);
//$scope.data=$routeParams['name'];
}

}]);

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航