参考手册
AngularJS 教程
AngularJS 表达式

AngularJS 介绍

AngularJS 是一个 JavaScript 框架。它可以添加到带有 <script> 标记的 HTML 页面。

AngularJS 使用指令扩展 HTML 属性，并使用表达式将数据绑定到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个用 JavaScript 编写的 JavaScript 框架。

AngularJS 以 JavaScript 文件的形式分发，可以添加到带有脚本标记的网页中:

  1. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>

AngularJS 扩展 HTML

AngularJS 使用 ng 指令扩展 HTML。

ng-app 指令定义了 AngularJS 应用程序。

ng-model 指令将 HTML 控件（输入、选择、文本区域）的值绑定到应用程序数据。

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

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="">
  8. <p>在输入框中填写一些内容:</p>
  9. <p>姓名 : <input type="text" ng-model="name" placeholder="这里输入姓名"></p>
  10. <h2>你好 {{name}}</h2>
  12. </div>
  14. </body>
  15. </html>
运行一下

实例解释:

网页加载后，AngularJS 会自动启动。

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

ng-model 指令将输入字段的值绑定到应用程序变量名。

ng-bind 指令将 <p> 元素的内容绑定到应用程序变量名。

AngularJS 指令

正如您已经看到的，AngularJS 指令是带有 ng 前缀的 HTML 属性。

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

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="" ng-init="firstName='John'">
  8. <p>名称是 <span ng-bind="firstName"></span></p>
  10. </div>
  12. </body>
  13. </html>
运行一下

或者使用有效的 HTML:

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div data-ng-app="" data-ng-init="firstName='John'">
  8. <p>名称是 <span data-ng-bind="firstName"></span></p>
  10. </div>
  12. </body>
  13. </html>
运行一下
如果希望使页面 HTML 有效，可以使用 data-ng-，而不是 ng-。

在本教程的后面部分，您将了解更多有关指令的信息。

AngularJS 表达式

AngularJS 表达式写在双大括号内: {{ expression }}.

AngularJS 将准确地 "输出" 表达式所写的数据:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="">
  7. <p>我的第一个表达式: {{ 5 + 5 }}</p>
  8. </div>
  10. </body>
  11. </html>
运行一下

AngularJS 表达式以与 ng-bind 指令相同的方式将 AngularJS 数据绑定到 HTML。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="">
  8. <p>在输入框中输入一些内容:</p>
  9. <p>名称: <input type="text" ng-model="name"></p>
  10. <p>{{name}}</p>
  12. </div>
  14. </body>
  15. </html>
运行一下

在本教程的后面部分，您将了解有关表达式的更多信息。

AngularJS 应用程序

AngularJS 模块定义 AngularJS 应用程序。

AngularJS 控制器控制 AngularJS 应用程序。

ng-app 指令定义应用程序，ng-controller 控制器指令定义控制器。

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <p>尝试修改名称</p>
  8. <div ng-app="myApp" ng-controller="myCtrl">
  10. 姓氏: <input type="text" ng-model="firstName"><br>
  11. 名称: <input type="text" ng-model="lastName"><br>
  12. <br>
  13. 姓名: {{firstName + " " + lastName}}
  15. </div>
  17. <script>
  18. var app = angular.module('myApp', []);
  19. app.controller('myCtrl', function($scope) {
  20.     $scope.firstName= "John";
  21.     $scope.lastName= "Doe";
  22. });
  23. </script>
  25. </body>
  26. </html>
运行一下

AngularJS 模块定义应用程序:

AngularJS 模块
  1.  var app = angular.module('myApp', []);

AngularJS 控制器控制应用程序:

AngularJS 控制器
  1.  app.controller('myCtrl', function($scope) {
  2.  $scope.firstName= "John";
  3.  $scope.lastName= "Doe";
  4. });

在本教程的后面部分，您将了解有关模块和控制器的更多信息。

AngularJS 教程
AngularJS 表达式

分类导航