使用angularjs1.x构建前台开发框架（十）——一个完整第三方组件的引用

绝地灬酷狼 2022-07-12 08:20 164阅读 0赞

前面三章介绍了如何在当前的开发框架下调用弹窗服务（或者说模态框服务），接下来在本章以另一个第三方组件的调用为例再进行一次系统的补充说明。

不废话，先看一下调用这个第三方组件实现的效果图：

![20170218180826092][]

如上图所见，这个第三方组件可以让我们动态放大图片的局部，在淘宝的店铺里经常可以看到类似的功能，用来帮助买家观察店铺出售的商品。

第三方组件的GitHub地址：[https://github.com/danialfarid/ng-file-upload][https_github.com_danialfarid_ng-file-upload]

接下来说明一下上面的效果是如何实现的：

首先解压从git下载的ng-file-upload-master.zip，把解压路径ng-file-upload-master\\ng-file-upload-master\\demo\\src\\main\\webapp\\js下的ng-img-crop.js和ng-img-crop.css两个文件复制到工程中，复制路径如下图：

![20170218221146019][]

**注：css目录是新增目录，另外，通常第三方组件的引用不会这么弱智，比如工程需要升级组件的时候这种手动复制的方式就傻逼了，常规的项目通常会有一个项目构建工程，由它来完成整个工程的构建（比如grunt）。**

接下来是在工程中引用第三方组件：

在index.html中声明对第三方组件样式的引用（即之前放在新增css目录下的第三方组件css）

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/ng-img-crop.css">
        <title>欢迎</title>
    </head>
    <body>
        <div id="menu" ng-controller="frameworkCtrl" ng-include="menus.url"></div>
        <div ui-view style="min-width: 1280px; max-width: 1440px; margin: 58px auto 0; border:1px solid #F00"
             ng-animate="{enter: 'fade-enter'}"></div>
        <script type="text/javascript" src="lib/require.js" data-main="main" charset="utf-8"></script>
    </body>
    </html>

变更部分内容如下：

![20170218222534678][]

在main.js中声明第三方组件的依赖关系（注：这里只是声明依赖关系，并不表示工程一定会使用）：

/**
     * Created by 李庆 on 2016/10/6.
     */
    var lan = "";
    var name = "lan=";
    var ca = document.cookie.split(";");
    for(var i=0;i<ca.length;i++){
        var c = ca[i];
        while(c.charAt(0) == " "){
            c = c.substring(1);
        }
        if(c.indexOf(name) != -1){
            lan = "../i18n/"+ c.substring(name.length, c.length)+"/language";
        }
    }
    if(lan === ""){
        lan = "../i18n/zh/language";
    }
    
    require.config({
        "baseUrl":"lib",
        "paths":{
            "angular":"angular",
            "jquery":"jquery-3.1.1",
            "angular-ui-router":"angular-ui-router",
            "language":lan
        },
        "shim":{
            "angular":{
                "deps":["jquery"],
                "exports":"angular"
            },
            "angular-ui-router":{
                "deps":["angular"]
            },
            "jquery":{
                "exports":"$"
            },
            "ui-bootstrap-tpls-0.11.0.min":{
                "deps":["angular"]
            },
            "ng-img-crop":{
                "deps":["angular"],
                "exports":"ngImgCrop"
            }
        }
    });
    
    require(["../framework/framework"],function(framework){
        var injector = angular.bootstrap($("html"),[framework.name]);
    });

变更部分内容如下：

![20170218223216576][]

作为一个angularjs的插件，依赖angularjs，是很合情也很合理的。

在framework.js（框架类）中声明对第三方组件的依赖：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["angular","angular-ui-router","../framework/config/frameworkConfig",
            "../framework/controller/frameworkCtrl","../framework/service/maskService",
            "ui-bootstrap-tpls-0.11.0.min","../framework/service/modalService","ng-img-crop"],
        function(angular,router,frameworkConfig,frameworkCtrl,maskService,uiBootstarp,modalService,ngImgCrop){
            var dependency = [
                "ng",
                "ui.router",
                frameworkConfig.name,
                "ui.bootstrap",
                "ngImgCrop"
            ];
            var framework = angular.module("framework",dependency);
            framework.controller("frameworkCtrl",frameworkCtrl);
            framework.service("maskService",maskService);
            framework.service("modalService",modalService);
            return framework;
        }
    );

变更部分内容如下：

![20170218223718474][]

然后我们就可以在业务模块中使用第三方组件了，看一下在业务模块中是如何实现这个效果的：

在c2.js中定义业务逻辑：

/**
     * Created by 李庆 on 2016/10/6.
     */
    define(["jquery","../../../framework/service/httpService"],function($,httpService){
        var c2Controller = ["$scope","maskService",function($scope,maskService){
            $scope.test = function(){
                console.log("enter controller");
            };
    
            $scope.getData = function(){
                maskService.show("get data");
                $.ajax({
                    "type":"GET",
                    "contentType":"application/json;charset=UTF-8",
                    //修改前为"url":"mock/test.json",
                    "url":httpService.getUrl("GET","/nova/test.json"),
                    "success":function(data){
                        console.log(JSON.stringify(data));
                        setTimeout(function(){
                            maskService.hide();
                        },6000);
                    },
                    "error":function(data){
                        console.log("error");
                    }
                });
            };
    
            var handleFileSelect = function (evt) {
                var file = evt.currentTarget.files[0];
                var reader = new FileReader();
                reader.onload = function (evt) {
                    $scope.$apply(function ($scope) {
                        $scope.myImage = evt.target.result;
                    })
                };
                reader.readAsDataURL(file);
            };
    
            angular.element(document.querySelector("#fileInput")).on("change",handleFileSelect);
        }];
        return c2Controller;
    });

变更部分内容如下：

![20170218224245184][]

handlerFileSelect的功能很简单，当我们上传一张图片的时候，读取图片信息，并把图片放在myImage对象中。

在cs.html中调用第三方组件：

<div>
        <input type="button" value="test Controller" ng-click="test()">
        <button ng-click="getData()">request</button>
        <style>
            .cropArea{
                background: #E4E4E4;
                overflow: hidden;
                width: 500px;
                height: 350px;
                padding: 10px;
            }
        </style>
        <div>选择图片文件：<input type="file" id="fileInput"/></div>
        <div class="cropArea">
            <img-crop image="myImage" result-image="myCroppedImage" ng-init="myCroppedImage=''"></img-crop>
        </div>
        <div>截取的图片</div>
        <div style="padding: 10px;"><img ng-src="{
       {myCroppedImage}}"/></div>
    </div>

变更内容如下：

![20170218225031243][]

对第三方组件的使用都在c2.html中，下面详细说明一下：

在controller中定义的业务逻辑会把上传的图片加载到第三方组件定义的自定义标签中（handlerFileSelect方法写入图片的对象就是img-crop标签image属性的值，所以它们的名称应当保持一致），result-image属性会输出选取的局部图片（放在属性对应的值中），ng-init则是对result-image属性的值进行初始化，如果不初始化就会出错（之前对这个值没有初始化，后来是根据danialfarid这位大神的代码才分析出问题原因，参考代码路径：[http://jsfiddle.net/danialfarid/xxo3sk41/590/][http_jsfiddle.net_danialfarid_xxo3sk41_590]），然后在我们自定义的图片标签里把result-image属性输出的结果显示出来。

我们在使用这个第三方组件的时候只需要传入原始图片，然后获取返回的图片结果就可以了，图片抓取范围大小调整、整个抓取过程，我们统统都不需要关注，这些组件都做了完美封装，就是这么屌。

最后简单看一下这个简单的功能是怎么玩的：

![20170218231106273][]

图片上传后会自动显示在界面上，同时图片上会显示一个抓取框，抓取框的位置和大小都可以调整，当我们拖拽鼠标的时候，实时抓取的内容就会显示在我们自定义的图片框中：

![20170218231429855][]

至此，这个实现图片局部放大抓取的功能就介绍完了，当然，这个第三方组件远不止这点功能，且其他功能都很好很强大（这个组件在GitHub上获得了上千颗星），有兴趣的同学可以再玩一玩组件包含的其他插件。

[20170218180826092]: /images/20220710/7a47723cc56a412199e688164e6b6a68.png
[https_github.com_danialfarid_ng-file-upload]: https://github.com/danialfarid/ng-file-upload
[20170218221146019]: /images/20220710/7c33c33ca3ea4818baf1a175545b7100.png
[20170218222534678]: /images/20220710/9b3c377ad98747f4b88fa07aae451a9d.png
[20170218223216576]: /images/20220710/d382ae096dde4f2fa0afebb3e7b85b3f.png
[20170218223718474]: /images/20220710/e65dde8a75f0440988e3e39d72ac13ee.png
[20170218224245184]: /images/20220710/10e2571f2f1c4706b81da836da754d3d.png
[20170218225031243]: /images/20220710/84261b9deb26416186192065d6bb6a68.png
[http_jsfiddle.net_danialfarid_xxo3sk41_590]: http://jsfiddle.net/danialfarid/xxo3sk41/590/
[20170218231106273]: /images/20220710/2d07bdcdde6b4d9888a018e95a3ad909.png
[20170218231429855]: /images/20220710/af67347cca03410b9d4265868d4d79ca.png