番茄酱带你入门angular

基础概念

首先我们先了解下 angular 的几个基本概念。MVC，双向数据绑定，依赖注入，指令。

MVC

时常听说 MVC 模式，在大学学习期间，也只知道是模型，视图，控制器的分离的，能让代码和业务更清晰。并没有真正的体会到 MVC 结构是如何让代码清晰的。Angular 的 MVC 模式开发，M 就是模型（model），模型又可以分为数据模型和业务模型等，最常用的就是数据模型，将和后端交互获取数据，以及对数据的处理，独立出来，（在我们的项目中是将数据处理放到 angular 的服务中），V 即 view 视图，向用户展示的内容，C 即控制器，项目的业务逻辑放在控制器中。

双向数据绑定

传统的框架，都是单向绑定，用户想要可以将获取到的数据绑定到视图，但在想在视图中改变数据，即用户在页面中的某些操作触发了数据变化，则不能将数据传递回数据模型

而 angular 框架，通过脏检测机制，检测数据数据是否变化，同步视图和模型中的数据。

依赖注入

库和框架的区别是啥，生动形象一点，库就可以比作是仓库，里面放满工具，你要啥，就自己去取，取调用即可。或则说是一个装满各种砖块的仓库，要建什么样的房子，需要什么样子的砖块，你自己取即可。

框架可以比作是已经建好地基搭好结构的房子，你可以在这个基础上，用已有的内容建造房子，也可以自己另辟蹊径，自己定义内容，来丰富你的房子

不知道自己比喻的清不清楚，总的来说就是。库定义了很多的方法，像 jq ，将 js 封装成易用的方法，比如要进行样式的修改，你只需要通过 .addClass() 的方法，就可以向对象添加你想要的样式。框架呢，除了定义很多的方法外，还定义了很多的组件，除了这些，你还可以按照框架的规则去自定义一些自己需要的组件，在 angular 中，定义了很多的指令，服务，以及过滤器供我们使用。

我们要使用 angular 就要在我们的项目中引入 angular.min.js 的文件，在这个文件引入的时候，angular 也仅仅是库，如果我们要使用 angular 所定义的内容，组件，就需要通过依赖注入的方式，进行angular 的启动引导，将项目中所需要的组件拼接到一起，将模块依赖注入应用

指令

指令可以理解在在特定 DOM 元素上运行的函数，指令可以扩展这个元素的功能

在项目运行中，angular 会通过内置的 $compile 服务，遍历项目元素中的所有指令，并获取元素上的所有指令，将指令放到执行队列中，依次执行指令中的 link 函数，并将所有的指令的 link 函数的执行结果放倒一个复合 link 函数中，将模版和$scope链接起来，形成动态数据绑定。

启动引导

angular 想要从库变为框架，就需要通过启用引导将所有的组件拼接到一起，并对项目注入所需要的依赖。启动引导又分为自动启动引导和手动启动引导

1. 通过 ng-app 进行自动启动引导，定义ng-app 的元素即为应用的根，启动框架。如果项目中有多个 ng-app,则 angular 会找到项目的第一个 ng-app，进行项目的启动引导。

2. 通过 angular.bootstrap(element, [modules], [config]); 进行项目的手动启动引导，bootstrap 函数的第一个参数element，是 angular ，要进行启动引导的根元素。第二个参数 modules ，即为需要依赖注入的模块。