AngularJS权威教程第2章数据绑定和第一个 AngularJS Web应用

缺乏、安全感 2022-08-18 12:10 193阅读 0赞

AngularJS权威教程 第2章 数据绑定和第一个 AngularJS Web应用

Hello World

学习任何一门开发语言，都是从Hello World开始的，这种无法言语的操蛋心情，大家都懂，但是一个简易的应用能够最直接的

展现他的功能，这个无法否决。吐槽一下，代码如下。。。

<!doctype html>
    <html ng-app>
    <head>
      <title>Simple App</title>
      <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    </head>
    <body>
      <input ng-model="name" type="text" placeholder="Your name">
      <h1>Hello {
       { name }}</h1>
    </body>
    </html>

教程中给出的引入js的链接https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js已被强，上面的是在网上找的还能用的链接，需要angular脚本的可以给我留言附上邮箱发给你。

用浏览器(最好是FireFox或者是Chrome，不知道是我的IE版本问题还是不支持，我用IE打开是有问题的)直接打开页面，文本框中输入World，效果如图

![Center][]

1.1.核心功能的体现——数据绑定

有前端书写经验的都清楚，在传统Web框架中，浏览器是解释执行的，即在页面加载过程中，只渲染出模型暴露出的数据，形成

一个静态页面。如果想实现如上的功能，某个DOM对象值得改变立刻体现在页面中必须写js脚本，虽然不复杂，但是如果页面上这

种诉求很多的话也会很头疼吧。

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

视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一，也是让我们只用10行代码，并且在没有任何

JavaScirpt的情况下就可以写出Hello World的关键。

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

被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的

DOM元素包含的元素才会受AngularJS影响。

自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需

要写任何自定义的代码，它就可以工作。

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

之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。

这个事件循环会调用$digest()循环，这个过程被称作脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。

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

【注】为了表示内部和内置的库函数，Angular使用$预定义对象。尽管这类似于全局的jQuery对象$，但它们是完全无关的。只

要遇到$符号，你都可以只把它看作一个Angular对象。

1.2.简单的数据绑定

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

这意味着无论在文本输入字段中输入了什么，都会同步到数据模型中。

数据模型对象（model object）是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可

以同控制器进行交互。

双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了

某个值，视图也会依据变化重新渲染。

在输入字段上使用ng-model指令来实现数据绑定，如下所示：

<span style="font-family:Microsoft YaHei;font-size:14px;">  <input ng-model="person.name" type="text" placeholder="Your name">
      <h1>Hello {
       { person.name}}</h1></span>

以上表示在数据模型对象$scope中绑定一个对象person，输入框的值为person.name，输入框的值变化时即$scope.person的值发生变化，展示在页面上

1.3.时钟案例

html：

<!doctype html>
    <html ng-app>
    <head>
      <title>Clock Example</title>
      <script src="http://apps.bdimg.com/libs/angular.js/1.2.6/angular.min.js"></script>
    </head>
    <body>
      <div ng-controller="MyController">
        <h5>Hello {
       { clock.now }}</h5>
      </div>
    
    <script src="js/app.js"></script>
    </body>
    </html>

app.js

效果如图：

![Center 1][]

实践经验：

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

用绑定，是Angular中的最佳实践。

[Center]: /images/20220731/78f9733994c1492b9cd51df7bd23c229.png
[Center 1]: /images/20220731/acac895118554d1ab638d0ecda657b5f.png