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);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值