AngularJS基础知识总结

港控/mmm° 2022-07-14 06:24 175阅读 0赞

## 什么是 AngularJS？ ##

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

*  AngularJS 把应用程序数据绑定到 HTML 元素。
 *  AngularJS 可以克隆和重复 HTML 元素。
 *  AngularJS 可以隐藏和显示 HTML 元素。
 *  AngularJS 可以在 HTML 元素"背后"添加代码。
 *  AngularJS 支持输入验证。

AngularJS 通过 **ng-directives** 扩展了 HTML。

**              ng-app** 指令定义一个 AngularJS 应用程序。

**              ng-model** 指令把元素值（比如输入域的值）绑定到应用程序。

**               ng-bind** 指令把应用程序数据绑定到 HTML 视图。

**              ng-init** 指令初始化 AngularJS 应用程序变量。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    <div ng-app="">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {
       {name}}</h1>
    </div>
    
    </body>
    </html>

实例讲解：

当网页加载完毕，AngularJS 自动开启。

**           ng-app** 指令告诉 AngularJS，<div> 元素是 AngularJS  **应用程序** 的"所有者"。

**           ng-model** 指令把输入域的值绑定到应用程序变量 **name**。

**           ng-bind** 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

![Note][]HTML5 允许扩展的（自制的）属性，以 **data-** 开头。  
          AngularJS 属性以 **ng-** 开头，但是您可以使用 **data-ng-** 来让网页对 HTML5 有效。

## AngularJS 表达式 ##

AngularJS 表达式写在双大括号内：**\{ \{ expression \}\}**。

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

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

**            AngularJS 表达式** 很像 **JavaScript 表达式**：它们可以包含文字、运算符和变量。

实例 \{ \{ 5 + 5 \}\} 或 \{ \{ firstName + " " + lastName \}\}