介绍
AngularJS 是一个流行的前端框架，它可以帮助我们构建单页面应用（SPA）。本文将介绍如何使用 AngularJS 创建一个 SPA 脚手架。
准备工作
在开始之前，您需要安装以下软件：
创建 AngularJS 应用
首先，使用 AngularJS 的命令行工具 ng 创建一个新应用：
ng new my-app
这将创建一个名为 my-app 的新应用，并安装所有必要的依赖项。
创建路由
在 AngularJS 中，路由用于处理应用程序的不同部分之间的导航。我们将使用 ui-router 库来创建路由。
首先，安装 ui-router：
npm install angular-ui-router --save
接下来，我们需要在应用程序中添加路由。在 app.module.js 文件中，添加以下代码：
-- -------------------- ---- -------
----------------------- --------------
-------------------------------- ------------------- -
--------------
-------------- -
---- ----
------------ -----------
--
--------------- -
---- ---------
------------ ------------
---
----------------------------------
---这将创建两个路由：home 和 about。每个路由都有一个 URL 和一个模板 URL。
在 index.html 文件中，添加以下代码：
-- -------------------- ---- -------
----- ---------------
-----
-- -----------------------
-- -------------------------
------
---- --------------
------- -----------------------------
-------这将创建一个导航栏，其中包含链接到 home 和 about 路由。ui-view 元素将用于显示路由的模板。
创建组件
在 AngularJS 中，组件用于创建可重用的 UI 元素。我们将创建两个组件：home 和 about。
首先，在 app 文件夹中创建一个名为 components 的新文件夹。在 components 文件夹中，创建一个名为 home 的新文件夹。
在 home 文件夹中，创建一个名为 home.component.js 的新文件。添加以下代码：
angular.module('myApp')
.component('home', {
templateUrl: 'home.component.html',
controller: function() {
this.message = 'Welcome to the home page!';
}
});这将创建一个名为 home 的组件，它具有一个模板 URL 和一个控制器。
在 home 文件夹中，创建一个名为 home.component.html 的新文件。添加以下代码：
<h1>{{ $ctrl.message }}</h1>这将创建一个包含一个标题的模板。
接下来，我们将创建 about 组件。在 components 文件夹中，创建一个名为 about 的新文件夹。
在 about 文件夹中，创建一个名为 about.component.js 的新文件。添加以下代码：
angular.module('myApp')
.component('about', {
templateUrl: 'about.component.html',
controller: function() {
this.message = 'Learn more about us!';
}
});这将创建一个名为 about 的组件，它具有一个模板 URL 和一个控制器。
在 about 文件夹中，创建一个名为 about.component.html 的新文件。添加以下代码：
<h1>{{ $ctrl.message }}</h1>这将创建一个包含一个标题的模板。
完成应用
现在，我们已经创建了所有必要的组件和路由。最后，我们需要将这些组件添加到路由中。
在 app.module.js 文件中，将路由更新如下：
-- -------------------- ---- -------
----------------------- --------------
-------------------------------- ------------------- -
--------------
-------------- -
---- ----
---------- ------
--
--------------- -
---- ---------
---------- -------
---
----------------------------------
---这将将 home 和 about 路由更新为使用组件而不是模板。
现在，我们已经创建了一个基本的 AngularJS SPA 脚手架。您可以添加更多组件和路由以扩展应用程序。
结论
在本文中，我们介绍了如何使用 AngularJS 创建一个 SPA 脚手架。我们创建了两个路由和两个组件，并将它们添加到路由中。这个脚手架可以用作您自己的 AngularJS 项目的起点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673a83cf026c11b6ae298282