简介

收藏436

阅读2927

更新时间2025-08-11

AngularJS 是一个 JavaScript 框架

AngularJS 是用 JavaScript 编写的 JavaScript 框架。

AngularJS 以 JavaScript 文件的形式分发,并且可以使用 script 标签添加到网页中:


AngularJS 扩展了 HTML

AngularJS 使用 ng-指令扩展了 HTML。

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

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

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

AngularJS 实例






Name:

运行实例 »

点击 "运行实例" 按钮查看在线实例

示例解释:

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

ng-app 指令告诉 AngularJS,

元素是 AngularJS 应用程序的“所有者”。

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

ng-bind 指令将

元素的内容绑定到应用程序变量 name

AngularJS 指令

如您所见,AngularJS 指令是带有 ng 前缀的 HTML 属性。

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

AngularJS 实例

名字是

运行实例 »

点击 "运行实例" 按钮查看在线实例

或者使用有效的 HTML:

AngularJS 实例

名字是

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果您想让页面 HTML 有效,您可以使用 data-ng- 而不是 ng-

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

AngularJS 表达式

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

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

AngularJS 实例






我的第一个表达式:{{ 5 + 5 }}

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

AngularJS 实例






Name:

{{name}}

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

AngularJS 应用程序

AngularJS 模块定义 AngularJS 应用程序。

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

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

AngularJS 实例

名字:
姓氏:

全名:{{firstName + " " + lastName}}
运行实例 »

点击 "运行实例" 按钮查看在线实例

AngularJS 模块定义应用程序:

AngularJS 模块

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

AngularJS 控制器控制应用程序:

AngularJS 控制器

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

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

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号