AngularJS_自定义控件_笔记1
简介: 本篇博客是在学习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; }); ? ? 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; }); ? ??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'] }); }]); }); ? ? 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; 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>', ? ? pre: function ($scope,$attrs) ? ? } ? ?使用方式修改为: ="resumeCode" input-name="自定义文字"> ? ResumeSrummaryDirective
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 扩展/覆盖现有的ASP.NET控件
- asp.net – 使用jQuery以编程方式触发JavaScript
- asp.net中的GridView分页问题
- asp.net-mvc – MVC4 jQuery UI不起作用
- ResolveClientUrl在ASP.Net 4和3.5中的工作方式不
- asp.net-mvc-3 – 基于字符串创建ViewBag属性
- asp.net-mvc – 在FSharp.Core旁边找不到FSharp.
- asp.net-mvc – DesignPatterns:哪个最适合用于
- asp.net – 获得“System.Web.Mvc.Html.MvcForm”
- asp.net-mvc – 如何从用户友好的URL中删除不必要