最近在学习使用angular,慢慢从jquery ui转型到用ng开发，发现了很多不同点，继续学习吧；首先创建一个服务，以便在项目中的controller中引用，服务有几种存在形式，factory();service();constant();value();provider();其中provider是最基础的，其他服务都是基于这个写的，具体区别这里就不展开了，大家可以看看源码；服务是各个controller之间通话的重要形式，在实际项目中会用的很多，下面是代码：angular.module(yourApp).facto...
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。在AngularJS的实际项目中，经常需要处理多个$http请求，每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。 1.处理多个$http请求 angular.module(app,[]) .controller(AppCtrl, function AppCtrl(myService){ var app = this; myService.getAll().then(function(info){ app.myInfo = info; }) }) .service(myService, ...
这次给大家带来angularjs自定义缓存使用案例详解，angularjs自定义缓存使用的注意事项有哪些，下面就是实战案例，一起来看一下。一、什么是缓存一个缓存就是一个组件，它可以透明地存储数据，以便未来可以更快地服务于请求。缓存能够服务的请求越多，整体系统性能就提升得越多。二、Angular 中的缓存2.1 $cacheFactory 简介$cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部， $cacheFactory 会创建一个默认的缓存...
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。在AngularJS的实际项目中，经常需要处理多个$http请求，每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。 1.处理多个$http请求angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.getAll().then(function(info){ app.myInfo = info; }) }) .service('myServi...
这次给大家带来angularjs的缓存详解，使用angularjs缓存的注意事项有哪些，下面就是实战案例，一起来看一下。一、什么是缓存一个缓存就是一个组件，它可以透明地存储数据，以便未来可以更快地服务于请求。缓存能够服务的请求越多，整体系统性能就提升得越多。二、Angular 中的缓存2.1 $cacheFactory 简介$cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部， $cacheFactory 会创建一个默认的缓存对象，即使我们并没...
一、什么是缓存 一个缓存就是一个组件，它可以透明地存储数据，以便未来可以更快地服务于请求。 缓存能够服务的请求越多，整体系统性能就提升得越多。 二、Angular 中的缓存 2.1 $cacheFactory 简介 $cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部， $cacheFactory 会创建一个默认的缓存对象，即使我们并没有显示地创建。 要创建一个缓存对象，可以使用 $cacheFactory 通过一个ID创建一个缓存： var cache = $c...
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。 AngularJS的日期格式化有两种形式，一种是在HTML页面，一种是在JS代码里，都是用到AngularJS的过滤器$filter。 HTML: date_expression 即 你在$scope中设的date类型变量（注意，一定是date object才正确）, 也是要...
现在Angular CLI在npm下通过@angular/cli来替代angular-cli，并且它只支持Node6.9.0或更高的版本，npm 3或更高的版本。所以在升级angular cli之前，请先升级node和npm。如果你使用Angular CLI beta.28或更低的版本，你需要先卸载掉 angular-cli包：npm uninstall -g angular-cli npm uninstall --save-dev angular-cli如果你忘记了更新npm，执行上面第一行命令时，会提示你将npn更新到最新版本，npm更新到最新版本后，再执行上面两...
AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。 事件AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。ng-click ng-dbl-click ng-mousedown ng-mouseup ng-mouseenter ng-m...
这次给大家带来AngularJS注册表单验证的步奏详解，AngularJS注册表单验证的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery.1.12.4.js"></script><!--jquery样式--><script type="text/javascript">//email验证$(function(){//input标签获取焦点/失去焦点时调用方法$(":input[name=email]").blur(func...
AngularJS 控制器AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器AngularJS 应用程序被控制器控制。ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.j...
Angular 非常模块化，模块化的一个非常有用的特性就是模块作为延迟加载点。延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源。这样 Angular 就不需要在第一个界面从服务器下载所有的文件，直到您请求它，才下载相应的模块。这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助。而且它可以很容易设置。 这里将使用一个简单示例来演示这个特性是如何工作的。将应用拆分为多个不同的模块，可以在需要的时候再进行延...
开始学习AngularJS表单验证： 常用的表单验证指令 1. 必填项验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：代码如下:<<input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：代码如下:<<input type="text" ng-minlength="5" /> 3. 最大长度验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指...
前面的文章说道了click事件，与其类似的mouseover以及mousemove等等。下面看看selected、change、copy等运用在表单的事件吧。 selected <div ng-controller="Aaa"><input type="checkbox" ng-model="aaa" value="{{aaa}}"><select><option>11111</option><option ng-selected="aaa">22222</option><option>33333</option></select></div><script type="text/javascript">var m1 = angular.module(myApp,[]);m1.controller(Aaa,[$s...
本文主要和大家介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下，希望能帮助到大家。在Angular的模板中遍历一个集合（collection）的时候你会这样写：<ul><li *ngFor="let item of collection">{{item.id}}</li> </ul>有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修改哪些该删除。结果就是，Angular会把该集合...