簡介

AngularJS 是什么

AngularJS 是一個結(jié)構(gòu)框架用來時間動態(tài)web應(yīng)用。他讓你使用html作為模板預(yù)覽售葡，
并且可以擴展html的語法，簡介而清晰的表達應(yīng)用組件。
AngularJS 的數(shù)據(jù)綁定和依賴注入谆构，相對其他書寫方式虾攻，減少了大量代碼铡买。
并且AngularJS 是運行在瀏覽器中的，是他成為服務(wù)端技術(shù)理想的搭檔霎箍。

動態(tài)應(yīng)用程序和靜態(tài)文檔之間的不匹配經(jīng)常被解決：

• 一個庫 - 編寫web應(yīng)用有用的工具集奇钞，你的代碼會在適合的時候調(diào)用庫中的方法，如：jQuery
• 框架 - web應(yīng)用的一個特殊實現(xiàn)漂坏，你的代碼填充細節(jié)景埃，框架掌控全局，在需要應(yīng)用處理的時候主動調(diào)用你的代碼顶别，如：durandal,ember谷徙。

Angular選擇了其他方式，它較少應(yīng)用創(chuàng)建新的html元素和html文檔之間的阻力驯绎。Angular教授瀏覽器一種新的語法叫做指令完慧，如：

• 數(shù)據(jù)綁定，如{{}}
• dom結(jié)構(gòu)控制剩失，如復制屈尼，顯示，綁定
• 支持表單和表單驗證
• 為dom 元素附加新的行為拴孤，如DOM 事件綁定脾歧。
• 將HTML組合成可重用的組件。

基本概念

教程

實例請參見參考資料中的【AngularJS 教程】囤热，把這個教程從頭到尾看一遍就對AngularJS 有了大致的了解猎提，例子很詳細，本文不再贅述旁蔼。

實踐

通用 service

服務(wù)替代對象是連接在一起的使用依賴注入（DI）锨苏。您可以使用服務(wù)在您的應(yīng)用程序中組織和共享代碼.。

服務(wù)的特點是：

• 延遲實例化 – 角只實例化一個服務(wù)申請時棺聊，部分取決于它伞租。
• 單例 – 每個組件依賴于一個服務(wù)引用的服務(wù)廠產(chǎn)生的單實例。

下面我舉一個項目中實際的例子限佩。

實例1

通用分頁組件葵诈，當我們開發(fā)項目的時候，分頁功能可能是最常用的功能了祟同。
我們分解分頁所需要的功能如下：

• 顯示分頁信息
• 調(diào)用分頁邏輯方法
• 分頁查詢邏輯實現(xiàn)
• 數(shù)據(jù)顯示

顯示分頁信息和調(diào)用分頁邏輯方法毋庸置疑是分頁組件提供的
分頁邏輯和數(shù)據(jù)顯示需要根據(jù)具體的業(yè)務(wù)實現(xiàn)作喘。

區(qū)分出邏輯關(guān)系，抽象分頁插件就有了思路晕城。
我的思路是分頁插件要支持分頁信息顯示泞坦，并且可以出發(fā)具體業(yè)務(wù)的查詢方法，還要及時的顯示查詢后的分頁數(shù)據(jù)砖顷，保證分頁顯示的正確贰锁。我的實現(xiàn)如下：

/**
 * 分頁模塊
 *
 * Usage:
 * 導入本文件，并在初始化app時引用 ‘common.paging’ 模塊
 * eg.
 * angular.module('material.module', ['common.paging'])
 *
 * 在需要分頁的標簽下應(yīng)用標簽
 * eg.
 * <paging-modal pageInfo="pageInfo"  style="margin-right:0px;"></paging-modal>
 *
 * 在app初始化的時候創(chuàng)建分頁信息對象滤蝠，必須在 onChange 方法中添加查詢方法豌熄。
 * eg.
 * $scope.pageInfo = {
 *    pageNum: 1, //current page number
 *    pageSize: 20, //per page show data
 *    maxShowPage: 10, //分頁標簽數(shù)量顯示
 *    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: '@', //@讀屬性值物咳，=雙向綁定锣险，&用戶函數(shù)
                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>條數(shù)據(jù)/
        結(jié)果數(shù)<strong style="color:#428BCA;">{{ pageInfo.total }}</strong>
    </div>

    <div ng-show="pageInfo.total == 0">暫無數(shù)據(jù)</div>
</div>

參考資料

• AngularJS 教程
• 官方開發(fā)者網(wǎng)站
• Angular中文社區(qū)