AngularJs（二）设计思想和常用功能

2.       AngularJs设计思想和常用功能

本章将会简单介绍AngularJS的一些常用功能，让读者明白不同的应用场景应该使用Angular的哪些功能。以及阐述AngularJS的设计思想，避免开发者陷入某些误区。

 

2.1.       调用AngularJS

一定要在标签中加入ng-app指令，用来告诉Angular它所负责的Dom部分。ng-app之下的Dom树就是Angular管理的部分。

 

2.2.       MVC

这是Angular的MVC层次结构图，箭头方向代表数据绑定的方向。

View层就是用于表现的HTML和CSS

Model层有点类似于Java里面的POJO，都是用来存放数据，只不过放在Js里面不应该用类的形式体现。

Controller层则用来做一些数据操作。

工作流程大概如下：

1.      用户在浏览过程中产生一些数据，或者触发某些事件，使得Model中保存的数据发生了变化

2.      Controller可以操作Model，并且和服务器交互

3.      和服务器交互完成之后，Controller修改Model的数据，Angular把数据更新到视图，实现双向绑定。

Controller使用过程中的注意事项：

(1) 不要试图去复用controller，一个控制器一般只负责一小块视图；

  (2) 不要在controller中操作DOM，这不是控制器的职责；

  (3) 不要在controller中做数据格式化，ng有很好的表单控件；

  (4) 不要在controller中做数据过滤，ng有$filter服务；

  (5) controller一般是不会互相调用的，控制器之间的交互会通过事件进行。

Controller的职责：

1.      为应用中的模型设置初始状态。

2.      通过 $scope 对象把数据模型和函数暴露给视图（UI 模板）。

3.      监视模型其余部分的变化，并采取相应的动作

 

 

 

2.3.       模板和数据绑定

基本的运作流程如下。

1．用户请求应用起始页。

2．用户的浏览器向服务器发起一次 HTTP 连接，然后加载index.html 页面，这个页 面里面包含了模板。

3．Angular 被加载到页面中，等待页面加载完成，然后查找 ng-app指令，用来定义 模板边界。

4．Angular 遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执 行一些 DOM 操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会 启动起来，并且模板被转换成了 DOM 视图。

5．连接到服务器去加载需要展示给用户的其他数据。

下面将列出一些常用操作，具体用法可以去官网查API

 

1.       使用$scope.$watch()方法监听一个表达式

2.       使用$scope暴露模型数据

3.       使用Module（模块）组织依赖关系，可以自动解析依赖关系

4.       使用Angular提供的事件处理指令来替代原生JS的事件属性，例如ng-click。这样的好处是可以在所有浏览器中具有相同的行为，Angular将会帮你屏蔽差异性。并且不会在全局命名空间中进行操作，你所指定的表达式只能访问元素控制器作用域范围内的函数和数据

5.       使用ng-repeat指令进行迭代

6.       使用ng-show和ng-hide来显示和隐藏元素

7.       使用ng-class和ng-style来修改样式

8.       在src和href属性中嵌入Angular表达式时，使用ng-src和ng-href指令

 

 

2.4.       模块

使用Module（模块）组织依赖关系。它们提供了一种方法，可以用来组织应用中一块功能区域的依赖关系；同时还提供了一种机制，可以自动解析依赖关系（又叫做依赖注入）。一般来说，我们把这些叫做依赖服务，因为它们会负责为应用提供特殊的服务。

 

 

2.5.       服务

对于一些重复多次使用的业务，我们可以把它们抽出来形成一个“服务”。

$http是Angular内置的一个服务，它支持 HTTP、JSONP 和 CORS 方式。它还包含了安全性支持，避免 JSON 格式的脆弱性和 XSRF（跨站脚本攻击）

 

2.6.       过滤器

你可以用过滤器来声明应该如何变换数据格式，然后再显示给用户，你只要在模板中使用一个插值变量即可。使用过滤器的语法是：

{{ expression | filterName : parameter1 :...parameterN }}

一个时间格式化的filter：

<div>{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}</div>

 

2.7.       路由

使用路由机制来切换视图，可以改善单页面应用的一些缺点：

1.       通过html5的History API，解决Ajax请求不留历史记录的问题

2.       可以保存书签、分享链接

3.       对SEO更友好

2.8.       指令

指令扩展了 HTML 语法，同时它也是使用自定义的元素和属性把行为和 DOM 转换关联 到一起的方式。通过这些指令，你可以创建可复用的 UI 组件，配置你的应用，并且可 以做到你能想象到的几乎所有事情，这些事情都可以在你的 UI 模板中实现。

与服务一样，你可以通过模块对象的API来定义指令，只要调用模块实例的directive() 函数即可，其中directiveFunction 是一个工厂函数，用来定义指令的特性。

var appModule = angular.module('appModule',[...]); appModule.directive('directiveName', directiveFunction);