一、前端分层开发

1.1 前端代码分离

前端基础层

//定义模块  参数一：模块名称
 // 参数二：依赖的其他模块 注意：如果没有依赖其他模块，也需要制定空数组
 var app = angular.module("pinyougou", []);//上面截图中，第二个依赖的分页插件，其他一样。
 

前端服务层

//自定义服务层
 app.service("brandService", function ($http) {//查询所有品牌列表地this.findAll = function () {return $http.get("../brand/findAll.do");}//分页查询this.findPage = function (pageNum, pageSize) {return $http.get("../brand/findPage.do?pageNum=" + pageNum + "&pageSize=" + pageSize);}
 ........
 }    
 

前端控制层

定义父控制器(控制器继承)

app.controller("baseController",function ($scope) {....}
 

//定义控制器 基于模块定义控制器
 //参数一：控制器名称 参数二：控制器要做的事情
 //$scope 理解为全局的作用域对象  作用：用于js与html的数据交换桥梁
 app.controller("brandController",function ($scope,$controller, brandService) {//定义控制器继承  参数一：继承的父控制器名称 参数二：共享$scope变量资源$controller("baseController",({$scope : $scope}));//定义对象数组//json格式数组:[] json格式对象：{}$scope.findAll = function () {//success 请求成功后的回调函数brandService.findAll().success(function (response) {$scope.list = response;})}//请求后端，完成分页查询$scope.findPage = function (pageNum, pageSize) {brandService.findPage(pageNum, pageSize).success(function (response) {//赋值满足条件的总记录数$scope.paginationConf.totalItems = response.total;//当前页的结果$scope.list = response.rows;})}
 

修改页面

既然前端使用了MVC思想，则页面需要引入对应的资源。

如果不引用会报“xxx为定义”错误！