37分布式电商项目 - 网站首页（广告展示）

实现轮播广告图根据后台设置的广告列表动态产生

1.工程搭建

创建 war 模块 pinyougou-portal-web ，此工程为网站前台的入口，参照其它 war 模块编写配置文件。

2.前端代码

1.拷贝资源：资源文件夹中 “前台页面”目录下的 index.html 以及相关目录拷贝到pinyougou-portal-web

2.添加 angularJS 库

3.在 js 文件夹创建 base.js 和 base_pagination.js，创建 service 和 controller 文件夹

4.服务层 在 pinyougou-portal-web 工程创建 contentService.js

app.service("contentService",function($http){
//根据分类 ID 查询广告列表
	this.findByCategoryId=function(categoryId){
	return $http.get("content/findByCategoryId.do?categoryId="+categoryId);
	}
});

5.控制层 在 pinyougou-portal-web 创建 contentController.js

//广告控制层（运营商后台）
app.controller("contentController",function($scope,contentService){
	$scope.contentList=[];//广告集合
	$scope.findByCategoryId=function(categoryId){
		contentService.findByCategoryId(categoryId).success(
		function(response){
			$scope.contentList[categoryId]=response;
		}
		);
	}
});

6.页面 （1）修改 pinyougou-portal-web 工程的 index.html 引入 JS

在 body 上添加指令

（2）修改首页轮播图