- 浏览: 800270 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (480)
- Spring (12)
- Hibernate (8)
- Struts2 (4)
- Java 基础-JDK-类-接口-URI-专题研究 (27)
- 线程、线程池、多线程高并发高可用、Socket通信 (15)
- Oracle数据库 (20)
- 一般-前端js-html-其它 (25)
- JYSK-互联网金融、金融科技、支付、公司、新闻等等 (8)
- Ajax-jQuery开源框架 (7)
- Json-轻量级的数据交换格式 (14)
- JavaScript (15)
- Jsp、Servlet、Servlet+JSP+JavaBean开发模式(MVC) (18)
- Html-JavaScript-前端-调用接口 (12)
- Sql Server 2005 (6)
- 正则表达式 (2)
- Java tools (18)
- 加签与验签、加密与解密 (3)
- Ajax技术核心-xmlHttpRequest(简称XHR) (6)
- xml-数据交换格式 (3)
- 信息采集 (1)
- Http - Https - HttpClient - httpCore-SSL-TLS (10)
- HtmlParser (2)
- 标签库 (1)
- SMS (2)
- jxl-导入导出 (4)
- poi-导入导出 (2)
- 定时器Timer+Quartz (6)
- 工作流引擎JBPM3.2.3 (4)
- 工作流引擎JBPM4 (0)
- 数据源-JNDI (0)
- tomcat、weblogic等应用服务器 (6)
- 工作流引擎jbpm5 (1)
- 搜索引擎Lucene (1)
- ant (1)
- 大数据-HBase (2)
- bigtable (0)
- 数据库设计 (4)
- jquery tab (0)
- mybatis (5)
- jquery ui 1.10.3 (5)
- Jboss7 (1)
- 规则引擎drools (0)
- 工作流引擎Activiti5 (0)
- 数据库-用户自定义函数 (0)
- 数据库-存储过程 (2)
- 数据库-视图 (0)
- 数据库-触发器 (0)
- 数据库-sql (2)
- highcharts-图表工具 (1)
- sql server 2008 (6)
- 诗词-工作室 (2)
- 数据割接 (1)
- GIS-地理信息系统 (2)
- RS-遥感技术 (1)
- GPS-全球定位系统 (1)
- java整合flex_RIA开发 (3)
- C#编程语言 (5)
- webservice_axis2_cxf_soap_wsdl (2)
- sql语句 (3)
- Flex_WebService_GIS (25)
- PHP编程语言 (0)
- ExtJS4.2 (1)
- Spring mvc (5)
- EasyUI1.4.2 (16)
- 日期时间工具类 (4)
- 随机数 (1)
- Arcgis api for js (0)
- Mysql数据库 (9)
- 移动互联网 java html5/flash socket netty (0)
- API接口 (1)
- AndroidStudio (0)
- Git (2)
- Maven (5)
- IDEA (0)
- 大数据-Hadoop (2)
- JPA (0)
- Spring boot (4)
- JSF (0)
- nginx_lua_module_redis (2)
- Activiti (1)
- bootstrap (1)
- AngularJS (10)
- 数据库-索引 (1)
- Linux及其连接工具SSH (4)
- java日志管理 (2)
- islider滑动控件 (1)
- jquery (1)
- 异常处理Exception (1)
- 秒杀与类秒杀系统 (1)
- 连接数据库、数据库连接池 (4)
- 数据库-临时表 (1)
- 软件设计模式-单例、多例、代理、工厂、观察者 (3)
- 集合框架 (5)
- 人工智能--Artificial intelligence、神经网络算法、机器学习 (1)
- 分布式应用 (1)
- SOA服务-Dubbo框架-Thrift框架 (2)
- Zookeeper分布式服务框架 (2)
- intellij idea (1)
- python编程语言 (0)
- 消息队列_MQ (0)
- 消息队列_RabbitMQ (2)
- 消息队列_ActiveMQ (1)
- 消息队列_Kafka (2)
- 缓存_Redis (4)
- 缓存_Memcache (0)
- 缓存_Ehcache (0)
- ivy-ivyde (1)
- google-protocol buffers (1)
- 正向代理-正向代理服务器 (1)
- 反向代理-反向代理服务器 (1)
- JVM内存模型 (0)
- Thunder框架 (1)
- NIO-非阻塞式IO (0)
- 软件测试、性能测试 (1)
- 序列化、Serializable接口、Externalizable接口 (3)
- 线程池-ExecutorService-ThreadPoolExecutor (1)
- web.xml (1)
- java开发-java工具-实用工具网站 (6)
- 医疗 (1)
- Filter-过滤器 (2)
- Unicode码-双字节字符编码 (1)
- OpenResty (1)
- 计算机网络 (1)
- eclipse_myeclipse_intellij idea (3)
- Enum (1)
- 大数据--Big Data (1)
- 云计算--Cloud computing (1)
- Elastic-Job (1)
- Redis (2)
- 文件流-IO操作 (6)
- 计算机基础知识 (1)
- Hessian-二进制RPC协议 (1)
- String类 (3)
- BigDecimal类 (1)
- java重要接口 (1)
- ReactJS (1)
- 跨域问题 (0)
- Map (1)
- 注解 (1)
- ASCII码-单字节字符编码 (1)
- 微服务、微服务架构 (2)
- RPC协议、RPC服务、RPC框架 (0)
- java反射 (1)
- java项目之classpath (1)
- 经典算法-树 (1)
- listener-监听器 (1)
- Interceptor-拦截器 (1)
- pojo javabean (2)
- 计算机科学与技术-进阶 (1)
- 代码规范与文档编写 (1)
- UML-统一建模语言 (1)
- 对接微信、支付宝 (3)
- 压力测试 (1)
- 办公软件-Excel (1)
- 办公软件-PPT (0)
- UTF8、GBK编码 (1)
- 微服务架构:Spring Cloud架构-Dubbo架构 (6)
- Nginx (1)
- 点滴业务 (1)
- form表单-json数据-转换与接口调用 (1)
- Junit单元测试 (1)
- 大数据-Spark (1)
- 大数据-Storm (1)
- 数据库事务-Spring事务 (0)
- elasticsearch (1)
- windows (1)
最新评论
1、九种提高AngularJS性能的方法
http://www.iteye.com/news/32507
例子1:
例子2:
http://www.iteye.com/news/32507
例子1:
<!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-8"> <script src="editor-app/libs/angular_1.2.13/angular.min.js"></script> <script src="editor-app/libs/angular_1.2.13/angular-animate.min.js"></script> <script src="test/demo.js"></script> </head> <!-- body #s --> <body > <!-- --> <h5>1、ng-model属性双向绑定“\{\{\}\}”</h5> <div ng-controller="helloCtrl"> <p>名字输入 : <input type="text" name="world" ng-model="world" /></p> <p>Hello后面输出: {{world}}</p> </div> <h5>2、ul-ol-li筛选、 排序示例</h5> <div ng-controller="phoneListCtrl"> <input ng-model="quer"/> <select ng-model="sortType"> <option value="name">按姓名</option> <option value="age">按年龄</option> </select> <ul> <li ng-repeat="phone in phones |filter:quer |orderBy:sortType"> <p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p> </li> </ul> <ol> <li ng-repeat="phone in phones |filter:quer |orderBy:sortType"> <p>{{phone.name}}--{{phone.age}}--{{phone.snippet}}--<img ng-src="{{phone.imsrc}}"/></p> </li> </ol> </div> <h5>3、简单金额统计</h5> <div ng-controller="multipleController"> 数量:<input type="number" min="0" max="10" required ng-model="num1"/> 单价:<input type="number" min="1" max="100" required ng-model="num2"/> <p>总计(默认美元形式):{{num1*num2 | currency}}</p> <p>总计(指定人民币形式):{{num1*num2 | currency:"RMB ¥"}}</p> </div> <h5>4、filter:内置过滤器;自定义过滤器</h5> <div ng-controller="filterController"> <input ng-model="lower"> <input ng-model="upper"> <p>{{ lower | lowercase }}</p> <p>{{ upper | uppercase }}</p> </div> <h5>5、指令directive示例-根据格式显示时间</h5> <div ng-controller="directiveController"> <p> 要显示的时间格式:<input ng-model="format"/></p> <p>当前时间:<span my-current-time></span></p> </div> <h5>6、</h5> <div ng-controller="showHideController"> <p><button ng-click="toggle()">显示/隐藏</button></p> <p ng-hide="myVar"> 名:<input ng-model="ming"/> 姓:<input ng-model="xing"/> ----姓名:{{xing+" "+ming}} </p> </div> <h5>7、自定义服务</h5> <div ng-controller="myController7"> <input ng-init="message='good'" ng-model="message"/> <button ng-click="callNotify(message);">notify</button> </div> <script type="text/javascript"> var app=angular.module("demoApp",[]); //demo1 app.controller("helloCtrl",function($scope){ $scope.world="angularjs text";//初始值 }); //demo2 var phoneListCtrl=['$scope','$http',function($scope,$http){ $scope.phones=[ {name:"小赵",age:"34",snippet:"行政",imsrc:"editor-app/images/bpmn-error.png"}, {name:"张域",age:"19",snippet:"法务",imsrc:"editor-app/images/datadefinition.png"}, {name:"刘芳",age:"25",snippet:"财务",imsrc:"editor-app/images/wrench.png"}, {name:"袁华",age:"46",snippet:"运营",imsrc:"editor-app/images/delete.png"}, {name:"小孙",age:"22",snippet:"技术",imsrc:"editor-app/images/bpmn-warning.png"} ]; //方式二赋值 //$http.get('test/test.json').success(function(data){ // $scope.phones=data; //}); $scope.sortType='age'; }]; //demo3 function multipleController($scope){ //初始 $scope.num1=2; $scope.num2=4; } //demo4 function filterController($scope){ //初始 $scope.lower="UPPERCASE LETTERS TO LOWERCASE"; $scope.upper="lowercase letters to uppercase"; } //demo5 function directiveController($scope){ $scope.format='yyyy-MM-dd HH:mm:ss'; } //在module模块中新建指令 app.directive('myCurrentTime',function($timeout,dateFilter){ return function(scope,element,attrs){ var format,timeoutId; function updateTime(){ element.text(dateFilter(new Date(),format)); } //$watch监听scope值的改变 scope.$watch('format',function(value){ format=value; updateTime(); }); function updateLater(){ timeoutId=$timeout(function(){ updateTime(); updateLater(); },1000); } element.bind('$destroy',function(){ $timeout.cancel(timeoutId); console.log(timeoutId); }); updateLater(); } }); //demo6 app.controller("showHideController",function($scope){ $scope.xing="雷"; $scope.ming="小风" $scope.myVar=false; $scope.toggle=function(){ $scope.myVar=!$scope.myVar; } }); //demo7--服务factory-callNotify调用自定义服务notifyService angular.module("demoApp", []).factory('notify',['$window',function(win){ var msgs=[]; return function(msg){ msgs.push(msg); if(msgs.length==3){ win.alert(msgs.join('\n')); msgs=[]; } }; }]); function myController7(scope,notifyService){ scope.callNotify=function(msg){ notifyService(msg); }; } myController7.$inject=['$scope','notify']; </script> </body> <!-- body #e --> </html>
例子2:
<!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-8"> <script src="editor-app/libs/angular_1.2.13/angular.min.js"></script> <script> var app=angular.module("demoApp",[]); app.controller("demoController",function($scope){ //初始化 $scope.productsList=[ {name:"苹果",category:"水果",other:"--"}, {name:"香蕉",category:"水果",other:"--"}, {name:"黄瓜",category:"蔬菜",other:"--"}, {name:"豆角",category:"蔬菜",other:"--"}, {name:"西瓜",category:"水果",other:"--"}, {name:"米",category:"其它",other:"--"}, {name:"白菜",category:"蔬菜",other:"--"}, {name:"油",category:"其它",other:"--"}, {name:"萝卜",category:"蔬菜",other:"--"} ]; $scope.quantity=0; $scope.price=0; //点击计算按钮 $scope.countTotalFunction=function(){ if(undefined==$scope.productName||null==$scope.productName){ alert("请选择商品名称!"); }else{ alert('商品名称:'+$scope.productName.name+",总计: "+$scope.quantity*$scope.price); } }; }); </script> </head> <body > <div style="text-align: left;margin-left: 200px;"> <h5>DEMO:购买某种商品的金额统计</h5> <div ng-controller="demoController"> <p>商品名称: <select ng-model="productName" ng-options="p.name group by p.category for p in productsList"> <option value=''>--请选择--</option> </select> </p> <p>数量:<input type="text" ng-model="quantity" required /></p> <p>单价:<input type="text" ng-model="price" required /></p> <p>自动统计金额:{{quantity*price}}</p> <button ng-click="countTotalFunction()">手动计算金额</button> </div> </div> <!-- PS: 1-$scope作用域是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,数据绑定就靠它。 $rootscope是各个controller中scope的桥梁。用$rootscope定义的值,可以在各个controller中使用。 2-AngularJS拥有许多扩展的HTML属性即指令: 如ng-app,ng-init,ng-model,ng-controller,ng-click,ng-change,ng-class, ng-show,ng-hide,ng-disabled,ng-cloak,ng-view,ng-bind, ng-include,ng-options... 3-AngularJS服务: $http $location $timeout $interval $q $routeProvider $log.... --> </body> </html>
发表评论
-
angularjs项目运行环境 及 常见问题解决
2017-01-09 10:58 1947配置angularjs项目运行环境的几个步骤 1--安装 ... -
运行angularjs项目--安装nodejs,配置项目运行环境
2016-10-10 15:45 785参考资料: http://m.blog.csdn.net/ar ... -
AngularJS tree demo
2016-04-07 14:01 30261、效果图 2、代码 js、css <scr ... -
angularJS文本框根据输入字符(文本框值)进行查询ng-keydown ng-keyup
2016-04-05 16:12 2831html: <input ... -
angularjs中My97DatePicker无法通过$scope.ngModel获取值解决
2016-03-24 17:42 11721、写一个angular自定义指令Directive(网上找的 ... -
AngularJs输出字符串换行\n或<br/>不管用时,要用ng-bind-html配合解决
2016-03-24 16:59 134401、controller /*显示条件表达式*/ var m ... -
angularjs select multiple="multiple" ng-repeat
2016-03-10 11:36 1862效果图: <!DOCTYPE html> ... -
angularjs ul li radio span ng-class ng-checked demo
2016-03-01 14:09 385效果图: 点击li中的radio,选中li中的文字; 点击li ... -
Angularjs 根据 一个select的值去设置另一个select的值
2016-02-23 14:43 1919html: <div ng-controller=&q ...
相关推荐
### AngularJS学习笔记知识点解析 #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库,虽然在本文档中作者将其称为“工具”,但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念...
**AngularJS(1.7.3)学习示例** AngularJS是Google开发的一款强大的前端JavaScript框架,用于构建动态Web应用程序。这个"AngularJS(1.7.3)学习示例"是一个基于Visual Studio 2017 (VS2017) MVC搭建的项目,特别适合...
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主...4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
### AngularJS 学习笔记 #### 一、AngularJS 概述 AngularJS 是一个用于构建动态Web应用的开源框架,由 Google 维护。它通过扩展 HTML 的功能来简化 Web 开发,并允许开发者以声明式的方式编写代码,极大地提高了...
AngularJS,是由Google...总之,这个压缩包中的资料是一个全面的AngularJS学习资源库,无论你是初学者还是有一定经验的开发者,都能从中找到有价值的信息,提升你的AngularJS技能。祝你在学习的道路上取得丰硕的成果!
综上所述,这个示例项目是一个基于Spring Boot和AngularJS的Web应用,涵盖了数据库操作、文件管理以及部署到外部Tomcat服务器的能力,为学习者提供了一个全面了解Spring Boot集成Web开发的实践案例。
在示例中,你将学习如何定义和依赖注入模块。 ### 8. 测试 AngularJS 提供了测试工具如 Karma 和 Jasmine,以便于单元测试和端到端测试。示例可能会包括如何编写和运行测试用例,确保代码的质量和稳定性。 通过...
这个"angularjs:示例代码"的资源,很可能是基于《AngularJS Up and Running》这本书中的实践示例,这本书旨在帮助开发者快速掌握AngularJS的核心概念和实践技巧。 AngularJS的核心特性包括数据绑定、依赖注入、指令...
**AngularJS API常用方法示例** AngularJS,作为一款强大的前端JavaScript框架,为开发者提供了丰富的API,用于构建交互式、动态的Web应用。本篇将详细介绍一些AngularJS API的常用方法,帮助你更好地理解和运用这...
AngularJS编程示例》是一本深入讲解AngularJS框架的电子书,它旨在帮助开发者快速理解和掌握AngularJS的核心概念与实践技巧。AngularJS是Google推出的一款强大的JavaScript MVC(Model-View-Controller)框架,它极...
### AngularJS基础知识与应用 #### 引入AngularJS AngularJS是一种开源的JavaScript框架,用于构建动态Web应用程序。为了在项目中使用AngularJS,我们首先需要将其脚本文件引入到HTML文档中。以下是一个示例: ``...
### AngularJS 学习笔记知识点总结 #### 一、AngularJS 概述 AngularJS 是由 Google 开发的一款开源 JavaScript 库,它提供了一种全新的应用程序组织与开发方式。AngularJS 的核心特性之一就是**数据双向绑定**,...
这个"angularjs学习笔记本"很可能是包含了关于AngularJS的学习资料、示例代码和教程。AngularJS的核心特性是它使用了MVC(Model-View-Controller)架构模式,提供数据绑定和依赖注入,简化了前端开发。 在AngularJS...
通过深入研究这些示例代码,你不仅可以了解AngularJS的基础知识,还能学习到最佳实践和常见模式。这些代码可以直接应用于你的项目,加速开发进程,同时提供了一个学习和调试的宝贵资源。对于初学者和有经验的开发者...
通过这个 AngularJS 示例应用程序,我们可以学习如何有效地组织和管理应用的各个部分,以及如何利用 AngularJS 的强大功能来构建动态交互的前端应用。实践中,你可以尝试扩展这个例子,比如添加更多视图、改进数据...
通过深入学习和实践这些示例,你将能够掌握AngularJS的核心技能,从而更高效地开发出功能丰富的Web应用。在实际开发过程中,结合标签"angularjs 示例",你可以将这些示例作为参考,解决遇到的实际问题,提高开发效率...
描述中的“在期间构建的带有AngularJS的示例应用”可能指的是一个教学或学习过程,或者是在某个项目开发过程中创建的。这表明该应用是为了演示或实践AngularJS的核心概念和技术,如数据绑定、指令、服务、过滤器和...
本篇文章将深入解析AngularJS入门示例——“Hello World”,帮助初学者理解其核心概念。 首先,我们来看一下示例代码: ```html <!doctype html> <title>Hello,World! <script src="angular1.2.25.js"></...