Angular2+AngularJS
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/
Angular2+AngularJS的更多相关文章
- maven+eclipse+jboss+oracle 12c+memcached+AngularJS
Maven 参考梁总的: Eclipse Java EE IDE for Web Developers集成的Maven 3 指向自己安装的 Maven Maven下载.安装和配置(二) 在本地配置ma ...
- Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...
- Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择
2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK 译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...
- 浅谈angular2与angularJS的区别
简介 大家好,今天给大家介绍一下angular,相信做过前端的小伙伴们都知道angular的大名,angularJS自2012年发布起就受到了大家的广泛关注.他首次提出了双向绑定概念让所有人都耳目一新 ...
- 浅谈Angularjs至Angular2后内置指令的变化
一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- Angular2 Hello World 之 RC6
angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.code ...
- Angular2 小贴士 RouterLink 导航
AngularJS的路由一直是学习的一大难点,我们只能边看边学边掌握,边看边学边推翻.今天我们来看一下在angular2中通过routerLink实现导航的几种方式,以及各自的优缺点. Angular ...
- [译]Angular2 和TypeScript -- 一次简要的预览
原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者: Yakov Fain Posted o ...
随机推荐
- linux 清理缓存buff/cache
清理缓存 echo 1 > /proc/sys/vm/drop_cachesecho 2 > /proc/sys/vm/drop_cachesecho 3 > /proc/sys/v ...
- 20165214 2018-2019-2 《网络对抗技术》Exp4 恶意代码分析 Week6
<网络对抗技术>Exp3 免杀原理与实践 Week5 一.实验目标与内容 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp ...
- TCP学习总结(三)
TCP的流量控制 1.利用滑动窗口实现流量控制 所谓流量控制,就是让发送方的发送速率不要太快,要让接收方来得及接收.利用下图来说明如何利用滑动窗口机制进行流量控制: 一开始(connect后),B告诉 ...
- 小试牛刀 WiFi 远控 + wendu
废话 少说 直接上代码 DH11三根线 信号线 接2 WiFi 模块 r-------t t--------r en&vcc------3.3v 剩下的 共地的啦 double Fahre ...
- JAVA8集合之List
目录: 一.ArrayList概述 二.ArrayList的实现 1)成员变量 2)构造方法 3)元素添加 4)元素删除 5)元素修改 6)集合容量调整 7)集合转数组 三.总结 一.ArrayLis ...
- SQL Server DDL
1:向表中添加字段 Alter table [表名] add [列名] 类型 2: 删除字段 Alter table [表名] drop column [列名] 3: 修改表中字段类型 (可以修 ...
- 第一次玩博客，今天被安利了一个很方便JDBC的基于Spring框架的一个叫SimpleInsert的类，现在就来简单介绍一下
首先先对这段代码的简单介绍,我之前在需要操作JDBC的时候总是会因为经常要重新写SQL语句感到很麻烦.所以就能拿则拿不能拿的就简单地封装了一下. 首先是Insert.Spring框架的JDBC包里面的 ...
- 2PC（Two Phase Commitment Protocol）原理
读TiDB原理部分,知道其分布式事务是参考的Google percolator.而percolator是一种2PC的优化. 分布式事务解决的是什么问题呢? 假设一个场景,一个电商网站,用户在购买商品时 ...
- Feign源码解析系列-注册套路
感谢不知名朋友的打赏,感谢你的支持! 开始 在追寻Feign源码的过程中发现了一些套路,既然是套路,就可以举一反三,所以值得关注. 这篇会详细解析Feign Client配置和初始化的方式,这些方式大 ...
- JavaSE学习（二）：进制转换—数据类型转换—Java运算符
一.进制转换 1.1 其他进制转十进制(以十六进制为例): 十六进制范围:0-9, A-F对应数字10-15 2A7E(16) = 14*16(0) +7*16(1) + 10*16(2) + ...