加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

AngularJS_自定义控件_笔记1

发布时间:2020-12-16 08:55:42 所属栏目:asp.Net 来源:网络整理
导读:简介: 本篇博客是在学习AngularJS自定义控件的学习记录,作为一个学习示例... ?? ? A-基本架构介绍 新建一个AngularJs的项目,大概项目结构如下: 项目结构: 大概是由:app.js,bootstrap.js,app-routes.js,config.json,common-config.json等主要文件组成

简介: 本篇博客是在学习AngularJS自定义控件的学习记录,作为一个学习示例... ??

?

A-基本架构介绍

新建一个AngularJs的项目,大概项目结构如下:

项目结构:

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

  app.js--当做项目的起始文件吧,里面会包含:注入的其他JS模块,过滤设置,配置文件的设置等。

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-workflow-oauth''angular-seagull2-infrastructure''angular-indentity-code''angular-seagull2-careerdev']);

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

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

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

    将阿拉伯数字转化为中文大写
    app.filter('cnuppercase',1)">(n)
        {
            if (n === '' || n === '0' || n === 0return "";
            }
            if (!/^(0|[1-9]d*)(.d+)?$/.test(n))
            {
                ;
            }
            
            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,1)">)
                .replace(/零(万|亿|元)/g,"$1")
                .replace(/(亿)万|壹(拾)/g,"$1$2")
                .replace(/^元零?|零分/g,1)">)
                .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 =  (args)
    {
        var result = this;
        if (arguments.length > 0)
        {
            if (arguments.length == 1 && typeof (args) == "object"var key in args)
                {
                    if (args[key] != undefined)
                    {
                        var reg = new RegExp("({" + key + "})","g");
                        result = result.replace(reg,args[key]);
                    }
                }
            } else
            {
                var i = 0; i < arguments.length; i++)
                {
                    if (arguments[i] !=new RegExp("({[" + i + "]})",arguments[i]);
                    }
                }
            }
        }
         result;
    };

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

? ? bootstrap.js--理解成包管理文件,其中有包的文件地址和包的依赖关系等。

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

require(['angular','webuploader'],1)"> (angular,webuploader) {
        angular.element(document).ready( () {
            angular.bootstrap(document,['app']);
            angular.element(document).find('html').addClass('ng-app');
        });
        window.WebUploader = webuploader;
    });
View Code

? ??app-routes.js--理解为路由器,是配置页面,JS控制器管理,及参数传递及登录验证等的地方。

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

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

        招聘申请-前置页面     
        $stateProvider.state('recruitRquestFontpage''./views/recruitRequest/recruitRquestFontPage.html''./javascript/controllers/recruitRequest/fontPage-controller.js'true]
        });
        招聘申请     
        $stateProvider.state('RecruitRequest''Draft': {
                    templateUrl: './views/recruitRequest/list.html''./javascript/controllers/recruitRequest/list-controller.js'
                },'Approval'
                }
            },startupWorkflow: ]
        });

        自定义控件测试
        $stateProvider.state('test''./views/test/test.html''./javascript/controllers/test/test-controller.js'职位状态更新-前置页面
        $stateProvider.state('JobPostStateMaintainList''./views/JobPostStateMaintain/list.html'职位状态更新     
        $stateProvider.state('JobPostStateMaintain''/JobPostStateMaintain': {
                    templateUrl: './views/JobPostStateMaintain/edit.html''./javascript/controllers/JobPostStateMaintain/edit-controller.js'消息通知    
        $stateProvider.state('Notify''./views/notify/notify-dialog.html''./javascript/controllers/notify/notify-dialog-controller.js'录用洽谈-查看     
        $stateProvider.state('EmployeExecuteView''./views/EmployeExecute/employed-discuss-view.html''./javascript/controllers/EmployeExecute/employed-discuss-view-controller.js'录用洽谈     
        $stateProvider.state('EmployeExecute''/EmployeExecuteWf': {
                    templateUrl: './views/EmployeExecute/employed-discuss.html''./javascript/controllers/EmployeExecute/employed-discuss-controller.js''BackgroundCheck'内部推荐-前置页面
        $stateProvider.state('InternalRecommendRequestList''./views/InternalRecommendRequest/list.html'内部推荐更新     
        $stateProvider.state('InternalRecommendRequest''/InternalRecommendRequest': {
                    templateUrl: './views/InternalRecommendRequest/edit.html''./javascript/controllers/InternalRecommendRequest/readonly-controller.js'面试阶段管理     
        $stateProvider.state('InterviewManage''/InterviewManageWf': {
                    templateUrl: './views/InterviewManage/list.html': {
                    templateUrl: './views/InterviewManage/edit.html']
        });
    }]);
});
View Code

? ? config.json,common-config.json ?配置文件--里面配置了一些常用数据(登录地址,参数等),是在app.js中加入了配置才起的作用,

 (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>

?

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

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

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

//确定事件--调用回调函数
$modalScope.ok=function(){
$scope.roolback($scope.data);
                      }
关闭按钮事件 $modalScope.close = () { $modalScope.closeThisDialog(); }; }],undefined,{},undefined); wfWaiting.hide(); } }).error( (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"]); 创建resume-editor模块指令 module.directive('resumeSrummary'$ResumeSrummaryDirective); }(window,window.angular)); (
(angular) { 'use strict'; angular.module('angular-seagull2-empprovider''angular-seagull2-empprovider.ogu-unit''angular-seagull2-empprovider.resume-srummary'
define();

    require('angular-seagull2-empprovider');

     app;
});

a2-需要在包文件管理中配置包源:

'angular-ui-tree': 'https://develop-cdn.sinooceangroup.com/libs/angular-ui-tree/2.15.0/dist/angular-ui-tree.min''text': 'https://develop-cdn.sinooceangroup.com/libs/text/2.0.15/text.min''webuploader': 'https://develop-cdn.sinooceangroup.com/libs/webuploader/0.1.8/dist/webuploader.min''angular-seagull2-common': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common''angular-seagull2-workflow': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-workflow/1.5.1/angular-seagull2-workflow''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-indentity-code': './javascript/angular-indentity-code']
        },'angular-seagull2-oauth''angular-ui-router''angular-seagull2-empprovider''ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure.ie8']
        }
    }
});

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

? ? pre: function ($scope,$attrs)
? ?{
? ? ? ? ?if ($scope.inputName == null || $scope.inputName?== undefined || $scope.inputName?== '')
? ? ? ? ?{
? ? ? ? ? ? ? ? $scope.inputName?= "面试评价";
? ? ? ? ?}

? ? }

? ?使用方式修改为:

="resumeCode" input-name="自定义文字">

?

ResumeSrummaryDirective

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读