angularJs小入门

AngularJs小入门

AngularJS是一款由Google公司开发维护的前端框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。

1 特点

AngularJS与jQuery的区别。

jQuery更准确来说只是一个库，封装了许多函数帮我们完成单独的功能，其核心思想是简化DOM操作时所使用的写法、帮我们做兼容性处理等。我们写代码时，思路还是自己的思路，只不过写法更简便了。

AngularJS则一个框架，它帮我们搭建好了开发某类特定应用（网页）所需要的环境，我们写代码时需要以它规定的思路来写。那么，AngularJs的思路是什么呢？把界面和指定的数据对象同步起来，修改其中一方，另一方跟着改变。

这种思路的代码一开始接触比较别扭，但是它更加适合于构建复杂的、代码量更大的项目。

2 下载与使用

1. 下载
   
   1. 从官方网站上下载。
   2. 使用npm install --save angular命令。
2. 使用
   
   1. 引入angularjs文件
   2. 用自定义属性ng-app来声明应用的边界，所谓的应用边界指的就是angularjs在网页上生效的范围。

3 基础概念

实际上，AngularJs的思路很简单。

常规情况下，我们想要修改页面上显示的内容，需要使用各种DOM操作。浏览器把显示在屏幕上的标签抽象成了一个个DOM对象，我们操作DOM对象的属性，就能控制屏幕上的标签。

而AngularJs会在此基础上更进一步，它会把DOM对象上的部分属性，抽象到一个数据对象上，我们对这个数据对象进行操作，就能控制DOM对象，进一步控制页面显示。

如图：

（注意：用AngularJs时，程序员只是操作对象而已，并没有操作DOM。）

简单来讲，Angular的核心就在于同步二字上。

什么是同步？两个事物建立起某种联系，一个发生变化，另外一个也就跟着发生变化。

页面上的标签和DOM对象有联系，DOM对象和AngularJs提供的数据对象，也有联系。而且，这种联系如何建立起来，还是我们程序员来指定的。

比如这段代码：

<div>
    短消息：<span ng-bind="data.msg"></span>
</div>

我们就用ng-bind这个自定义属性，在span标签的内容和数据对象上data.msg这条数据联系到了一起，data.msg是什么，span标签里面就会显示什么。

4 我的第一个AngularJs程序

5 AngularJs的指令

所谓的指令，就是AngularJs“给某个标签打标记”的方式。不打标记，AngularJs就不知道如何去同步界面和数据，应该把数据同步到界面的什么地方上去。

接下来，我们来学习一些用AngularJs在界面上打标记的方式。

1. 作用域类：
   
   1. ng-app
2. 内容类：
   
   1. ng-bind
   2. 插值语法({{}})
   3. ng-model
3. 事件类：
   
   1. ng-click、ng-dblclick
   2. ng-blur、ng-focus等
   3. 其他
4. 样式类：
   
   1. ng-class
   2. ng-style
   3. ng-hide与ng-show
5. 仿流程控制类：
   
   1. ng-if
   2. ng-switch
   3. ng-repeat