【AngularJS系列1】感受篇

浏览数：22 / 时间：2015年06月09日

先来俩栗子感受一下~

栗1现在有个需求，希望页面上某段文字及时的显示某个输入框的输入内容~

如果我们用jQuery来写是这样的：

栗1 - jQuery版本

1 <h1>Hello, <span id="namePlaceholder"></span></h1>
2 <input id="name" type="text">
3 <script type="text/javascript">
4   $(‘#name‘).keydown(function(e){
5       $(‘#namePlaceholder‘).html(e.target.value);
6   });
7 </script>

如果用AngularJS来写呢，是这样的：

栗1 - AngularJS版本

1 <h1>Hello, {{name}}</h1>
2 <input type="text" ng-model="name">

栗2又来个需求，有个人名的数组，想把这些名字列到页面上~

栗2 - jQuery版本

1 <ul id="list"></ul>
2 <script type="text/javascript">
3   [‘张三‘, ‘李四‘, ‘王五‘].forEach(function(item){
4       $(‘#list‘).append($(‘<li>‘ + item + ‘</li>‘));
5   });
6 </script>

栗2 - AngularJS版本

1 <ul>
2   <li ng-repeat="item in [‘张三‘, ‘李四‘, ‘王五‘]">{{item}}</li>
3 </ul>

通过比较，可以发现AngularJS：

代码更简洁 （少写好多js代码啊~）
扩展了html的功能 （html貌似变的很强大哇！）
实现了model和view的双向绑定 （随时在input里输入，随时通过ng-model绑定到name这个model上~）

其实AngularJS还：

分离了JS逻辑和页面渲染 （本来JS又要忙数据交互，又要忙业务逻辑，又要忙页面渲染，现在html长大了，可以分担了~）
为JS提供了MVC框架 （我们熟悉的MVC~）
提供了One Page Application流畅的用户体验 （不像以前，每换一个页面都要重新向后台申请，现在是华丽的页面间无缝切换啊~）
提供依赖注入机制 （意味着更支持模块化~）
便于写单元测试 （行为和界面分离后，行为很方便测试啊~质量更有保障~）

以后会慢慢介绍这些优点，先来看一个完整的AngularJS应用：

main.html

 1 <!doctype html>
 2 <html ng-app="myApp">
 3   <head>
 4           <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
 5           <script type="text/javascript" src="app.js"></script>
 6       </head>
 7       <body>
 8           <h1>Hello, {{name}}</h1>
 9           <input type="text" ng-model="name">
10           <ul>
11               <li ng-repeat="item in nameList">{{item}}</li>
12           </ul>
13       </body>
14 </html>

app.js

1 var app = angular.module(‘myApp‘, []);
2 app.controller(‘MainCtrl‘, function($scope) {
3   $scope.nameList = [‘张三‘, ‘李四‘, ‘王五‘];
4 });

ng-app :
AngularJS的入口点。从这里开始，AngularJS系统就开始工作了~后面对应的myApp是在app.js文件里定义的angular module，module上注册了一个controller MainCtrl，model都是绑定在它对应的$scope上的。Scope的概念以后会细讲。

ng-model :
在所有表单输入元素(input, select, textarea)上都可以用ng-model将value和model绑定起来，所输入的数值会直接被赋到对应的model上。

ng-repeat :
遍历数组nameList重复当前页面元素。

其它扩展过的标签属性们 ：
官方API

原文链接：http://hellobug.github.io/blog/angularjs-introduction/

【AngularJS系列1】感受篇,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【AngularJS系列1】感受篇