Angular2+AngularJS
2024-09-25 02:43:12
AngularJS 系列:
1.angular.module 的定义
var mapApp = angular.module("positionSalaryEditApp",["subBase","empInfoDialogBase"]);
其中 “subBase” 是公共的基层module , "empInfoDialogBase" 是自定义的弹框控件对应的module,在此处进行调用,如果不需要引用任何东西,则直接为:var mapApp = angular.module("positionSalaryEditApp",[]);2.module 对应的factory的定义 (如果是想放到已定义的module中,放在改定义代码下即可,若分开另一个文件,则需要做以下重定义:var serviceApp = angular.module("positionSalaryEditApp");如下图代码)
var serviceApp = angular.module("positionSalaryEditApp");serviceApp.factory("positionSalaryEditService", ["$http", "$location", function ($http, $location) { // 保存 function save(positionView, callback, errorCallback){ $http.post("/sub/paas/sub/positionSalary/save.do", positionView).success(function (result) { if (callback) { callback(result); } }).error(errorCallback); } return { save:function(setBudgetVO, callback, errorCallback){ save(setBudgetVO, callback, errorCallback); } } }]); //factory end
3.module 对应的controller 的定义
var mapApp = angular.module("positionSalaryEditApp",["subBase","empInfoDialogBase"]);mapApp.controller("positionSalaryEditCtrl",["$scope","$http","$filter",'$location',"positionSalaryEditService",function($scope,$http,$filter,$location,commonSubService,positionSalaryEditService){ var view={ id:"", name:"" } $scope.view=view; $scope.getName=function(){ $scope.view.name="cjjuan"; } }]); //controller end
4.html与angularJs 的双向绑定
<!------------ 对应angular.module 定义的变量---------><html ng-app="positionSalaryEditApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>岗位工资</title> <!------------ 引入对应的js文件---------> <script src="script/controllers/positionSalaryEditController.js"></script> <script src="script/services/positionSalaryEditService.js"></script> </head><!------------ 对应angular.module 相应的controller的变量---------> <body ng-controller="positionSalaryEditCtrl"> <form name="positionSalaryEditForm"></form></body></html>
1. 自定义弹框
2.angularJs 自定义过滤器
在angular.module 对应的下加 filter,具体见如下代码:
var mapApp = angular.module("subApplyEditApp",["uniformCommon"]); /** *过滤器:取小数点后num位,且无千位符 */ mapApp.filter("num",function(){ return function(input,num){ if(input){ var v=parseFloat(input); return v.toFixed(num); }else{ return ""; } } });
在html中调用如下:
<td>{{item.approvedTax|num:2}}</td>
在js中调用如下:
item.approvedTax=$filter('num')(123456.1234); 输出结果为 123456.12
3.自定义校验器
定义了module后,在module 变量下定义文本框输入校验器
/** * 自定义输入校验,两位小数位的正数 */ mapApp.directive('inputNum2',function (){ return{ restrict: "A", require: "?ngModel", link: function(scope, element, attrs, ngModelCtrl){ element.blur(function() { var reg = /^(([1-9]\d*)|0)(\.\d{1,2})?$/; var value = element.val().replace(/,/g,''); value = value.replace(/\s+/g,""); if(reg.test(value)){ ngModelCtrl.$setViewValue(parseFloat(value).toFixed(2)); element.val(parseFloat(value).toFixed(2)); scope.$apply(); }else if(value==""){ ngModelCtrl.$setViewValue(0.00.toFixed(2)); element.val(0.00.toFixed(2)); scope.$apply(); }else{ pms.warn("请输入正确的数量!"); ngModelCtrl.$setViewValue(0.00.toFixed(2)); element.val(0.00.toFixed(2)); scope.$apply(); } }); } } });
校验器在html上的调用如下:
<input ng-model="item.applyNum" type="text" input-num2 />
Angular2环境搭建
参考微博:http://blog.csdn.net/ning0_o/article/details/52624911
官网参考:https://angular.cn/docs/ts/latest/quickstart.html
1.安装node以及其自带的npm:下载地址为https://nodejs.org/en/download/
最新文章
- 破解版windows 7(旗舰版)下安装并使用vagrant统一开发环境
- 应用 CSS3 动画实现12种风格的通知提示
- [javaSE] 反射-方法的反射
- HTML5 Audio and Video 的新属性简介
- Spark源码阅读(1): Stage划分
- js设计模式(5)---外观模式
- 复习C语言
- bzoj1131: [POI2008]Sta
- PHP删除数组中特定元素
- 无递归 A星寻路算法
- ELK 6安装配置 nginx日志收集 kabana汉化
- 构建基于Netty 的HTTP/HTTPS 应用程序
- AJAX初步学习
- 如何用chrome扩展将网页变成黑底白字,用以保护视力
- CrackMe005-下篇 | 逆向破解分析 | 160个CrackMe(视频+图文)深度解析系列
- django models返回数据根据某字段倒序排列
- python测试开发django-32.admin后台多对多关系ManyToManyField
- 【Android架构综述篇】之应用程序、应用程序訪问硬件的流程
- 能让你聪明的工作DEAL四法则,来自《每周工作四小时》书籍
- C++中堆和栈的完全解析
热门文章
- NPOI处理Word文本中段落编号
- pytest自动化6:pytest.mark.parametrize装饰器--测试用例参数化
- No mapping found for HTTP request with URI [/crmcrmcrm/css/bootstrap.min.css] in DispatcherServlet with name &#39;springMvc&#39;
- JS中的加减乘除和比较赋值
- php的array数组 -------方法foreach循环时候,利用数组里值的引用地址(&; )从而改变数组里的值
- 2018.12.02 Socket编程之初识Socket
- python定时脚本判断服务器内存
- AIX下core文件的分析
- win7安装python3.6.1及scrapy
- protel项目创建