AngularJS学习 01进入Angular世界

Angular下载

各个版本的下载地址：https://code.angularjs.org/ 

打开上述URL，页面如下图：

点击需要的版本，跳出如下页面：

点击红色框内容即可下载完整的压缩包。

还可以通过通过Npm包管理工具，或者Bower获取，这里暂不涉及。

简单例子开始Angular之旅

　　代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../../statics/angular/angular.min.js"></script>
 7 </head>
 8 <body>
 9 <div ng-app="" ng-init="firstName='TieShen'">
10     <p>名字 : <input type="text" ng-model="name"></p>
11     <h1>Hello {{name}}</h1>
12     <p>姓名：<span ng-bind="firstName"></span></p>
13 </div>
14 </body>
15 </html>

　　浏览器效果：

　　

解释：

　　ng-init="firstName='TieShen' 初始化了firstName变量的值
　　ng-model="name" 则说明了一个名字为name的变量--input框的输入值，通过{{name}} 来展示这个变量值，话说这体现了Angular的一个优势：双向数据绑定
　　
就这么一个简单的例子，让我感受到了Angular的强大，如果用JQuery做要‘复杂’的多。希望在后续的学习中，能不断深入，毕竟2.X出来以后和1.X差别较大，表示先把1.X过一遍再去看2.X

posted @ 2016-09-22 12:46  鐵手  阅读(235)  评论(0)  编辑  收藏  举报