Java Web应用开发项目教程（第3版） 教案 拓展实践2-estoreSSM开发文档 Angularjs+SSM+ json

Angularjs+SSM+json1目标用angularjs+SSM+json查询展示所有商品，和之前的差别：1、没有jsp页面，只有html页面，因此页面中不会再有任何Java代码或者jstl代码，只有前端代码。2、页面加载时主动从向控制器要数据，控制器和页面之间只传递json数据3、页面拿到json数据后，由angularjs框架将数据展示到页面中，数据嵌入页面的过程完全在客户端浏览器完成。2服务端环境和配置下面过程只详细介绍和老版本SSM网站不同的地方，未介绍的配置，表示和老版本没有差别。2.1添加jackson包为工程添加三个jacksonjar包，如下：1、启动annotation-driven，这是一个主要差别！2.21、启动annotation-driven，这是一个主要差别！3、视图前缀以实际为准，后缀改为.html2、3、视图前缀以实际为准，后缀改为.html2、控制层组件扫描，包名以实际为准3控制器代码4、向map中放两对数据<“total”,查出的商品数量><“products“，商品列表>这个map对象将会以json数组的形式传到浏览器3、4、向map中放两对数据<“total”,查出的商品数量><“products“，商品列表>这个map对象将会以json数组的形式传到浏览器3、调用service层，查询所有商品，返回商品列表。Dao和service层缺的方法，自行补充2、加responsebody注解，方法直接返回对象----主要差别！1、和之前的没有差别，只是现在依据配置会跳转到index.html4客户端环境配置在js文件夹中添加angular.min.js。5index.html页面创建一个index.html文档，下面的js代码写在index.html文档中body的最后，因为流程的原因，先解释下面的js。Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带。Scope是一个对象，有可用的方法和属性。当在控制器中为

$scope

对象添加属性和方法时，视图(HTML)可以获取了这些属性Scope(作用域)是应用在HTML(视图)和JavaScript(控制器)之间的纽带。Scope是一个对象，有可用的方法和属性。当在控制器中为

$scope

对象添加属性和方法时，视图(HTML)可以获取了这些属性和方法。2、如果成功，将商品总条数赋值给scope对象的total属性，将商品列表赋值给scope对象的productList属性。1、页面画完后，执行js代码，请求selectAllProducts.do,拿回商品数据控制器使用下面两句，向map中存入数据：map.put("total",pruductList.size());map.put("products",pruductList);这个map传到浏览器是什么样子？response.data又是什么？在浏览器调试下可以清楚看到，response.data.total就是存入的商品总数。展开products可以看到，它就是一个对象数组，数组的每个元素都是一个商品对象。下面两句话，将商品条目存储到作用域的total属性中，将所有商品组成的对象数组存储到作用域的productList属性中。这两个属性可以直接绑定到html中并展示。$scope.total=response.data.total;//总条数 $ductList=ducts;//所有商品下面来看index.html的页面部分，页面只有一个简单的表格，对$ductList进行循环，每个商品对象画一行。这个过程有点像JSTL，但是JSTL是JSP标签库，是在服务端执行的，而下面的代码都是在客户端浏览器执行的。1、引入jquery和angularjs，路径以实际为准1、引入jquery和angularjs，路径以实际为准3、ng-repeat指令表示循环，对productList进行循环，每次循环画一行,productList就是$scope.productList，视图里直接写属性名就可以2、为body添加ng-app指令，和ng-controller指令6、scope的total属性值，在视图里，不用写$scope4、AngularJS表达式写在双大括号内：{{expression}}。{{p.picture}}，picture是商品对象的属性名，和实体类中的属性名一致。3、ng-repeat指令表示循环，对productList进行循环，每次循环画一行,productList就是$scope.productList，视图里直接写属性名就可以2、为body添加ng-app指令，和ng-controller指令6、scope的total属性值，在视图里，不用写$scope4、AngularJS表达式写在双大括号内：{{expression}}。{{p.picture