黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 2 章品牌管理三 [打印本页]

作者: 我是楠楠 时间: 2020-5-7 11:51
标题: 【郑州校区】品优购电商系统开发第 2 章品牌管理三

【郑州校区】品优购电商系统开发第 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()">

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2