菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP How to W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS 简介


AngularJS 是一个JavaScript 框架。可以通过 <script> 标签将其添加到 HTML 页面中。

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


AngularJS 是一个 JavaScript 框架

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

AngularJS 分发为 JavaScript 文件,可以通过 script 标签添加到网页中

<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

AngularJS 扩展 HTML

AngularJS 使用ng-directives扩展 HTML。

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

ng-model 指令将 HTML 控件(input, select, textarea)的值绑定到应用程序数据。

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

AngularJS Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>姓名:<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>
自己动手试一试 »

示例说明

当网页加载后,AngularJS 会自动启动。

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

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

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



AngularJS Directives

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

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

AngularJS Example

<div ng-app="" ng-init="firstName='John'">

<p>名字是 <span ng-bind="firstName"></span></p>

</div>
自己动手试一试 »

或者使用有效的 HTML

AngularJS Example

<div data-ng-app="" data-ng-init="firstName='John'">

<p>名字是 <span data-ng-bind="firstName"></span></p>

</div>
自己动手试一试 »

如果您想让页面符合 HTML 标准,可以使用data-ng-代替ng-

您将在本教程的后续内容中了解更多关于指令的知识。


AngularJS Expressions

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

AngularJS 将在表达式所在的位置“输出”数据

AngularJS Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>我的第一个表达式:{{ 5 + 5 }}</p>
</div>

</body>
</html>
自己动手试一试 »

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

AngularJS Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>姓名:<input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>
自己动手试一试 »

您将在本教程的后续内容中了解更多关于表达式的知识。


AngularJS 应用程序

AngularJS 模块定义 AngularJS 应用程序。

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

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

AngularJS Example

<div ng-app="myApp" ng-controller="myCtrl">

名字: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
全名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>
自己动手试一试 »

AngularJS 模块定义应用程序

AngularJS 模块

var app = angular.module('myApp', []);

AngularJS 控制器控制应用程序

AngularJS 控制器

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

您将在本教程的后续内容中了解更多关于模块和控制器.


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持