元素的双向绑定(例01):
Hello, {{user.name}}!
说明:实际效果请大家看AngularJS/demo/index.html 2.2 特性二:模块化 在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。 HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。 我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。 最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签,然后开发者拿过来添加上功能,通过数据绑定将会使得这个过程非常简单。 这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下: function AlbumCtrl($scope) { scope.images = [ {“image”:”img/image_01.png”, “description”:”Image 01 description”}, {“image”:”img/image_02.png”, “description”:”Image 02 description”}, {“image”:”img/image_03.png”, “description”:”Image 03 description”}, {“image”:”img/image_04.png”, “description”:”Image 04 description”}, {“image”:”img/image_05.png”, “description”:”Image 05 description”} ]; }
-
Hello, {{user.name}}!
这里还有一件事值得提一句,AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。
2.3 特性三:MVC
针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。
Model
model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。
ViewModel
viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是
scope的对象,只存在于AnguarJS的应用中。
s
c
o
p
e
的
对
象
,
只
存
在
于
A
n
g
u
a
r
J
S
的
应
用
中
。
scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。
Controller
controller负责设置初始状态和参数化
scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。Viewview是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你创建web应用的架构。
s
c
o
p
e
方
法
用
以
控
制
行
为
。
需
要
指
出
的
c
o
n
t
r
o
l
l
e
r
并
不
保
存
状
态
也
不
和
远
程
服
务
互
动
。
V
i
e
w
v
i
e
w
是
A
n
g
u
l
a
r
J
S
解
析
后
渲
染
和
绑
定
后
生
成
的
H
T
M
L
。
这
个
部
分
帮
助
你
创
建
w
e
b
应
用
的
架
构
。
scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。
2.4 特性四:服务和依赖注入
AngularJS服务其作用就是对外提供某个特定的功能。
AngularJS拥有内建的依赖注入(DI)子系统,可以帮助开发人员更容易的开发,理解和测试应用。
DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。
为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:
function EditCtrl(
scope,
s
c
o
p
e
,
location,
routeParams)//Somethingcleverhere…你也可以定义自己的服务并且让它们注入:angular.module(‘MyServiceModule′,[]).factory(‘notify′,[‘
r
o
u
t
e
P
a
r
a
m
s
)
/
/
S
o
m
e
t
h
i
n
g
c
l
e
v
e
r
h
e
r
e
…
你
也
可
以
定
义
自
己
的
服
务
并
且
让
它
们
注
入
:
a
n
g
u
l
a
r
.
m
o
d
u
l
e
(
‘
M
y
S
e
r
v
i
c
e
M
o
d
u
l
e
′
,
[
]
)
.
f
a
c
t
o
r
y
(
‘
n
o
t
i
f
y
′
,
[
‘
window’, function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.
inject=[′
i
n
j
e
c
t
=
[
′
scope’, ‘notify’];
2.5 特性五:指令(Directives)
指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
这里是一个例子,它监听一个事件并且针对的更新它的scope ,如下:
myModule.directive(‘myComponent’, function(mySharedService) {
return {
restrict: ‘E’,
controller: function(
scope ,如下: myModule.directive(‘myComponent’, function(mySharedService) { return { restrict: ‘E’, controller: function(
scope, attrs, mySharedService) {
attrs, mySharedService) {
scope.on(‘handleBroadcast’, function() {
on(‘handleBroadcast’, function() {
scope.message = ‘Directive: ’ + mySharedService.message;
});
},
replace: true,
template: ‘’
};
});
然后,你可以使用这个自定义的directive来使用:
使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。
3、angularJS路由思想
在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用form表单去提交了,因为form表单之间的提交会导致页面之间的切换,也就是说无法实现单页应用。
ajax的缺陷
1、不会在浏览器里面留下历史记录
2、用户无法将页面加为书签保存下来或者无法通过发送网址给其他人,其他人通过直接点击网址进入这个页面
3、ajax无法实现SEO优化,ajax对搜索引擎是不友好的
这也是为什么要使用前端路由的一个原因。
a、介绍什么是Angular的路由机制
什么是路由?有什么用?
AngularJS是协助搭建单页面工程的开源前端框架。主要是实现前端页面架构的.它通过MVC模式使得开发与测试变得更容易。
a、通过画图讲解Angular路由机制思想
单页面应用
/#/order
/#/myhome
/#/index
需要一个路由器$routeProvider