AngularJS简介

AngularJS分页组件实战

最新推荐文章于 2025-09-08 22:39:06 发布

转载最新推荐文章于 2025-09-08 22:39:06 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/MrW/blog/824880

文章标签：

#java #javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

简介

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>