aty

以前项目都是使用JQuery和原始的javascript，最近参加一个项目需要用到AngularJS、RequireJS等比较潮的框架。这里写一些博客，记录自己的学习过程，虽然冠以原创之名，其实都是参考网上的一些资料，加上自己的一些理解。再没有熟悉AngularJS之前，估计也不出什么高质量的文章，只能算是学习笔记和备忘录。

angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide是通过改变CSS的display属性值来实现显示或隐藏的。ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。当一个元素被ng-if

在angularjs中通过angular.element(dom).scope()可以拿到某个dom元素关联的作用域，从而可以访问$scope中的属性和方法。但是在ng-controller函数之外修改$scope中的数据，angular的$scope是不会自动刷新的，即双向绑定特性失效。 var app = angular.module('app', []

$injector、$rootScope和$scope是angularJS框架中比较重要的东西，理清它们之间的关系，对我们后续学习和理解angularJS框架都非常有用。1、$injector其实是一个IOC容器，包含了很多服务(类似于spring框架中的bean)，其它代码能够通过 $injector.get("serviceName")的方式，从injector中获取所需要的服务。2、scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链。

这是因为angular.element()这个API并不能支持类似jquery的选择器，也就是说angular.element()并不支持selector。最好引入JQuery框架，因为jQuery框架选择元素实在是太方便了。如果我们确实不想使用jQuery，那么可以使用HTML5中的document.querySelector()，这个API是支持选择器的。有一点特别需要注意：如果页面中使用了jQuery和angular，那么一定要先加载jQuery框架，然后再加载angular。

但是有的时候我们需要动态增加controller，比如我们的项目中1个页面是由各种控件组成的，比如按钮、文本框等都是我们封装的一个控件，每个控件都有自己的scope，也就是说每个控件都有自己的controller。很明显有些控件需要跟随页面ready之后加载(初始化)，但是有的控件可能会在页面ready之后再加载。项目中我们每一个page，都是一个angularjs模块。这就要求我们能够在页面ready之后，动态注册和调用新的controller。

项目中使用了JQuery和AngularJS框架，最近定位一个问题，原因就是JQuery Ready写在了angularJS controller之前，导致JQuery选择器无法选中需要的元素(因为angularJS controller还没有初始化，dom元素的class属性没有被添加)。于是就引出了一个问题，jquery和angularjs谁先执行谁后执行的问题。当然最好我们编写的代码不要依赖于这种顺序，依赖于某些顺序的代码更容易出错。可以可以看到:JQuery Ready和angularJS cont

如果我们使用了angularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这个错误没有太大影响，但是在日志中看起来还是很不爽的，日志中记录的异常或者错误，就应该是需要关注和解决的问题，否则就没有必要出现在日志中了。这个错误其实很好理解：angularJS框架本身已经在做脏数据检测了，我们没有必要再手动调用$apply或者$digest。这里自然而然出现了一个疑问：什么时候需要我们手动调用$apply或者$digest，什么时候不需要呢？

我们给$scope.listItems赋值之后，angularJS的双向绑定特性会将变化刷新到html页面上，但是之后的js代码是无法立刻获取到界面最新的dom，因为刷新dom是需要时间的，所以我们延时200ms之后就没有问题了。可以看到同时使用angularJS和jQuery的时候容易出现这种顺序问题，jQuery的核心是操作界面上的dom，angularjs核心是操作scope中的数据。angularJS会根据scope中数据的变化，自动刷新dom(对dom进行增、删、改)。显然这种刷新是需要时间的，正

我们可以使用ng-repeat指令遍历一个javascript数组，当数组中有重复元素的时候,angularjs会报错:Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in user

由于angularjs数据的双向绑定特性，当scope中的数据发生改变的时候，会自动刷新界面。当点击first按钮的时候，scope中的dataList数据发生了变化，界面会自动刷新。如果要实现dom的刷新有2种方式：方式一：删除之前所有存在的dom，然后重新生成dom。方式二：重用之前的dom元素，仅仅更新dom元素的属性。在没有使用track by的情况下，angular采用的是方式一，这一点可以通过我们注册的DOMNodeRemoved事件处理函数得到证实。

ng-controller指令会创建一个新的作用域scope。我们可以使用angular.element(domElement).scope()方法来获得某一个DOM元素相关联的作用域。可以看到scope0和scope1中都有一个buttons属性，这个属性就是从父作用域下继承得到的，很类似于javascript的原型链。也就是说如果我们想在childScope中修改parentScope中某个属性的值，那么该属性一定不能是javascript基本数据类型，一定要是对象类型。而且不能直接通过=进行赋值修改，

之前博客，很简单的就实现了模型数据和页面显示的自动绑定。现在我们使用控制器，给模型赋初始值。如果使用jquery来实现变量赋初值，需要在页面加载完成后执行$("#target").attr("value",selfValue);使用AngularJS代码如下： Hello,World!

ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。如果想要实现自动加载，那么就不能让ng-app带有属性值。 div1:{{1+3*2}} 1、不含ng-app，无法自动加载，这个比较好理解。 div1:{{1+

之前博客 （三）ng-app的使用困惑和angularJS框架的自动加载 提出了使用ng-app指令的情况。之前觉得出现第4和第5种情况很奇怪，因为只看到了现象，没有看到本质。JS错误，最直观的表现方式就是：弹出一个非常不友好的JS错误窗口。当脚本出现了未捕获的错误，浏览器才会弹出错误提示。还有一种比较隐晦的表示：在浏览器的控制台输出错误信息。这提示我们：使用JS框架的时候，一定要用下F12看

之前我们看到使用ng-app指令，可以实现模块的自动加载。现在我们看下，angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。 // 创建moudle1 var rootMoudle = angular.module('moudle1', []); rootMoudle.controller("controller1

现在我们看下

依赖注入（DI）的好处不再赘言，使用过spring框架的都知道。angularjs作为前台js框架，也提供了对DI的支持，这是javascript/jquery不具备的特性。angularjs中与DI相关有angular.module()、angular.injector()、 $injector、$provide。对于一个DI容器来说，必须具备3个要素：服务的注册、依赖关系的声明、对象的获取。比如spring中，服务的注册是通过xml配置文件的<bean>标签或是注解@Repository、@Servic

之前写的第一篇angularJS入门文章 ，介绍ng-model的时候提到：使用angularJS的双向数据绑定机制，不需要我们编写繁琐的代码来实现同样的功能。现在我们看一个比较震撼的例子，看看angularJS是如何减少我们在前端开发中的繁琐劳动的。越是感受到框架功能的强大，越是能够激发学习的兴趣和动力。

angularjs中提供的ng-include指令，很类似于JSP中的用来将多个子页面合并到同一个父页面中，避免父页面过大，可读性差，不好维护。IE下的提示有些晦涩，不过chrome提示很明显：不能跨域访问。通过上面的错误提示，可以看到:使用ng-include指令的时候，会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的parent.html，并没有通过web容器访问，所以存在跨域访问问题，加载child.html也就失败了。解决办法很简单：将代码部署到tomcat等web容器下

最近在开发项目的时候，发现了AngularJS一个很好玩的特性。我们知道AngularJS的scope存在父子关系，当我们通过scope.$apply()手动刷新子作用域的时候，父作用域也会被刷新；反过来也是如此。