简介

AngularJS 是什么

AngularJS 是一个结构框架用来时间动态web应用。他让你使用html作为模板预览，
并且可以扩展html的语法，简介而清晰的表达应用组件。
AngularJS 的数据绑定和依赖注入，相对其他书写方式，减少了大量代码。
并且AngularJS 是运行在浏览器中的，是他成为服务端技术理想的搭档。

动态应用程序和静态文档之间的不匹配经常被解决：

• 一个库 - 编写web应用有用的工具集，你的代码会在适合的时候调用库中的方法，如：jQuery
• 框架 - web应用的一个特殊实现，你的代码填充细节，框架掌控全局，在需要应用处理的时候主动调用你的代码，如：durandal,ember。

Angular选择了其他方式，它较少应用创建新的html元素和html文档之间的阻力。Angular教授浏览器一种新的语法叫做指令，如：

• 数据绑定，如{{}}
• dom结构控制，如复制，显示，绑定
• 支持表单和表单验证
• 为dom 元素附加新的行为，如DOM 事件绑定。
• 将HTML组合成可重用的组件。

基本概念

教程

实例请参见参考资料中的【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>

参考资料

• AngularJS 教程
• 官方开发者网站
• Angular中文社区