什么是 Single Page Application
Single Page Application（SPA）是一种现代 Web 应用程序的架构模式，它通过 AJAX 技术实现页面的无刷新跳转，实现了与传统多页应用相比更快的响应速度和更好的用户体验。SPA 的特点是只有一个 HTML 页面，所有的内容都是通过 JavaScript 动态加载和渲染的。
AngularJS 中的 SPA
AngularJS 是一个流行的前端框架，它提供了很多工具和功能来构建 SPA 应用。在 AngularJS 中，我们可以使用路由（Route）来实现页面的跳转和渲染，使用控制器（Controller）来管理数据和业务逻辑，使用指令（Directive）来封装页面的组件和功能。
路由
AngularJS 的路由是通过 ngRoute 模块实现的，它可以将 URL 映射到指定的模板和控制器，从而实现页面的跳转和渲染。下面是一个简单的路由配置示例：
-- -------------------- ---- ------- ----------------------- ------------ -------------------------- ------------------------ - -------------- ---------- - ------------ ------------ ----------- ---------------- -- --------------- - ------------ ------------- ----------- ----------------- -- ------------ ----------- --- --- ----展开代码
在这个示例中，我们定义了两个路由：“/”和“/about”，它们分别对应了 home.html 和 about.html 两个模板，以及 HomeController 和 AboutController 两个控制器。当用户访问这些 URL 时，AngularJS 会自动加载对应的模板和控制器，并将它们渲染到页面中。
控制器
在 AngularJS 中，控制器是用来管理数据和业务逻辑的，它们可以通过 $scope 对象来与页面上的元素进行绑定。下面是一个简单的控制器示例：
angular.module('myApp') .controller('HomeController', ['$scope', function($scope) { $scope.message = 'Hello, World!'; }]);
在这个示例中，我们定义了一个 HomeController 控制器，它通过 $scope 对象将一个字符串“Hello, World!”绑定到了页面上。这个控制器可以被路由所使用，从而实现页面的渲染和数据的交互。
指令
在 AngularJS 中，指令是用来封装页面的组件和功能的，它们可以通过 HTML 标签、属性、类名等方式来调用。下面是一个简单的指令示例：
-- -------------------- ---- ------- ----------------------- ------------------------- ---------- - ------ - --------- ---- --------- ------------------------- ------ - -------- --- - -- ---展开代码
在这个示例中，我们定义了一个名为 myDirective 的指令，它通过 template 属性将一个包含变量 message 的 div 元素渲染到页面上。这个指令还定义了一个名为 message 的属性，它可以通过 @ 符号来与父级 $scope 对象进行绑定。
示例代码
下面是一个完整的 AngularJS SPA 应用示例代码，它包含了路由、控制器、指令等多个组件和功能。你可以通过它来深度了解 AngularJS 中的 SPA 架构模式，并学习如何构建一个完整的 Web 应用程序。
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ----- ---------------- ---------------- ----------- ------- ------------------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------------------ -------- ----------------------- ------------ -------------------------- ------------------------ - -------------- ---------- - ------------ ------------ ----------- ---------------- -- --------------- - ------------ ------------- ----------- ----------------- -- ------------ ----------- --- --- --- ----------------------------- ---------- ---------------- - -------------- - ------- -------- --- ------------------------------ ---------- ---------------- - -------------- - ----- -- --- ----- ------- --- ------------------------- ---------- - ------ - --------- ---- --------- ------------------------- ------ - -------- --- - -- --- --------- ------- ------ ----- ---- ------ ----------------------- ------ ----------------------------- ----- ------ ---- -------------- ------------- --------------- --------------------------- ------- -------展开代码
在这个示例中，我们定义了两个 HTML 模板“home.html”和“about.html”，它们分别对应了 HomeController 和 AboutController 两个控制器。我们还定义了一个名为 myDirective 的指令，它可以通过 message 属性来与父级 $scope 对象进行绑定。最后，我们使用 ng-view 指令来显示路由所渲染的页面内容，使用 my-directive 标签来显示指令所渲染的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cafe8ee46428fe9e39d0b6
