|
【郑州校区】品优购电商系统开发第 2 章 品牌管理 三
1.3.8 内置服务
我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http 来实现。注意：以下代码需要在 tomcat 中运行。
[AppleScript] 纯文本查看 复制代码 <html>
<head>
<title>入门小 Demo-8 内置服务</title>
<meta charset="utf-8" />
<script src="angular.min.js"></script>
<script>
var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
//定义控制器
app.controller('myController',function($scope,$http){
$scope.findAll=function(){
$http.get('data.json').success(
function(response){
$scope.list=response;
}
);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
建立文件 data.json
[AppleScript] 纯文本查看 复制代码 [
{"name":"张三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":67,"yuwen":86}
]
2.品牌列表的实现
2.1 需求分析
实现品牌列表的查询（不用分页和条件查询）效果如下：
2.2 前端代码
2.2.1 拷贝资源
将“资源/静态原型/运营商管理后台”下的页面资源拷贝到 pinyougou-manager-web 下
其中 plugins 文件夹中包括了 angularJS 、bootstrap、JQuery 等常用前端库，我们将在项目中用到
2.2.2 引入 JS
修改 brand.html ，引入 JS
2.2.4 编写 JS 代码
[AppleScript] 纯文本查看 复制代码 var app=angular.module('pinyougou', []);//定义模块
app.controller('brandController' ,function($scope,$http){
//读取列表数据绑定到表单中
$scope.findAll=function(){
$http.get('../brand/findAll.do').success(
function(response){
$scope.list=response;
}
);
}
});
2.2.5 循环显示表格数据
[AppleScript] 纯文本查看 复制代码 <tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal"
data-target="#editModal" >修改</button>
</td>
</tr>
</tbody>
2.2.6 初始化调用
[AppleScript] 纯文本查看 复制代码 <body
class="hold-transition skin-red sidebar-mini"
ng-app="pinyougou"
ng-controller="brandController" ng-init="findAll()">
| 
收藏
淘帖
踩
