前端框架AngularJs-分层开发+注解依赖详解+继承

AngularJS著名的分层开发,今天教大家在开发中如何进行分层开发

1.初始状态

• 未分层前的项目初始文件目录结构

• 未分层的html script中的代码

<script>
// 举个栗子,现有公共属性 $scope.paginationconf , 和一个调用后台的 findAll方法 现在进行拆分
		var app = angular.module("myapp",['pagination']);

		app.controller("brandController",function ($scope,$http) {
			/*分页插件 pagination */
			$scope.paginationConf = {
				currentPage: 1,		// 当前页
				totalItems: 10,		// 总记录数
				itemsPerPage: 10,	// 每页显示的条数
				perPageOptions: [10, 20, 30, 40, 50], //可选项
				onChange: function(){
					$scope.reloadList();//重新加载
				}
			};

			/*查询所有品牌*/
			$scope.findAll = function () {
				$http.get("../brand/findAll").success(function (response) {
					$scope.list = response;
				})
			};
			
			/*查询*/
			$scope.search = function (pageNo,pageSize) {

				$http.post("../brand/search?pageNo="+pageNo+"&pageSize="+pageSize,$scope.searchEntity).success(function (response) {
					$scope.paginationConf.totalItems = response.total;
					$scope.list = response.rows;
				})
			}

		})
	</script>

2.分层开发

• 首先模板分两个,一个带分页查询参数,一个不带,这样做是因为有的页面不需要分页
• 创建 js/base.js ,不带分页参数

• 创建base_pagination.js ,带分页参数

• 创建brandController.js ,只负责与页面交互

• 创建brandService.js , 只负责与后台交互

• 分层后的目录结构

• 将 findAll search 方法进行拆分 ，添加内容至 brandService.js

• 将 findAll search 方法进行拆分, 添加内容至 brandController.js

3.继承

• 我们可以看到script中还有一些没有调用后台的公共属性,现在我们把这些公共属性抽取出来,放到父类controller中,其余的controller继承父类controller
• 在 js/controller 文件中创建父类 baseController.js

• 在 brandController 中继承baseController

4.引用

• 分层后再html中就可以删除 script 标签中的内容了,直接引用js文件即可
• 引用的顺序: base.js/base_pagination.js --> brandService.js ---> baseController ---> brandController.js
• 按照调用关系引入 ,这样不容易出错

---

AngularJs分层开发讲解完了! 熬最深的夜,喝最烈的酒