AngularJS 系列 01 - HelloWorld和数据绑定
|
副标题[/!--empirenews.page--]
AngularJS 系列 学习笔记 目录篇
写一个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最基本也是最令人印象深刻的功能之一：数据绑定。
在Rails等传统的Web框架中，控制器将多个模型中的数据和模板组合在一起形成视图，并将其提供给用户，这个组合过程会产生一个单向视图。 如果没有创建任何自定义的JavaScript组件，视图只会体现它渲染时模型暴露出的数据。
AngularJS则采用了完全不同的解决方案，它创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。 任何一个独立视图组件中的值都是动态替换的，这个功能可以说是AngularJS中最重要的功能之一，也是让咱们只用上述的12行代码，并且子啊没有任何JavaScript的情况下就可以写出HelloWorld的关键。
要实现这个功能，只要在HTML页面中引用angular.js，并在某个DOM元素上明确设置ng-app属性即可。 ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是咱们可以在Web应用中嵌套AngularJS应用的原因。 只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS的影响。
自动数据绑定使我们可以将视图理解为模型状态的映射。 当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。
在MVC（Model View Controller，模型-视图-控制器）的世界里，控制器可以不必担心会牵扯到渲染视图的工作。 这样我们就不必再担心如何分离视图和控制器的逻辑，并且也可以使测试变得既简单又哇塞。
AngularJS惠济路数据模型所包含的数据在任何特定时间点的值（在HelloWorld例子中就是name的值），而不是原始值。
当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。 如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。 这也是AngularJS可以跟踪和响应应用变化的方式。
这个过程被称作脏检查（dirty checking），脏检查是检查数据模型变化的有效手段。 当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。
如果使用KnockoutJS这种通过在数据模型上绑定事件监听器来监听数据变化的框架，这个过程会变得更复杂且抵消。 处理事件合并、依赖跟踪和大量的事件触发（event firing）是非常复杂的，而且会在性能方面导致额外的问题。
借助AngularJS，不需要构建复杂和新的JavaScript功能，就可以在试图中实现类自动同步的机制。
审阅一下上面的HelloWorld代码，我们是用ng-model指令将内部数据模型对象（$scope）中的name属性绑定到了文本输入字段上。 这意味着无论在文本框中输入了什么，都会同步到对应的数据模型中。
（编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
