AngularJS 系列 01 - HelloWorld和数据绑定


 

目录导读:

  AngularJS 系列 学习笔记 目录篇

 

前言:

  好记性不如烂键盘,随笔就是随手笔记,希望以后有用。

 

本篇目录:

1. Hello World

2. AngularJS中的数据绑定

3. 简单的数据绑定

4. 数据绑定的最佳实战

 

 

1. Hello World

  写一个Hello World的应用是咱们接触任何一个语言的基本途径,AngularJS也是如此。

  随着学习的深入,我们会逐渐深入到AngularJS的内部原理中,现在,废话不多说,开始咱们的Hello World。

 

  这里我使用的JetBrains的WebStorm,打开WebStorm,选择“Create New Project”创建新项目:

  

 

  然后我们选择“Empty Project”新建一个空项目,选择项目存储路径,点击确定按钮即可:

 

  然后从AngularJS官网下载AngularJS库,并将其添加到项目中:

 

  新建一个HTML页面,代码如下:

 1 <!DOCTYPE html>
 2 <html ng-app>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World</title>
 6     <script src="../script/angular.min.js"></script>
 7 </head>
 8 <body>
 9     <input type="text" ng-model="name" placeholder="请输入您的姓名...">
10     <h1>Hello, {{name}} !</h1>
11 </body>
12 </html>

 

  预览效果如下:

 

  虽然这个例子没什么意思,不怎么高大上,但是它展示了AngularJS最基本也是最令人印象深刻的功能之一:数据绑定。

 

 

2. AngularJS中的数据绑定

  在Rails等传统的Web框架中,控制器将多个模型中的数据和模板组合在一起形成视图,并将其提供给用户,这个组合过程会产生一个单向视图。

  如果没有创建任何自定义的JavaScript组件,视图只会体现它渲染时模型暴露出的数据。

 

  AngularJS则采用了完全不同的解决方案,它创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。

  任何一个独立视图组件中的值都是动态替换的,这个功能可以说是AngularJS中最重要的功能之一,也是让咱们只用上述的12行代码,并且子啊没有任何JavaScript的情况下就可以写出HelloWorld的关键。

 

  要实现这个功能,只要在HTML页面中引用angular.js,并在某个DOM元素上明确设置ng-app属性即可。

  ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是咱们可以在Web应用中嵌套AngularJS应用的原因。

  只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS的影响。

 

  视图中的插值会在计算一个或多个变量时被动态替换,替换结果是字符串中的插值被变量的值替代。

  例如,如果有一个叫做name的变量,它的值是“Catalina”,那么视图中的“ Hello, {{name}} ! ”字符串会被换成“Hello, Catalina !”。

 

  自动数据绑定使我们可以将视图理解为模型状态的映射。

  当客户端的数据模型发生变化时,视图就能反映出这些变化,并且不需要写任何自定义的代码,它就可以工作。

 

  在MVC(Model View Controller,模型-视图-控制器)的世界里,控制器可以不必担心会牵扯到渲染视图的工作。

  这样我们就不必再担心如何分离视图和控制器的逻辑,并且也可以使测试变得既简单又哇塞。

 

  MVC是一种软件架构设计模式,它将表现从用户交互中分离出来。

  通常来讲,模型中包含应用的数据和与数据进行交互得方法,视图将数据呈献给用户,而控制器则是二者之间的桥梁。

 

  这种表现分离能将应用中的对象很好地隔离开来,因此视图不需要知道如何保存对象,只要知道如何显示它即可。

  这也意味着数据模型不需要同视图进行交互,只需要包含数据和操作视图的方法。

  控制器用来存放将二者绑定在一起的业务逻辑。

 

  AngularJS惠济路数据模型所包含的数据在任何特定时间点的值(在HelloWorld例子中就是name的值),而不是原始值。

 

  当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。

  如果该值从上次事件循环运行之后发生了变化,则该值被认为是“脏”值。

  这也是AngularJS可以跟踪和响应应用变化的方式。

 

  这个过程被称作脏检查(dirty checking),脏检查是检查数据模型变化的有效手段。

  当有潜在的变化存在时,AngularJS会在事件循环时执行脏检查来保证数据的一致性。

 

  如果使用KnockoutJS这种通过在数据模型上绑定事件监听器来监听数据变化的框架,这个过程会变得更复杂且抵消。

  处理事件合并、依赖跟踪和大量的事件触发(event firing)是非常复杂的,而且会在性能方面导致额外的问题。

 

  借助AngularJS,不需要构建复杂和新的JavaScript功能,就可以在试图中实现类自动同步的机制。

 

  为了表示内部和内置的库函数,AngularJS使用$预定义对象。

  尽管这类似于全局的jQuery对象$,但是他们是完全无关的,只要遇到$符号,你都可以只把它看做一个AngularJS对象。

 

 

3. 简单的数据绑定

  审阅一下上面的HelloWorld代码,我们是用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。

  这意味着无论在文本框中输入了什么,都会同步到对应的数据模型中。

 

  数据模型对象(model object)是指$scope对象。

  $scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。

  输入国不理解这个概念也没关系,后面的例子将会对这个概念进行详细介绍。

 

  双向数据绑定(bi-directional)意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。

 

  在input元素上使用ng-model指令来实现数据绑定,如下所示:

1     <input type="text" ng-model="person.name" placeholder="请输入您的姓名...">
2     <h1>Hello, {{person.name}} !</h1>

 

  这样绑定就设置好了,没错,就这么简单。瑾此而已。

  咱们可以观察一下视图是如何更新数据模型的。当 <input> 中的值发生变化时, person.name 会被更新,而视图将反映出这个更新。

 

  咱们仅通过视图就实现了一个双向数据绑定,为了从其他角度(后端到前端)解释双向数据绑定,后面会着重介绍控制器。

 

  正如 ng-app 声明所有被它包含的元素都属于AngularJS应用一样,DOM元素上的 ng-controller 声明所有被它包含的元素都属于某个控制器。

  为了解释这个概念,我们将上面的例子进行如下修改:

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World</title>
 6     <script src="../script/angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="myController">
10         <h1>现在时间:{{clock}}</h1>
11     </div>
12 </body>
13 </html>

 

  在这个例子中,我们会创建一个每秒钟走一步的时钟,并更新 {{clock}} 变量上的数据:

 1     <script>
 2         var app = angular.module('myApp', []);
 3         app.controller('myController', function($scope, $timeout) {
 4             var updateClock = function () {
 5                 $scope.clock = new Date();
 6                 $timeout(function () {
 7                     updateClock();
 8                 }, 1000);
 9             };
10             updateClock();
11         });
12     </script>

 

  在这个例子中,当定时器触发时会调用updateClock()函数,将$scope.clock的值设置为当前时间。

  完整代码如下:

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World</title>
 6     <script src="../script/angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="myController">
10         <h1>现在时间:{{clock}}</h1>
11     </div>
12 
13     <script>
14         var app = angular.module('myApp', []);
15         app.controller('myController', function($scope, $timeout) {
16             var updateClock = function () {
17                 $scope.clock = new Date();
18                 $timeout(function () {
19                     updateClock();
20                 }, 1000);
21             };
22             updateClock();
23         });
24     </script>
25 </body>
26 </html>

 

  尽管我们可以将所有的代码都写在一个文件里,但是由于需要将不同的组件分开开发,将代码写在一个文件中会使协同工作变得非常困难。

  通常情况下,更好的选择是将JavaScript将在单独的文件中,而不是当前额index.html页面中。

 

  上面的代码可以分开,修改成:

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World</title>
 6     <script src="../script/angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="myController">
10         <h1>现在时间:{{clock}}</h1>
11     </div>
12 
13     <script src="index.js"></script>
14 </body>
15 </html>

 

 1 var app = angular.module('myApp', []);
 2 app.controller('myController', function($scope, $timeout) {
 3     var updateClock = function () {
 4         $scope.clock = new Date();
 5         $timeout(function () {
 6             updateClock();
 7         }, 1000);
 8     };
 9     updateClock();
10 });

 

 

4. 数据绑定的最佳实践

  由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是AngularJS中的最佳实践。

 

  如果把这个实践应用到上面的例子中,需要把视图中的代码改成如下:

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World</title>
 6     <script src="../script/angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="myController">
10         <h1>现在时间:{{clock.now}}</h1>
11     </div>
12 
13     <script src="index.js"></script>
14 </body>
15 </html>

 

  在这个例子中,相比每秒钟都更新$scope.clock,更新clock.now的值才是更美妙的做法。

  有了这个优化之后,我们将反映数据变化的逻辑作如下修改:

 1 var app = angular.module('myApp', []);
 2 app.controller('myController', myController);
 3 
 4 function myController($scope, $timeout) {
 5     $scope.clock = {
 6         now: new Date()
 7     };
 8 
 9     var updateClock = function () {
10         $scope.clock.now = new Date();
11     };
12 
13     setInterval(function () {
14         $scope.$apply(updateClock);
15     }, 1000)
16 
17     updateClock();
18 }

 

  将所有的绑定都通过这样的形式放在视图中,这才完美~