AngularJS 在实际应用中优缺点

AngularJS 在实际应用中优点:模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令:是一个比较完善的前端MV*框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能:自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,可以通过阅读源代码来找到某些我们需要的东西:ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开…

《AngularJS权威教程》中关于指令双向数据绑定的理解

在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具体代码如下: <!doctype html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-…

Angularjs学习---ubuntu12.04中karma安装配置

Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结 karma启动时出现了很多问题: 1.安装karma前提条件安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs.npm和karma 2.安装karma步骤 karma官方指导教程:http://karma-runner.github.io/0.…

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式模板中可以使用的东西包括以下…

用AngularJS开发的过程中如何查看Scope内容

scope的继承就好比JS的原型链继承,深入理解Scope:http://www.lovelucy.info/understanding-scopes-in-angularjs.html 通过查看官网文档:http://docs.angularjs.cn/guide/scope(这个链接不知道为什么直接点击会显示Not Found,首先访问http://docs.angularjs.cn/api,点击导航栏的“英文文档”在下拉菜单中选择“Developer Guide”,左边导航栏中选择“Sco…

angularjs学习笔记3-directive中scope的绑定修饰符

在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地方之间发生相互影响,通常这个scope可以被定义为true或者对象,当这个scope被定义为true时,代表这个指令拥有独立的scope,它被多次使用在多个地方之间不会相互影响,例如: HTML代码 <!doctype html> <html ng-app="MyModule&qu…

Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结

karma启动时出现了很多问题: 1.安装karma前提条件安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs.npm和karma 2.安装karma步骤 karma官方指导教程:http://karma-runner.github.io/0.12/intro/installation.html 1).首先执行下面命令: npm in…

【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示

做项目的时候遇到的问题 1.问题描述用户在表单某个值输入多个空格,例如:A B,保存至服务器在列表查询页面中使用bg-bind的指令单向绑定,结果展示位A B,连续的空格被替换为单个空格 2.定位分析 2.1 从用户输入到最终查询展示经理太多环节,可能转换的地方有: 输入时的事件中,请求服务器前,http传输,服务器接收解析,服务器处理,服务器保存至数据库,数据库查询服务,查询服务返回,界面展示因此逆向定位问题好些通过Chrome中network看到服务器返回的数据带有多个空格…

【AngularJS】解决ng-if中的ng-model值无效的问题(转)

from:http://blog.csdn.net/u013451157/article/details/60866210 与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意. [html] view plain copy <!DOCTYPE html> <html ng-a…

转：在使用angularjs过程，ng-repeat中track by的作用

转载:链接 <div ng-repeat="links in slides"> <div ng-repeat="link in links track by $index">{{link.name}}</div> </div> Error: [ngRepeat:dupes]这个出错提示具体到题主的情况,意思是指数组中有2个以上的相同数字.ngRepeat不允许collection中存在两个相同Id的对象 For exa…

AngularJS如何修改URL中的参数

一. 获取url的相关方法(不修改URL): 1.获取当前完整的url路径 var absurl = $location.absUrl(); //http://172.16.0.88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值): var url = $location.url(); // 结果:/homePage?id=10&a=100 3. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数)…

AngularJs在ng-click函数中如何获取代表当前元素的DOM对象

<!DOCTYPE html> <html> <head> <title></title> <script src="lib/jquery/jquery-1.10.2.min.js"></script> <script src="lib/angular/angular.min.js"></script> </head> <body ng-ap…

基于angularJs坐标转换指令(经纬度中的度分秒转化为小数形式 )

最近项目中,需要用户输入经纬度信息,因为数据库设计的时候,不可能分三个字段来存储这种信息,只能用double类型来进行存储. 计算公式 double r=度+分/60+秒/3600 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html…

AngularJs在ng-click函数中获取代表当前元素的DOM对象

html代码 <div ng-click="test($event)">111</div> Controllers.js $scope.test= function($event){ if($event.target.className.indexOf("hover")>-1){ //判断是否存在class样式 $($event.target).removeClass("hover"); }else{ $($even…

黄聪：AngularJS如何在filter中相互调用filter

调用方式如下: app.filter('filter2', function( $filter ) { return function( input) { return $filter('filter1')( input ); } });…

AngularJS中的方法参数的问题

在使用AngularJS开发的过程中出现了如下的问题,一次贴记录下. 感觉也不能说是AngularJS的语法,应该说是JS里面的处理流程应该就是这样子,我现在想通过前端页面传递值到后端(通过方法传递),可是发现这个在后端接收的时候不能直接使用参数,必须使用形参.id(比如我需要传递id,那么我就必须item.id) <a class="btn default btn-xs black" ng-click="deleteSchool({id:item.id})"…

AngularJS中的控制器和作用域

欢迎大家指导与讨论 : ) 一. 作用域的事件传播一 . 1 修改的传播关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算.比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算. <input…

AngularJS 1.3中的一次性数据绑定(one-time bindings)

点击查看AngularJS系列目录谈谈AngularJS 1.3中的一次性数据绑定(one-time bindings) 不久之前,AngularJS 1.3版本正式发布,其中添加了很多的性特性,同时也对之前的一些bug做了修复,最重要的是其中包含一些突破性的变化.其中最重要的一项就是添加了一次性数据绑定. 等等,一次性数据绑定?这听起来似乎和AngularJS一直宣扬的双向数据绑定思想完全背离了吗?当然,AngularJS的双向数据绑定一直是AngularJS最重要的特性之一.然而,为了实现…

AngularJS 中的 factory、 service 和 provider区别，简单易懂

转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . service 和 provider 感到疑惑, 这三种都是提供服务的方式, 他们到底有什么区别呢? factory factory 可以认为是设计模式中的工厂方法, 就是你提供一个方法, 该方法返回一个对象的实例, 对于 AngularJS 的 factory 来说, 就是先定义一个对象, 给这个对象添加…

AngularJS中的$http缓存以及处理多个$http请求

在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. ■ 处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.getAll().then(function(info){ app.myInfo…

深入了解angularjs中的$digest与$apply方法，从区别聊到使用优化

壹 ❀ 引如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope)作为链接控制器(controller)与视图(view)之间的桥梁,除了绑定数据监听事件外,一旦有数据发生改变,scope还兼顾了脏检测更新视图的职责,这是我们宏观的理解. 这就引发了一系列的问题,以点击事件为例,为什么在angularjs中用原生click事件达不到更新视图的效果?ng-click…

AngularJS 脏检查深入分析

写在开头关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比较,所以非常损耗性能. 这是大错而特错的.我甚至在新浪前端面试的时候胡说一通,现在想来真是羞愧难当! 没有深入了解就信口开河实在难堪大任. 最后被拒也是理所当然. 在剖析之前,非常感谢坐镇苏宁的徐飞,现在已经不在苏宁了,我也是在他翻译的文章(Build Your own AngularJS)和博客才略懂一二. 徐飞关于知乎问题国内前端团队分布和前景是怎样的?的回答…

《AngularJS深度剖析与最佳实践》简介

由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持shuang_lang_shuo[破狼]微信号,同时也欢迎大家的高质量文章的投稿. 在2015年一年时间中,我.雪狼大叔.彭洪伟一起共同编写了<AngularJS深度剖析与最佳实践>这本前端Angular.js框架的进阶书籍.在写作期间也得到很多人的支持,特别是在Angularjs中文社区群中的各位群…

AngularJS 模块& 表单

模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl"): <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app…

Angularjs学习---官方phonecat实例学习angularjs step0 step1

接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载angular-phonecat 使用git clone phonecat: git clone --depth= https://github.com/angular/angular-phonecat.git 可以把--depth=14去掉,这里是拉最新的14个commit. The --dept…