angular的双向数据绑定，个人理解是，通过model建立数据模型，那么视图上的数据就会对应存储在angular程序里，视图上的数据变化会同步到model，model的数据改变也会同步到视图。 下面的demo演示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>hello, AngularJS!</title><script src="angular.js"></script> </head> <body><div ng-app><!-- ng-model指令将表单的value绑定到model的username变量--><inpu...
我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码，发现，我去，报错了，我一开始还以为是百度地图跟angular有冲突，然后我就去搜索啊，发现angular也有一个百度地图插件，无奈我用了报错了，网上说要用angular2版本才能兼容，但是我又不会下载2版本，所以我就放弃了，然后呢，我又去解决我一开始的那个错误了，首先来说一下百度地图怎么用吧，很简单，上代码 首先引入js <script type="text/java...
AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码，创建可测试组件，然后将它们变成可重用组件。 Directive是一组独立的JavaScript、HTML和CSS，它们封装了一个特定的行为，它将成为将来创建的Web组件的组成部分，我们可以在各种应用中重用这些组件。在创建之后，我们可以直接通过一个HTML标签、自定义属性或CSS类、甚至可以是HTML注释，来执行一个Directive。 这一篇教程将介绍如何创建一个‘...
factory用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。 app.controller(myFactoryCtrl, function($scope, myFactory){$scope.artist = myFactory.getArtis(); }); app.factory(myFactory, function(){var _artist = ;var service = {};service.getArtist = function(){return _artist;}return service; })...
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量，其值为class name，形如： function ctr($scope){$scope.test =“classname”; }<div class=”{{test}}”></div...
前言 相信大家都知道过滤器的使用：一种是在html中的使用，一种是在js代码中的使用，下面我们来通过实例深入了解。 实例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤器</title> <script src="day2/src/angular.js"></script> <style type="text/css"> </style> </head> <body> <div ng-app="fristApp"> <div ng-controller="fristController"> <!--多个过滤器之间用 | 链接--> <!--参数的实质就是把参...
AngularJS另一个特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。通过使用管道，可以便于双向的数据绑定中视图的展现。过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。实现方式下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]);接下来在模块的基础上，创建过滤器：...
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 过滤器可以...
背景介绍这例子是视频中的例子，有一个动感超人，有三种能力，力量strength，速度speed，发光light。这三种能力作为三种属性，定义动感超人作为一个标签，只要添加对应的属性就能拥有该能力。为了便于结果的展示，为标签添加鼠标的响应事件，当鼠标移动到对应的标签上就会触发一个方法，打印出具备的能力。程序分析html部分的代码如下： <div><superman>nothing!</superman><superman strength >strength!</superman><superm...
直接上代码 <!DOCTYPE html> <html> <head> <meta name="description" content="[Ngrepeat in obj and arr]"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script><meta charset="utf-8"><title>JS Bin</title> </head> <body><div ng-app="myApp"><div ng-controller="testCtrl">{{test1}}<div><label for="" ng-repeat="item in list1">{{item.id}} -- {{item.value}}</label><p>...
初学angularJS 闲暇之余做了个小案例。 功能：计算购物车商品的价格，以及删除购物车商品。 以下是完整案例（jQuery和angularjs需要自己引入） <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{cursor:pointer} </style> <script src="js/jquery-1.11.1.js"></script> <script src="js/angular.min.js"></script><script>var A=angular.module(myApp,[]); //购...
module是angular中重要的模块组织方式，它提供了将一组内聚的业务组件（controller、service、filter、directive…）封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装，然后利用module的依赖注入其关联的模块内容，使得我们能够更好的”分离关注点“，达到更好的”高内聚低耦合“。”高内聚低耦合“是来自面向对象设计原则。内聚是指模块或者对象内部的完整性，一组紧密联系的逻辑应该被封装在同一模块、对象等代...