AngularJS学习之旅—AngularJS 简介(一)

一、AngularJS 简介
　　1.AngularJS 是一个 JavaScript 框架。
　　　　AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的
　　2.它可通过 <script> 标签添加到 HTML 页面。
　　　　<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
　　3.AngularJS 通过指令扩展了 HTML。
　　　　1.AngularJS 指令是以 ng 作为前缀的 HTML 属性。

　　　　2.AngularJS 通过 ng-directives 扩展了 HTML。

　　　　3.ng-app 指令定义一个 AngularJS 应用程序。
　　　　　　ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

　　　　4.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
　　　　　　ng-model 指令把输入域的值绑定到应用程序变量 name。
　　　　　　 eg：

1 <div ng-app="">
2       <p>名字 : <input type="text" ng-model="name"></p>
3       <h1>Hello {{name}}</h1>
4     </div>

　　　　5.ng-bind 指令把应用程序数据绑定到 HTML 视图。
　　　　　　ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

　　　　6.ng-init 指令初始化 AngularJS 应用程序变量。
　　　　　　eg：

1 <div ng-app="" ng-init="firstName='John'">
2 　　<p>姓名为 <span ng-bind="firstName"></span></p>
3 </div>

　　　　7.AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

4.且通过表达式绑定数据到 HTML。
　　　　1.AngularJS 表达式写在双大括号内：{{ expression }}。

　　　　2.AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

　　　　3.AngularJS 将在表达式书写的位置"输出"数据。

　　　　4.AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
　　　　　　实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

二、代码演示

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <script src="js/angular.min.js"></script>
 7 </head>
 8 
 9 <body>
10     <div ng-app="myApp" ng-controller="myCtrl">
11         <!-- AngularJS 扩展了 HTML -->
12         <p>名字 :
13             <input type="text" ng-model="name">
14         </p>
15         <h1>Hello {{name}}</h1>
16 
17         <!-- AngularJS 指令 -->
18         <p ng-init="firstName='John'">姓名为 :
19             <span ng-bind="firstName"></span>
20         </p>
21 
22         <!-- AngularJS 表达式 -->
23         <p >姓名为 :
24                 <p>我的第一个表达式： {{ 5 + 5 }}</p>
25         </p>
26 
27         <!-- AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。 -->
28         <p data-ng-init="firstName='John'">姓名为 :
29             <span data-ng-bind="firstName"></span>
30         </p>
31 
32 
33         <!-- AngularJS 应用 -->
34          名:
35         <input type="text" ng-model="firstName">
36         <br>
37          姓:
38         <input type="text" ng-model="lastName">
39         <br>
40         <br> 姓名: {{firstName + " " + lastName}}
41     </div>
42 </body>
43 
44 </html>
45 <script>
46     var app = angular.module('myApp', []);
47     app.controller('myCtrl', function ($scope) {
48         $scope.firstName = "John";
49         $scope.lastName = "Doe";
50     });
51 </script>

【转载文章务必保留出处和署名，谢谢！】

AngularJS学习之旅—AngularJS 简介(一)

猜你喜欢