前言 开发中经常会遇到这样的需求，一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。在这给大家介绍三种方法来实现，大家可以根据自己的需求来选择方式，下面来看看。 第一种：通过数据的双向绑定（不推荐） <div ng-controller="firstController"><div ng-class="{{className}}"></div></div> <script>var app=angular.m...
AngularJS支持用户自定义标签属性，在不需要使用DOM节点操作的情况下，添加自定义的内容。 前面提到AngularJS的四大特性：1 MVC2 模块化3 指令4 双向数据绑定 下面将会介绍如下的内容：1 如何自定义指令2 自定义指令的使用3 自定义指令的内嵌使用如何自定义指令：Angular是基于模块的框架，因此上来肯定要创建一个自己的模块： var myAppModule = angular.module("myApp",[]);然后在此模块基础上创建指令directive myAppModul...
前面了解了AngularJS的使用方法，这里就简单的写个小程序，实现查询过滤以及排序的功能。 本程序中可以了解到：1 angularjs的过滤器2 ng-repeat的使用方法3 控制器的使用4 数据的绑定程序设计分析首先，如果要是先查询过滤，就要使用到AngularJS中的 过滤器filter 了。直接在表达式的后面使用管道命令符 | ，按照下面的写法就可以达到一个过滤的效果： {{ persons | filter:query }}通过使用filter实现过滤操作，query是查询过滤时...
AngularJS有几大特性，比如：1 MVC2 模块化3 指令系统4 双向数据绑定 那么本篇就来看看AngularJS的模块化。首先先说一下为什么要实现模块化：1 增加了模块的可重用性2 通过定义模块，实现加载顺序的自定义3 在单元测试中，不必加载所有的内容之前做的几个例子，控制器的代码直接写在script标签里面，这样声明的函数都是全局的，显然不是一个最好的选择。下面看看如何进行模块化： <script type="text/javascript">var myAppM...
前面了解了AngularJS的基本用法，这里就跟着PDF一起学习下表达式的相关内容。在AngularJS中的表达式，与js中并不完全相同。首先它的表达式要放在{{}}才能使用，其次相对于javascript中的表达式概念，它有以下几点不同：1 作用域不同在javascript中默认的作用于是window，但是在angularJs中就不同了。它使用$scope控制作用于。2 允许未定义的值在angularjs中，如果使用了未定义的表达式，也不会出现错误，直接返回空值。3 过滤器可以...
先说说什么是Promise，什么是$q吧。Promise是一种异步处理模式，有很多的实现方式，比如著名的Kris Kwals Q还有JQuery的Deffered。 什么是Promise以前了解过Ajax的都能体会到回调的痛苦，同步的代码很容易调试，但是异步回调的代码，会让开发者陷入泥潭，无法跟踪，比如： funA(arg1,arg2,function(){funcB(arg1,arg2,function(){funcC(arg1,arg2,function(){xxxx....})}) }) 本身嵌套就已经很不容易理解了，加上不知何时才触发回...
背景介绍这例子是视频中的例子，有一个动感超人，有三种能力，力量strength，速度speed，发光light。这三种能力作为三种属性，定义动感超人作为一个标签，只要添加对应的属性就能拥有该能力。为了便于结果的展示，为标签添加鼠标的响应事件，当鼠标移动到对应的标签上就会触发一个方法，打印出具备的能力。程序分析html部分的代码如下： <div><superman>nothing!</superman><superman strength >strength!</superman><superm...
前言 RxJs提供的核心是Observable对象，它是一个使用可观察数据序列实现组合异步和事件编程。 跟这个很类似的异步编程模型是Promise，Promise是基于状态变化的异步模型，一旦由等待状态进入成功或失败状态便不能再次修改，当状态变化时订阅者只能够拿到一个值；而Observable是基于序列的异步编程模型，随着序列的变化，订阅者可以持续不断的获取新的值。而且Promise只提供回话机制，并没有更多的操作来支持对结果的复杂处理，而Obs...
Angularjs CURD 前言 基于一个手机端的项目使用了angularjs，硬着头皮去用，有很多的疑问还需要一一去验证，刚开始总是感觉找不到北，总是感觉有很多概念，而且似乎ng既夹杂MVC又夹杂MVVM的思想， 忙里偷闲敲了个简单的CURD demo。 当然顺着这个demo还可以延伸很多知识点，比如： 带分页查询、连接后台数据库、调用WebApi、分层使用Servcice、Factory。 效果图 <script type="text/javascript">var app=angular.module(my...
前提首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular.js"></script> <script src="../../bower_components/angular-route/angular-route.js"></script>这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。 (function(window, angular, undefined) { use strict; ... ngRouteModule.dire...
推断式注入这种注入方式，需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作，就会导致注入失败。app.controller("myCtrl1", function($scope,hello1,hello2){$scope.hello = function(){hello1.hello();hello2.hello();}}); 标记式注入这种注入方式，需要设置一个依赖数组，数组内是依赖的服务名字，在函数参数中，可以随意设置参数名称，但是必须保证顺序的一致性。 var myCtrl2 = function($scope,hello1,hello2){$s...
angular提供了一个可以复制对象的api——copy(source,destination)，它会对source对象执行深拷贝。 使用时需要注意下面几点：如果只有一个参数（没有指定拷贝的对象），则返回一个拷贝对象如果指定了destination,则会深拷贝对象复制给destination如果source是null或者undefined，那么会直接返回source如果source就是desitination，那么会报错。下面看看使用样例：<html> <head><meta http-equiv="Content-Type" content="text/html...
使用情况1 首先，所有满足 a === 3 这种的对象，在angular.equals(a,b)中都会返回真 2 所有对象的类型，以及属性值都相同的，也会返回真 3 NaN和NaN也会返回真（在javascript中，返回的是假） 4 正则也会返回真（在javascirpt，/abc/ /abc/被认为是不相等的）样例<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js">...
对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。 绑定初始化通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！ <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body ng-app="myApp...
对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法：angular.module(myApp, []) .directive(myDirective, function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scop...