在前面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...
初学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的依赖注入其关联的模块内容，使得我们能够更好的”分离关注点“，达到更好的”高内聚低耦合“。”高内聚低耦合“是来自面向对象设计原则。内聚是指模块或者对象内部的完整性，一组紧密联系的逻辑应该被封装在同一模块、对象等代...
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...
对于一般的使用者来说，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...
下面给大家说下$modal拥有一个方法：open，该方法的属性介绍： templateUrl：模态窗口的地址template：用于显示html标签scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScopecontroller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需...
指令 directive(bsPopup, function ($parse) { return { require: ngModel, restrict: A, link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem).modal(hide); return; } if (newValue == 1) { $(elem).modal(show); return; } }); } } }); <button class="btn btn-xs btn-warning" data-target="#myModal" dat...