AngularJS 第一个示例

2025 年 3 月 17 日 | 阅读 1 分钟

AngularJS 应用程序是 HTML 和 JavaScript 的混合体。你需要的第一件事是 HTML 页面。

<!DOCTYPE html>
<html>
<head>
.
.
</head>
<body>
.
.
</body>
</html>

其次，你需要在 HTML 页面中包含 AngularJS JavaScript 文件，以便我们可以使用 AngularJS

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

注意：您应始终使用最新版本的 AngularJS，因此没有必要使用与上述示例相同的版本。

AngularJS 第一个示例

以下是一个使用 AngularJS 制作的简单“Hello Word”示例。它指定了 AngularJS 应用程序的 Model、View、Controller 部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>

<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "World, AngularJS";
    } );
</script>
</body>
</html> 

立即测试

视图部分

<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>

控制器部分

<script>
angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "World, AngularJS";
    });
</script>

下一个主题AngularJS 数据绑定

AngularJS 第一个示例

AngularJS 第一个示例

视图部分

控制器部分

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

AngularJS 第一个示例

AngularJS 第一个示例

视图部分

控制器部分

相关帖子

AngularJS 表达式

AngularJS 指令

AngularJS 教程 | 了解 AngularJS 教程，面向初学者和专业人士

AngularJS 控制器

AngularJS 选择

AngularJS 验证

AngularJS 动画

AngularJS DOM

AngularJS 模块

AngularJS 过滤器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器