AngularJS 简介
2017-01-14 本文已影响0人
但莫
简介
AngularJS 是什么
AngularJS 是一个结构框架用来时间动态web应用。他让你使用html作为模板预览，
并且可以扩展html的语法，简介而清晰的表达应用组件。
AngularJS 的数据绑定和依赖注入，相对其他书写方式，减少了大量代码。
并且AngularJS 是运行在浏览器中的，是他成为服务端技术理想的搭档。
动态应用程序和静态文档之间的不匹配经常被解决：
- 一个库 - 编写web应用有用的工具集，你的代码会在适合的时候调用库中的方法，如：jQuery
- 框架 - web应用的一个特殊实现，你的代码填充细节，框架掌控全局，在需要应用处理的时候主动调用你的代码，如：durandal,ember。
Angular选择了其他方式，它较少应用创建新的html元素和html文档之间的阻力。Angular教授浏览器一种新的语法叫做指令，如：
- 数据绑定，如{{}}
- dom结构控制，如复制，显示，绑定
- 支持表单和表单验证
- 为dom 元素附加新的行为，如DOM 事件绑定。
- 将HTML组合成可重用的组件。
基本概念
| Concept | Description |
|---|---|
| Template | 附加标记的HTML |
| Directives | 自定义属性和元素扩展HTML |
| Model | 用户在视图中显示的数据，以及用户交互的数据. |
| Scope | 模型存储的上下文，以便控制器、指令和表达式可以访问它. |
| Expressions | 从范围访问变量和函数 |
| Compiler | 解析模板实例化指令和表达式 |
| Filter | 格式化表达式的值以显示给用户. |
| View | 用户所看到的（DOM） |
| Data Binding | 在模型和视图之间同步数据 |
| Controller | 视图背后的业务逻辑 |
| Dependency Injection | Creates and wires objects and functions |
| Injector | 依赖注入容器 |
| Module | 一个应用程序，包括控制器、服务、滤波器的不同部分的容器，指令配置器 |
| Service | 与视图无关的可重用业务逻辑 |
教程
实例请参见参考资料中的【AngularJS 教程】，把这个教程从头到尾看一遍就对AngularJS 有了大致的了解，例子很详细，本文不再赘述。
实践
通用 service
服务替代对象是连接在一起的使用依赖注入（DI）。您可以使用服务在您的应用程序中组织和共享代码.。
服务的特点是：
- 延迟实例化 – 角只实例化一个服务申请时，部分取决于它。
- 单例 – 每个组件依赖于一个服务引用的服务厂产生的单实例。
下面我举一个项目中实际的例子。
实例1
通用分页组件，当我们开发项目的时候，分页功能可能是最常用的功能了。
我们分解分页所需要的功能如下：
- 显示分页信息
- 调用分页逻辑方法
- 分页查询逻辑实现
- 数据显示
显示分页信息和调用分页逻辑方法毋庸置疑是分页组件提供的
分页逻辑和数据显示需要根据具体的业务实现。
区分出逻辑关系，抽象分页插件就有了思路。
我的思路是分页插件要支持分页信息显示，并且可以出发具体业务的查询方法，还要及时的显示查询后的分页数据，保证分页显示的正确。我的实现如下：
/**
* 分页模块
*
* Usage:
* 导入本文件，并在初始化app时引用 ‘common.paging’ 模块
* eg.
* angular.module('material.module', ['common.paging'])
*
* 在需要分页的标签下应用标签
* eg.
* <paging-modal pageInfo="pageInfo" style="margin-right:0px;"></paging-modal>
*
* 在app初始化的时候创建分页信息对象，必须在 onChange 方法中添加查询方法。
* eg.
* $scope.pageInfo = {
* pageNum: 1, //current page number
* pageSize: 20, //per page show data
* maxShowPage: 10, //分页标签数量显示
* pages: 0,//total page numbers
* total: 0,//the total numbers of data
* //pageArray: [10],//size equals to maxShowPage
* // when user switch page, this module will call this method
* // it`s the main module`s duty to to detail search work.
* onChange: function (currentPageNum) {
* $scope.pageInfo.pageNum = currentPageNum
* //do something for seatch
* }
* };
*
*
*
*/
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
angular.module('common.paging', [])
.directive('pagingModal', [function () {
return {
restrict: 'EA', //E表示element, A表示attribute,C表示class，M表示commnent,即注释
scope: {
title: '@', //@读属性值，=双向绑定，&用户函数
conf: '='
},
replace: true,
//template: '<div>{{myVal}}</div>',
templateUrl: ctx + '/view/common/paging',
//controller: 'pagingInit',
link: function ($scope) {
//=====================================================================================
//init page info
$scope.pageInfo = $scope.$parent.pageInfo
//$scope.pageInfo.preArray = [];
//$scope.pageInfo.nextArray = [];
//=====================================================================================
// 变更当前页
$scope.toPage = function (pageNum) {
//$scope.pageInfo.pageNum=pageNum;
$scope.pageInfo.onChange(pageNum)
};
$scope.firstPage = function () {
//$scope.pageInfo.pageNum=1;
$scope.pageInfo.onChange(1)
};
$scope.endPage = function () {
//$scope.pageInfo.pageNum=$scope.pageInfo.pages;
$scope.pageInfo.onChange($scope.pageInfo.pages)
};
//scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 9;
}//DOM操作
};
}])
.service('pagingService', function () {
this.reloadPageInfo = function (oldPageInfo, newPageInfo) {
oldPageInfo.pageNum = newPageInfo.pageNum
oldPageInfo.total = newPageInfo.total
oldPageInfo.pages = newPageInfo.pages
//cal
var show = oldPageInfo.maxShowPage;
oldPageInfo.preArray = [];
oldPageInfo.nextArray = [];
for (var i = 0; i < 5; i++) {
if (oldPageInfo.pageNum - i - 1 == 0) {
break;
}
oldPageInfo.preArray[i] = oldPageInfo.pageNum - i - 1;
}
show--
for (var i = 0; i < show - oldPageInfo.preArray.length; i++) {
if (oldPageInfo.pageNum + i + 1 > oldPageInfo.pages) {
break
}
oldPageInfo.nextArray[i] = oldPageInfo.pageNum + i + 1;
}
//oldPageInfo.pageSize = newPageInfo.pageSize
};
this.cleanPageInfo = function () {
pageInfo.total=0
};
});
页面显示如下：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8" %>
<div class="page">
<div ng-show="pageInfo.total > 0">
<a href="javascript:;" ng-click="toPage(item)" ng-repeat="item in pageInfo.preArray|orderBy : order ">{{item}} </a>
{{pageInfo.pageNum}}
<a href="javascript:;" ng-click="toPage(item)" ng-repeat="item in pageInfo.nextArray">{{item}} </a>
,
共{{ pageInfo.pages }}页，
每页显示<strong style="color:#428BCA;">{{ pageInfo.pageSize }}</strong>条数据/
结果数<strong style="color:#428BCA;">{{ pageInfo.total }}</strong>
</div>
<div ng-show="pageInfo.total == 0">暂无数据</div>
</div>
