『AngularJS』一点小小的理解

AngularJS 是一个前端的以Javascript为主的MVC框架。与AngularJS相类似的还有EmberJS。

随着时代在进步，各种各样的开发理念与开发框架不断的提出与发展，而就目前来说，除了游戏、IM（类似QQ）、Office这类软件之外，新出的软件应用开始出现两个方向，一个是以Web为主的Web APP，一个是以移动端为主的移动APP。且，现有也有一种声音认为Web APP早晚会取代移动端原生APP，从而一统计算机软件的应用方式。暂且不论这种说法是否会成为现实，Web APP的火爆可见一斑。

三年前，我编写的Web软件，还都是以后台为主，前台顶多用一下jQuery来进行几个简单的动态效果。两年前，我接触ExtJS，知道还有这么一种Javascript框架能够实现完整的UI订制，从而只需要使用Ajax传数据就可以了。

现在（实际上已经出来很长时间了），我了解到EmberJS以及AngularJS这种将前端的UI构建过程拆分为之前只在后端使用过的MVC的模式。从另一个角度说，现在是把原先的MVC中的V再度拆分一个MVC的应用。

所以，我认为，无论从哪个角度来考虑，单独的将Angular提出来，进行思考和学习是很有必要的。

AngularJS是什么？

AngularJS是一个由Google支持的Web App前端MVC框架。

AngularJS包括什么？

从AngularJS的官方文档中看到，它主要包括如下几个概念：

• Template —— 模板
• Directive —— 指令
• Filter —— 过滤器
• Controller —— 控制器
• Scope —— 范围
• Service —— 服务
• Module —— 模块

Template Directive Filter这三个主要与“视图”有关。 Controller Scope Service这两个主要与“控制器有关”。 Module用于结构化项目。

注意：就像上面看到的那样，在AngularJS中，没有找到有关Model层的东西！

下面是对各个概念的理解以及如何应用的想法。

• Directive是一种属性，写在HTML标签当中，用户标识出模板中一些特殊的东西。比如用于显示“部分模板”的<div ng-view></div>。
• Filter根据官网的解释，是用于控制视图中的元素如何显示，或者说显示成什么样的。
• Template是视图层的具体载体，在Template中可以写一些辅助的逻辑，如ng-if等
• Controller是控制器，根据官方文档的建议，不应该在Controller中写太复杂的东东，在控制器中只写有关业务逻辑的就可以了。
• Scope，这个东西在看控制器的介绍的时候看到，在个人理解来看，应该是主要用于进行视图与控制器的数据操作，或者认为是用于打通视图层与控制器的一个东东。
• 由于文档中写到，不建议在控制器中写太复杂的逻辑，所以我们应该把所有的可供复用的逻辑写到Service（服务）当中。然后我们可以利用AngularJS框架本身的DI（依赖注入）功能将Service注入到具体的控制器中。
• Module，这个东西类似Java的类库的概念，我们写的所有的控制器、过滤器、服务等都得加到Module中，没什么好说的~

这里要注意一个问题——模型。

按照个人的理解，不论AngularJS再怎样，其数据的直接来源还是服务器，而服务器传数据的话，现在比较流行使用JSON格式，所以，就模型层来说，我们只要利用Service从服务器中获取数据，然后将其解析给在Controller中对应的Scope就行了。剩下的就是AngularJS内部处理，将数据自动绑定到前台了~

参考：

• 官方文档
• 官方示例

版权声明：

作者：丛峻峰
出处：http://www.cnblogs.com/sitemanager/
微博：http://weibo.com/skylercong
Github：https://github.com/congjf

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。