NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

开始!AngularJS!(二)- 入门:视图,模板,模型,控制器和作用域

| Comments

在AngularJS中,视图是模型在模板中的映射的结果(模型(Model)和视图模型的绑定(View Model))。这意味当模型发生变化时,视图上的绑定内容会对应更新。

模型

看第一个的例子,模型与模板:

1
2
3
4
<body ng-app>
    <input type="text" ng-model="name"/>
    { {name} }
</body>

在jsfiddle中查看,http://jsfiddle.net/benweizhu/j6b5271r/

在这个例子中,使用了一个HTML本身没有的语法ng-model=“name”,它是AngularJS扩展的HTML语法,叫做ng-model指令,还用到了,AngularJS的数值表达式。

我们知道在大部分传统模板系统中,对模板的渲染都是线性单向的过程:模型和模板混合在一起产生标记的计算结果。当任何模型发生改变后都需要模板重新计算。

在AngularJS中,当输入框中的内容改变时,对应的模型name会发生改变,AngularJS会检测到模型发生改变,重新渲染模板中与该模型绑定的视图部分。

这是AngularJS提供的最基本也是最重要的功能之一,数据的双向绑定

控制器

再来第二个例子,模型和控制器:

1
2
3
4
5
<body ng-app>
    <div ng-controller="textController">
         <input type="text" ng-model="name"/>
    </div>
</body>
1
2
3
var textController = function($scope){
    $scope.name="benwei";
}

在jsfiddle中查看,http://jsfiddle.net/benweizhu/m5gue0zs/

在这里,用到了AngularJS中的另一个指令ng-controller,在这个Controller的范围内,定义了一个模型name,我们通过模板域模型$scope对象得到controller范围内定义的模型name,并赋值。

在例子中,我们通过$scope对象将模型数据name传递给Controller,从而进行数据的初始化。

虽然,一般情况下,我们不会用这样的方式去建立controller,但是我们可以清晰的看到,在AngularJS中,一个Controller其实就是JavaScript中的一个函数。所以,Controller可以做事情是很多,它并通过$scope对象与模型关联,从而可以实现对模型的赋值以及其他相关逻辑行为的定义。

作用域

这里你看到了另一个重要对象$scope,作用域(Scope)是AngularJS的重要概念,它可以看做一种粘合剂,让模板,模型和控制器工作在一起。AngularJS通过作用域,以及模板中包含的信息,数据模型,控制器,让模型和视图保持位置的分离,内容的同步。任何对模型的改变都会反映到视图,任何视图的改变也会映射到模型中。

大部分Web应用都是基于MVC的模式,也衍生出许多中MVC的变种(如MVVM(Model View ViewModel)),但AngularJS宣称自己是MVW(Model View Whatever)。

在本节,最重要的是了解视图,模板,模型,控制器之间的关系,以及对作用域对象$scope有一个基本的了解。我们可以在之后一起去了解一下这个Whatever到底是什么含义。

本节中遇到的概念:

模板(Template) | 带有Angular扩展标记的HTML
指令(Directive) | 用于通过自定义属性和元素扩展HTML的行为
模型(Model) | 用于显示给用户并且与用户互动的数据
作用域(Scope) | 用来存储模型(Model)的语境(context)。模型放在这个语境中才能被控制器、指令和表达式等访问到
表达式(Expression) | 模板中可以通过它来访问作用域(Scope)中的变量和函数
视图(View) | 用户看到的内容(即DOM)
数据绑定(Data Binding) | 自动同步模型(Model)中的数据和视图(View)表现
控制器(Controller) | 视图(View)背后的业务逻辑

参考资料:

1.《精通AngularJS》
2.http://www.ngnice.com/docs/guide/concepts

开始!AngularJS!(一)- 刚刚开始

| Comments

看这样一个例子:

1
2
3
4
5
6
<body ng-app>
    <div ng-controller="textLengthLimitController">
        <textarea ng-model="text"></textarea> <span></span>
        <input type="button" ng-disabled="!hasValidLength()" value="send" />
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
var MAX_LENGTH = 10;

function textLengthLimitController($scope) {

    $scope.remaining = function () {
        return MAX_LENGTH - $scope.text.length;
    };

    $scope.hasValidLength = function () {
        return $scope.remaining() >= 0;
    };

}

代码的功能是告诉用户还可输入多少字符,当字符超过限制,将发送按钮灰掉。在jsFiddle里运行该代码,http://jsfiddle.net/benweizhu/cbcn995m/

这里做了几件事情:
1.定义页面(HTML页面)
2.定义期待行为(remaining()和ng-disabled)
3.定义行为发生的逻辑(MAX_LENGTH - $scope.text.length和$scope.remaining() >= 0)

剩下最复杂的事情:对DOM元素的操作,交给了AngularJS来做。

引用AngularJS官方文档对AngularJS的介绍:

“AngularJS是一个开发动态Web应用的框架。它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。它的创新之处在于,通过数据绑定和依赖注入减少了大量代码,而这些都在浏览器端通过JavaScript实现,能够和任何服务器端技术完美结合。”

就像文档介绍的那样,HTML本身是静态文档,是很好的声明式语言,但对于构建动态的web应用,却无能为力。

针对这类问题,通常的解决办法是:通过JavaScript对HTML的DOM结构进行修改。比如,jQuery。

而AngularJS另辟蹊径,通过扩展HTML的语法来拉近静态Web和动态Web之间的距离。

“Angular是建立在这样的信念之上的:即声明式的代码用在构建用户界面和组装软件组件时更好,而命令式的代码更擅长展现业务逻辑。”

AngularJS将应用逻辑与DOM操作解耦,让开发人员不用去担心去前端视图模型(View Model)改变,从而大大提高代码的可测试性。

AngularJS试图去实现一个完整的前端解决方案:

1.构建一个CRUD应用时可能用到的所有技术:数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入
2.可测试性:单元测试、端到端测试、模拟对象(mocks)、测试工具

在一个以用户体验,多平台(Web和移动)为核心的现代应用时代,单页应用以前端+API成为了Web应用的开发的趋势:

1.对于内容的改动不需要加载整个页面
2.对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合
3.多平台使用相同的API,减少后台逻辑的重复开发

AngularJS给现代Web应用开发带来曙光,让我们一起认认真真学习AngularJS。

参考资料:

1.《精通AngularJS》
2.http://www.ngnice.com/docs/guide/introduction
3.http://www.csdn.net/article/2012-12-10/2812658-Single-Page-Applications