📌  相关文章
📜  AngularJS-第一个应用程序(1)

📅  最后修改于: 2023-12-03 14:39:14.633000             🧑  作者: Mango

AngularJS-第一个应用程序

AngularJS 是一款基于 JavaScript 的前端框架，它通过简化 HTML、提供数据绑定和依赖注入等功能，使得构建复杂的 Web 应用程序变得更加容易。本文将为大家介绍 AngularJS 的第一个应用程序。

准备工作

在开始编写 AngularJS 类型的 Web 应用程序之前，需要先引入 AngularJS 库文件。可以通过以下两种方式来引入 AngularJS 库文件：

1. CDN
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
2. 下载使用

在 AngularJS 官网 上下载 AngularJS 的库文件，然后将其引用到 HTML 文档中。

编写第一个 AngularJS 应用程序

本文将以一个简单的计数器应用程序为例，来介绍如何编写 AngularJS 应用程序。

1. 编写 HTML 文件
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS-第一个应用程序</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyCtrl">
        <p>{{count}}</p>
        <button ng-click="increment()">+1</button>
        <button ng-click="decrement()">-1</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function($scope){
            $scope.count = 0;
            $scope.increment = function(){
                $scope.count++;
            };
            $scope.decrement = function(){
                $scope.count--;
            };
        });
    </script>
</body>
</html>
2. 解读代码

  • ng-app="myApp": 定义 AngularJS 应用程序的根元素，myApp 是该根元素的模块名称。

  • ng-controller="MyCtrl": 定义控制器名称为 MyCtrl ，将控制器绑定到一个 HTML 元素上。

  • {{count}}：将 $scope.count 显示在 HTML 页面中。

  • ng-click="increment()"：为 +1 按钮绑定 $scope.increment 方法。

  • app.controller('MyCtrl', function($scope){...}：定义 MyCtrl 控制器，其中的 $scope 服务用于实现 HTML、JavaScript 数据的双向绑定。

3. 运行效果

第一个 AngularJS 应用程序效果

总结

本文介绍了 AngularJS 的第一个应用程序，包括如何引入 AngularJS 库文件、如何编写 HTML 文件、如何运行效果等。AngularJS 简化了 HTML，使得 JavaScript 开发更加快捷高效。