AngularJS 系列 01 - HelloWorld和数据绑定

时间：2021-09-28 20:00:07

目录导读：

　　AngularJS 系列 学习笔记 目录篇

前言：

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

本篇目录：

1. Hello World

2. AngularJS中的数据绑定

3. 简单的数据绑定

4. 数据绑定的最佳实践

1. Hello World

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

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

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

　　AngularJS 系列 01 - HelloWorld和数据绑定

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

AngularJS 系列 01 - HelloWorld和数据绑定

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

AngularJS 系列 01 - HelloWorld和数据绑定

　　新建一个HTML页面，代码如下：

 <!DOCTYPE html>
 <html ng-app>
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <input type="text" ng-model="name" placeholder="请输入您的姓名...">
     <h1>Hello, {{name}} !</h1>
 </body>
 </html>

　　预览效果如下：

AngularJS 系列 01 - HelloWorld和数据绑定

　　虽然这个例子没什么意思，不怎么高大上，但是它展示了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指令来实现数据绑定，如下所示：

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

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

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

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

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

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

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间：{{clock}}</h1>
     </div>
 </body>
 </html>

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

     <script>
         var app = angular.module('myApp', []);
         app.controller('myController', function($scope, $timeout) {
             var updateClock = function () {
                 $scope.clock = new Date();
                 $timeout(function () {
                     updateClock();
                 }, 1000);
             };
             updateClock();
         });
     </script>

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

　　完整代码如下：

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间：{{clock}}</h1>
     </div>

     <script>
         var app = angular.module('myApp', []);
         app.controller('myController', function($scope, $timeout) {
             var updateClock = function () {
                 $scope.clock = new Date();
                 $timeout(function () {
                     updateClock();
                 }, 1000);
             };
             updateClock();
         });
     </script>
 </body>
 </html>

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

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

　　上面的代码可以分开，修改成：

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间：{{clock}}</h1>
     </div>

     <script src="index.js"></script>
 </body>
 </html>
 var app = angular.module('myApp', []);
 app.controller('myController', function($scope, $timeout) {
     var updateClock = function () {
         $scope.clock = new Date();
         $timeout(function () {
             updateClock();
         }, 1000);
     };
     updateClock();
 });

4. 数据绑定的最佳实践

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

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

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间：{{clock.now}}</h1>
     </div>

     <script src="index.js"></script>
 </body>
 </html>

　　在这个例子中，相比每秒钟都更新$scope.clock，更新clock.now的值才更完美~

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

 var app = angular.module('myApp', []);
 app.controller('myController', myController);

 function myController($scope, $timeout) {
     $scope.clock = {
         now: new Date()
     };

     var updateClock = function () {
         $scope.clock.now = new Date();
     };

     setInterval(function () {
         $scope.$apply(updateClock);
     }, 1000)

     updateClock();
 }

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

相关文章