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.****.net/ning0_o/article/details/52624911
官网参考：https://angular.cn/docs/ts/latest/quickstart.html
1.安装node以及其自带的npm:下载地址为https://nodejs.org/en/download/