Angularjs 允许根据实际业务需要自定义指令, 通过angular全局对象下的 directive 方法实现。可以自定义属性、自定义标签、自定义功能接下来定义一个名叫custom的指令,并利用这个自定义指令来实现元素的替换html代码:<body ng-app="app"><p custom></p><custom></custom>js代码:var app = angular.module("app",[]);//自定义指令和定义控制器相似app.directive("custom",[function () {return{ //返回指令对象 restr...
上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter。 Filter简介Filter是用来格式化数据用的。Filter的基本原型( ‘|‘ 类似于Linux中的管道模式):{{ expression | filter }}Filter可以被链式使用(即连续使用多个filter):{{ expression | filter1 | filter2 | ... }}Filter也可以指定多个参数:{{ expression | filter:argument1:argument2:... }} AngularJS内建的FilterAngularJS内建了一些常用的Filter,我们一一...
转载自:http://my.oschina.net/brant/blog/419641一、启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点。我们可以把AngularJS当做一个类似jQuery的js库,我们通过<script>标签引入到HTML中,那么此时Angular就做为一个普通的DOM节点等待浏览器解析,当浏览器解析到这个节点时,发现它是一个js文件,那么浏览器会停止解析剩余的DOM节点,开始执行这...
创建服务虽然AngularJS提供了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务。你可以通过在模块中注册一个服务工厂函数,或者通过Module#factory api或者直接通过模块配置函数中的$provide api来实现。所有的服务都符合依赖注入的原则。它们用一个唯一的名字将自己注册进AngularJS的依赖注入系统(injector),并且声明需要提供给工厂函数的依赖。它们的依赖在测试中可以是虚拟的,这使得它们能很好地...
一: 以组件开发一个to-do list应用todo组件分为导入、接口定义、顶层组件、控制器、启动5个部分。app.ts://导入
import {Component} from ‘@angular/core‘;
import {bootstrap} from ‘@angular/platform-browser-dynamic‘;//接口定义interface Todo {completed: boolean;label: string;
}//顶层组件@Component({selector: ‘app‘,templateUrl: ‘./app.html‘,styles: [`ul li {list-style: none;}.completed {text-decoratio...
AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义。scope表示指令的作用域,它有三个可选值:true、false、对象{}。.directive("myDirective", function(){return {restrict: "EA",scope: true/false/{},template: "<div>{{content}}</div>"}
})true:继承父作用域且创建独立作用域;false:继承父作用域;{}:不继承父作用域且创建独立作用域...
最近在学习使用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...