AngularJSAngularJS_自定义控件_笔记1

简介:
本篇博客是在攻读AngularJS自定义控件的求学记录,作为八个学学示例…   

 

A-基本架构介绍

新建二个AngularJs的项目,几乎项目布局如下:

AngularJS 1

品类社团:

  大致是由:app.js,bootstrap.js,app-routes.js,config.json,common-config.json等重大文件组成。

  app.js–当做项目标开场文件呢,里面会蕴藏:注入的别样JS模块,过滤设置,配置文件的安装等。

AngularJS 2AngularJS 3

define(function (require, exports, module) {
    var angular = require('angular');
    var asyncLoader = require('angular-async-loader');

    require('angular-ui-router');
    require('angular-seagull2-common');
    require('angular-seagull2-oauth');
    require('angular-seagull2-workflow');
    require('angular-seagull2-infrastructure');
    require('angular-indentity-code');
    require('angular-seagull2-empprovider');
    require('angular-seagull2-careerdev');
    require('angular-seagull2-corporation');

    var app = angular.module('app', [
        'ui.router',
        'angular-seagull2-common',
        'angular-seagull2-workflow-oauth',
        'angular-seagull2-workflow',
        'angular-seagull2-infrastructure',        
        'angular-datepicker',
        'angular-indentity-code',
        'angular-seagull2-empprovider',
        'angular-seagull2-careerdev',
        'angular-seagull2-corporation']);

    //常规金额:由于angular默认的金额格式如果是负数的话显示格式为(12,345.00),使用customCurrency替换成:-12,345.00
    app.filter('customCurrency', ["$filter", function ($filter)
    {
        return function (amount, currencySymbol)
        {
            var currency = $filter('currency');

            if (amount < 0)
            {
                return currency(amount, currencySymbol).replace("(", "-").replace(")", "");
            }

            return currency(amount, currencySymbol);
        };
    }]);

    //将阿拉伯数字转化为中文大写
    app.filter('cnuppercase', ["$filter", function ($filter)
    {
        return function(n)
        {
            if (n === '' || n === '0' || n === 0)
            {
                return "";
            }
            if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
            {
                return "";
            }

            var unit = "千百拾亿千百拾万千百拾元角分", str = "";
            n += "00";
            var p = n.indexOf('.');
            if (p >= 0)
                n = n.substring(0, p) + n.substr(p + 1, 2);
            unit = unit.substr(unit.length - n.length);
            for (var i = 0; i < n.length; i++)
                str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
            return str.replace(/零(千|百|拾|角)/g, "零")
                .replace(/(零)+/g, "零")
                .replace(/零(万|亿|元)/g, "$1")
                .replace(/(亿)万|壹(拾)/g, "$1$2")
                .replace(/^元零?|零分/g, "")
                .replace(/元$/g, "元整");
        };
    }]);
    ////格式化字符串
    //var template1 = "我是{0},今年{1}了";
    //var template2 = "我是{name},今年{age}了";
    //var result1 = template1.format("loogn", 22);
    //var result2 = template2.format({ name: "loogn", age: 22 });
    //两个结果都是"我是loogn,今年22了"
    String.prototype.format = function (args)
    {
        var result = this;
        if (arguments.length > 0)
        {
            if (arguments.length == 1 && typeof (args) == "object")
            {
                for (var key in args)
                {
                    if (args[key] != undefined)
                    {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            } else
            {
                for (var i = 0; i < arguments.length; i++)
                {
                    if (arguments[i] != undefined)
                    {
                        var reg = new RegExp("({[" + i + "]})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
        }
        return result;
    };

    var commonConfig = require('text!../common-config.json');
    var config = require('text!../config.json');
    app.config(['configureProvider', function (configureProvider)
    {
        configureProvider.configure(commonConfig);
        configureProvider.configure(config);
    }]);
    asyncLoader.configure(app);
    module.exports = app;
});

View Code

    bootstrap.js–领会成包管理文件,其中有包的文书地方和包的借助关系等。

AngularJS 4AngularJS 5

require.config({
    map: {
        '*': {
            'ie8css': 'https://develop-cdn.sinooceangroup.com/libs/requirecss-branch-seagull2/1.1.0/ie8css.min.js',
            'css': 'https://develop-cdn.sinooceangroup.com/libs/requirecss-branch-seagull2/1.1.0/css.min.js'
        }
    },
    waitSeconds: 0,
    //配置angular的路径
    paths: {
        'angular': 'https://develop-cdn.sinooceangroup.com/libs/angular/1.2.27/angular.min',
        'angular-cookies': 'https://develop-cdn.sinooceangroup.com/libs/angular/1.2.27/angular-cookies.min'
    },
    //这个配置是你在引入依赖的时候的包名
    shim: {
        'text': { exports: 'text' },
        'angular': { exports: 'angular' },
        'angular-cookies': { exports: 'angular-cookies', deps: ['angular'] },
        'angular-ui-router': { deps: ['angular'] },
        'angular-ui-tree': { deps: ['angular', 'css!https://develop-cdn.sinooceangroup.com/libs/angular-ui-tree/2.15.0/dist/angular-ui-tree.min'] },
        'angular-datepicker': { deps: ['angular', 'css!https://develop-cdn.sinooceangroup.com/libs/datepicker-branch-seagull2/1.0.5/datepicker-branch-seagull2'] },
        'angular-seagull2-common': {
            deps: [
                'angular',
                'urijs/uri',
                'angular-ui-tree',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common.ie8']
        }
    }
});

require(['angular', 'webuploader',
    './javascript/app-routes'],
    function (angular, webuploader) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['app']);
            angular.element(document).find('html').addClass('ng-app');
        });
        window.WebUploader = webuploader;
    });

View Code

 
  app-routes.js–了然为路由器,是布局页面,JS控制器管理,及参数传递及登录验证等的地点。

AngularJS 6AngularJS 7

define(function (require)
{
    var app = require('../javascript/app');

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider)
    {
        var csspathBase = "https://develop-cdn.sinooceangroup.com/libs/seagull2-workflow-responsive/1.0.3";

        //招聘申请-前置页面     
        $stateProvider.state('recruitRquestFontpage', {
            url: '/recruitRquestFontpage',
            templateUrl: './views/recruitRequest/recruitRquestFontPage.html',
            controller: 'fontPage-controller',
            controllerUrl: './javascript/controllers/recruitRequest/fontPage-controller.js',
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
        //招聘申请     
        $stateProvider.state('RecruitRequest', {
            url: '/RecruitRequest',
            useWorkflow: true,
            workflowUrlBase: '/RecruitRequestWf',
            workflowScene: {
                'Draft': {
                    templateUrl: './views/recruitRequest/list.html',
                    controller: 'list-controller',
                    controllerUrl: './javascript/controllers/recruitRequest/list-controller.js'
                },
                'Approval': {
                    templateUrl: './views/recruitRequest/list.html',
                    controller: 'list-controller',
                    controllerUrl: './javascript/controllers/recruitRequest/list-controller.js'
                },
                'ReadOnly': {
                    templateUrl: './views/recruitRequest/list.html',
                    controller: 'list-controller',
                    controllerUrl: './javascript/controllers/recruitRequest/list-controller.js'
                }
            },
            startupWorkflow: true,
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });

        //自定义控件测试
        $stateProvider.state('test', {
            url: '/test',
            templateUrl: './views/test/test.html',
            controller: 'test_controller',
            controllerUrl: './javascript/controllers/test/test-controller.js',
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });

        //职位状态更新-前置页面
        $stateProvider.state('JobPostStateMaintainList', {
            url: '/JobPostStateMaintainList',
            templateUrl: './views/JobPostStateMaintain/list.html',
            controller: 'list-controller',
            controllerUrl: './javascript/controllers/JobPostStateMaintain/list-controller.js',
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
        //职位状态更新     
        $stateProvider.state('JobPostStateMaintain', {
            url: '/JobPostStateMaintain',
            useWorkflow: true,
            workflowUrlBase: '/JobPostStateMaintain',
            workflowScene: {
                'Draft': {
                    templateUrl: './views/JobPostStateMaintain/edit.html',
                    controller: 'edit-controller',
                    controllerUrl: './javascript/controllers/JobPostStateMaintain/edit-controller.js'
                },
                'ReadOnly': {
                    templateUrl: './views/JobPostStateMaintain/edit.html',
                    controller: 'edit-controller',
                    controllerUrl: './javascript/controllers/JobPostStateMaintain/edit-controller.js'
                }
            },
            startupWorkflow: true,
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
        //消息通知    
        $stateProvider.state('Notify', {
            url: '/Notify?taskID',
            templateUrl: './views/notify/notify-dialog.html',
            controller: 'notify-dialog-controller',
            controllerUrl: './javascript/controllers/notify/notify-dialog-controller.js',
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
        //录用洽谈-查看     
        $stateProvider.state('EmployeExecuteView', {
            url: '/EmployeExecuteView?id&taskID',
            templateUrl: './views/EmployeExecute/employed-discuss-view.html',
            controller: 'employed-discuss-view-controller',
            controllerUrl: './javascript/controllers/EmployeExecute/employed-discuss-view-controller.js',
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
        //录用洽谈     
        $stateProvider.state('EmployeExecute', {
            url: '/EmployeExecute',
            useWorkflow: true,
            workflowUrlBase: '/EmployeExecuteWf',
            workflowScene: {
                'Draft': {
                    templateUrl: './views/EmployeExecute/employed-discuss.html',
                    controller: 'employed-discuss-controller',
                    controllerUrl: './javascript/controllers/EmployeExecute/employed-discuss-controller.js'
                },
                'GeneratedNotice': {
                    templateUrl: './views/EmployeExecute/employed-discuss.html',
                    controller: 'employed-discuss-controller',
                    controllerUrl: './javascript/controllers/EmployeExecute/employed-discuss-controller.js'
                },
                'BackgroundCheck': {
                    templateUrl: './views/EmployeExecute/employed-discuss.html',
                    controller: 'employed-discuss-controller',
                    controllerUrl: './javascript/controllers/EmployeExecute/employed-discuss-controller.js'
                },
                'ReadOnly': {
                    templateUrl: './views/EmployeExecute/employed-discuss.html',
                    controller: 'employed-discuss-controller',
                    controllerUrl: './javascript/controllers/EmployeExecute/employed-discuss-controller.js'
                }
            },
            startupWorkflow: true,
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });

        //内部推荐-前置页面
        $stateProvider.state('InternalRecommendRequestList', {
            url: '/InternalRecommendRequestList',
            templateUrl: './views/InternalRecommendRequest/list.html',
            controller: 'list-controller',
            controllerUrl: './javascript/controllers/InternalRecommendRequest/list-controller.js',
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
        //内部推荐更新     
        $stateProvider.state('InternalRecommendRequest', {
            url: '/InternalRecommendRequest',
            useWorkflow: true,
            workflowUrlBase: '/InternalRecommendRequest',
            workflowScene: {
                'Draft': {
                    templateUrl: './views/InternalRecommendRequest/edit.html',
                    controller: 'edit-controller',
                    controllerUrl: './javascript/controllers/InternalRecommendRequest/edit-controller.js'
                },
                'ReadOnly': {
                    templateUrl: './views/InternalRecommendRequest/edit.html',
                    controller: 'edit-controller',
                    controllerUrl: './javascript/controllers/InternalRecommendRequest/readonly-controller.js'
                }
            },
            startupWorkflow: true,
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });

        //面试阶段管理     
        $stateProvider.state('InterviewManage', {
            url: '/InterviewManage',
            useWorkflow: true,
            workflowUrlBase: '/InterviewManageWf',
            workflowScene: {
                'Draft': {
                    templateUrl: './views/InterviewManage/list.html',
                    controller: 'list-controller',
                    controllerUrl: './javascript/controllers/InterviewManage/list-controller.js'
                },
                'ReadOnly': {
                    templateUrl: './views/InterviewManage/edit.html',
                    controller: 'edit-controller',
                    controllerUrl: './javascript/InterviewManage/JobPostStateMaintain/edit-controller.js'
                }
            },
            startupWorkflow: true,
            requiredLogin: true,
            dependencies: ['css!' + csspathBase + '/form', 'ie8css!' + csspathBase + '/form_ie8']
        });
    }]);
});

View Code

    config.json,common-config.json
 配置文件–里面配备了有的常用数据(登录地址,参数等),是在app.js中投入了配备才起的职能,

var commonConfig = require('text!../common-config.json');
    var config = require('text!../config.json');
    app.config(['configureProvider', function (configureProvider)
    {
        configureProvider.configure(commonConfig);
        configureProvider.configure(config);
    }]);
    asyncLoader.configure(app);
    module.exports = app;

 

B-自定义控件示例:

作者的自定义控件文件为:angular-seagull2-empprovider.js

注意:

b1:
 $ResumeSrummaryDirective
 标记的名字要大小保持一致;

b2:  angular.module(“angular-seagull2-empprovider.resume-srummary”
要和module.directive(‘resumeSrummary’,
$ResumeSrummaryDirective);

b3:  必要小心的是参数中:scope: { resumeCode: ‘=resumeCode’ },   岂但可以流传字符串,还能传输对象和回调方法,当然对象和回调方法须求在主页面定义好。

如:

scope: { resumeCode:
‘=resumeCode’,data:’=data’,rollback:’=roolback’ }

<interview-arrangement-evaluate resume-code=”item.code” data=”data” rollback=”rollback“></interview-arrangement-evaluate>

 

要遵从驼峰命名规范,首字母小写。

//简历评价
(function (window, angular) {
    'use strict';
    $ResumeSrummaryDirective.$inject = ['$http', 'seagull2Url', 'wfWaiting', 'sogModal', 'sogValidator', 'ValidateHelper', 'IndentityCodeHelper', 'regionType'];

    function $ResumeSrummaryDirective($http, seagull2Url, wfWaiting, sogModal, sogValidator, ValidateHelper, IndentityCodeHelper, regionType) {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: { resumeCode: '=resumeCode',data:'=data',rollback:'=roolback'  },
            template: '<a ng-click="showResumeSrummary()" style="color:blue;margin-left:5px;float:left;cursor:pointer;">面试评价</a>',
            link: {
                pre: function ($scope, $element, $attrs) {
                    $scope.showResumeSrummary = function () {
                        //简历评价事件
                        $http.post(seagull2Url.getPlatformUrl("/Resume/LoadResumeSrummary?code=" + $scope.resumeCode)).success(function (result) {
                            if (result) {
                                sogModal.openLayer('<div><div ng-include="\'views/common/resume-srummary-template.html\'"></div></div>', ['$scope', function ($modalScope) {
                                    $modalScope.resumeSurmmarys = result;

                                    //确定事件--调用回调函数
                                    $modalScope.ok=function(){
                                         $scope.roolback($scope.data);
                      }
                                    //关闭按钮事件
                                    $modalScope.close = function () {
                                        $modalScope.closeThisDialog();
                                    };
                                }], undefined, {}, undefined, undefined);
                                wfWaiting.hide();
                            }
                        }).error(function (err, status) {
                            wfWaiting.hide();
                            console.log(err + "||" + status);
                            //sogModal.openMessageDialog(status, result);
                        });
                    };
                }
            }
        };
    }
    //声明模块angular-seagull2-empprovider.resume-srummary
    var module = angular.module("angular-seagull2-empprovider.resume-srummary", [
        'angular-seagull2-common',
        'angular-seagull2-workflow']);
    //创建resume-editor模块指令
    module.directive('resumeSrummary', $ResumeSrummaryDirective);

}(window, window.angular));

(function (angular) {
    'use strict';

    angular.module('angular-seagull2-empprovider', [
        'angular-seagull2-empprovider.recruit-request-view',
        'angular-seagull2-empprovider.ogu-unit',
        'angular-seagull2-empprovider.resume-editor',
        'angular-seagull2-empprovider.resume-srummary',
    ]);
}(window.angular));

AngularJS, 

a1-依据结构的剖析,要想使该JS起效果,要求在app.js中注入该JS才行(下边只突显了非常首要代码):

define(function (require, exports, module) {
    var angular = require('angular');
    var asyncLoader = require('angular-async-loader');

    require('angular-seagull2-empprovider');

    var app = angular.module('app', [

        'angular-seagull2-empprovider',
     ]);

     var commonConfig = require('text!../common-config.json');
    var config = require('text!../config.json');
    app.config(['configureProvider', function (configureProvider)
    {
        configureProvider.configure(commonConfig);
        configureProvider.configure(config);
    }]);
    asyncLoader.configure(app);
    module.exports = app;
});

a2-须求在包文件管理中布置包源:

require.config({
    map: {
        '*': {
            'ie8css': 'https://develop-cdn.sinooceangroup.com/libs/requirecss-branch-seagull2/1.1.0/ie8css.min.js',
            'css': 'https://develop-cdn.sinooceangroup.com/libs/requirecss-branch-seagull2/1.1.0/css.min.js'
        }
    },
    waitSeconds: 0,
    //配置angular的路径
    paths: {
        'angular': 'https://develop-cdn.sinooceangroup.com/libs/angular/1.2.27/angular.min',
        'angular-cookies': 'https://develop-cdn.sinooceangroup.com/libs/angular/1.2.27/angular-cookies.min',
        'angular-ui-router': 'https://develop-cdn.sinooceangroup.com/libs/angular-ui-router/0.2.18/release/angular-ui-router.min',
        'angular-ui-tree': 'https://develop-cdn.sinooceangroup.com/libs/angular-ui-tree/2.15.0/dist/angular-ui-tree.min',
        'angular-async-loader': 'https://develop-cdn.sinooceangroup.com/libs/angular-async-loader/1.3.2/angular-async-loader.min',
        'text': 'https://develop-cdn.sinooceangroup.com/libs/text/2.0.15/text.min',
        'jquery': 'https://develop-cdn.sinooceangroup.com/libs/jquery/1.12.3/dist/jquery.min',
        'webuploader': 'https://develop-cdn.sinooceangroup.com/libs/webuploader/0.1.8/dist/webuploader.min',
        'urijs': 'https://develop-cdn.sinooceangroup.com/libs/urijs/1.17.1/src',

        'angular-seagull2-common': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common',
        'angular-seagull2-oauth': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-oauth/1.1.9/angular-seagull2-oauth',
        'angular-seagull2-workflow': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-workflow/1.5.1/angular-seagull2-workflow',
        'angular-seagull2-infrastructure': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
        'angular-datepicker': 'https://develop-cdn.sinooceangroup.com/libs/datepicker-branch-seagull2/1.0.5/datepicker-branch-seagull2',
        'angular-seagull2-empprovider': './javascript/angular-seagull2-empprovider',
        'angular-seagull2-careerdev': './javascript/angular-seagull2-careerdev',
        'angular-indentity-code': './javascript/angular-indentity-code',
        'angular-seagull2-corporation': './javascript/angular-seagull2-corporation'
    },
    //这个配置是你在引入依赖的时候的包名
    shim: {
        'text': { exports: 'text' },
        'angular': { exports: 'angular' },
        'angular-cookies': { exports: 'angular-cookies', deps: ['angular'] },
        'angular-ui-router': { deps: ['angular'] },
        'angular-ui-tree': { deps: ['angular', 'css!https://develop-cdn.sinooceangroup.com/libs/angular-ui-tree/2.15.0/dist/angular-ui-tree.min'] },
        'angular-datepicker': { deps: ['angular', 'css!https://develop-cdn.sinooceangroup.com/libs/datepicker-branch-seagull2/1.0.5/datepicker-branch-seagull2'] },
        'angular-seagull2-common': {
            deps: [
                'angular',
                'urijs/uri',
                'angular-ui-tree',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common.ie8']
        },
        'angular-seagull2-oauth': {
            deps: [
                'angular',
                'angular-cookies',
                'angular-ui-router',
                'urijs/uri',
                'angular-seagull2-common']
        },

        'angular-seagull2-empprovider': {
            deps: [
                'angular',
                'angular-seagull2-common',
                'angular-seagull2-workflow',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure.ie8']
        }
    }
});

require(['angular', 'webuploader',
    './javascript/app-routes'],
    function (angular, webuploader) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['app']);
            angular.element(document).find('html').addClass('ng-app');
        });
        window.WebUploader = webuploader;
    });

 

B-自定义控件JS简单分析:

—>创设控件指令函数—>注入指令函数

 

C-使用示例:

最主要:angularjs在采用自定义控件时,遵守“驼峰命名规范”!即由于控件自定义参数为:resumeCode,所以在行使时应为:resume-code,并将字母改为小写,值也不必要加{{}}标识

<resume-srummary resume-code="resumeCode"></resume-srummary>

 

D-总括–自定义控件显示内容可更改:

自定义控件模板template数据可变,能够一向运用angular语法如:{{inputName}}

在上边的自定义控件模板为:

template: '<a ng-click="showResumeSrummary()" style="color:blue;margin-left:5px;float:left;cursor:pointer;">面试评价</a>',
改为:
template: '<a ng-click="showResumeSrummary()" style="color:blue;margin-left:5px;float:left;cursor:pointer;">{{inputName}}</a>',
参数定义:
link: {

*    pre: function ($scope, $element, $attrs)
   {
         if ($scope.inputName == null || $scope.inputName == undefined
|| $scope.inputName == ”)
         {
                $scope.inputName = “面试评价”;
         }*

    }

   使用情势修改为:

<resume-srummary resume-code="resumeCode" input-name="自定义文字"></resume-srummary>

 

ResumeSrummaryDirective

AngularJS 8

相关文章