单页应用（SPA） 是一种快速流畅的 Web 应用体验。AngularJS 是一种非常流行的前端框架，可以帮助我们简化构建 SPA 应用的过程。
本文将提供一个极简教程来让你快速开始使用 AngularJS 开发 SPA 应用。我们将以一个示例代码为例，来讲解如何使用 AngularJS 的核心概念。
步骤一：安装 AngularJS
首先，我们需要将 AngularJS 文件引入到我们的应用程序之中。你可以在官方网站上下载最新的 AngularJS 文件。然后，在你的 HTML 文件中添加以下代码以引入 AngularJS：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
步骤二：创建模块
AngularJS 将应用程序分成了不同的模块。每个模块都有自己的职责。在这里，我们将创建一个叫做 myApp 的模块。
var app = angular.module('myApp', []);在这个例子中，我们创建了一个名为 myApp 的新模块。[] 参数可以包含其它依赖项。在这里，我们没有添加任何依赖项。实际上，我们要使用的是 AngularJS 自带的一些依赖项。
步骤三：创建控制器
控制器用来控制 AngularJS 应用的行为。在这个例子中，我们将创建一个名为 myCtrl 的控制器。
app.controller('myCtrl', function($scope) {
$scope.firstName = '';
$scope.lastName = '';
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});在这个控制器中，我们定义了三个变量：firstName，lastName 和 fullName。我们将使用指令在 HTML 中使用这些变量。
步骤四：使用指令
指令用于将控制器中的变量和函数添加到 HTML 中。在这个例子中，我们将使用 ng-model，ng-controller 和 ng-bind 三个指令。
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="firstName" type="text" placeholder="First Name"><br>
<input ng-model="lastName" type="text" placeholder="Last Name"><br>
<h1>Hello {{fullName()}}!</h1>
</div>ng-app 指令指定了我们将要使用的模块名称。ng-controller 指令指定了我们将要使用的控制器名称。ng-model 指令用于将输入框的值绑定到控制器中定义的变量。ng-bind 指令用于将控制器中定义的变量绑定到 HTML 元素中。在这个例子中，我们将 fullName() 函数绑定到了 HTML 中。
步骤五：运行程序
完成代码的编写后，可以在 Web 浏览器中打开 HTML 文件，查看我们的应用程序。
总结
AngularJS 是一个非常流行的前端框架，用于构建快速流畅的单页应用程序。在这个极简教程中，我们创建了一个简单的应用程序，学习了 AngularJS 的核心概念：模块、控制器和指令。希望这篇文章能够帮助你快速入门 AngularJS，并开始构建自己的 SPA 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487debd48841e989466951b