使用 Express.js 和 AngularJS 构建单页应用程序的完整指南-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，单页应用程序（Single Page Application，SPA）已经成为了一种非常流行的开发模式。它可以提供更流畅、更快速的用户体验，同时也更易于维护和扩展。在本篇文章中，我们将介绍如何使用 Express.js 和 AngularJS 构建一个完整的单页应用程序，并提供详细的学习和指导意义。

什么是 Express.js 和 AngularJS？

Express.js 是一个基于 Node.js 平台的 Web 应用程序框架，它可以帮助我们快速构建 Web 应用程序。它提供了强大的路由、中间件、模板引擎等功能，使得我们可以快速地搭建起一个完整的 Web 应用程序。

AngularJS 是一个由 Google 开发的 JavaScript 框架，它可以帮助我们构建动态 Web 应用程序。它提供了一些非常有用的功能，比如数据绑定、依赖注入、指令等，使得我们可以更加方便地处理前端逻辑。

构建一个简单的单页应用程序

在开始构建我们的单页应用程序之前，我们需要先安装 Express.js 和 AngularJS。我们可以使用 npm 来进行安装，具体命令如下：

npm install express angular --save

安装完成之后，我们可以开始构建一个简单的单页应用程序了。首先，我们需要创建一个 Express.js 的应用程序，并设置路由，代码如下：

// javascriptcn.com 代码示例
var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(3000, function() {
    console.log('Server running on port 3000');
});

这段代码中，我们首先引入了 Express.js 模块，并创建了一个 Express.js 应用程序。然后，我们使用 express.static 中间件来指定静态资源目录，这里我们将其设置为 public 目录。接着，我们设置了一个路由，当用户访问根路径时，返回 public/index.html 文件。最后，我们启动了应用程序，并监听 3000 端口。

接下来，我们需要在 public/index.html 文件中添加 AngularJS 的代码，以构建一个简单的前端应用程序。代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function($scope) {
            $scope.message = 'Hello, world!';
        });
    </script>
</head>
<body ng-controller="myCtrl">
    <h1>{{ message }}</h1>
</body>
</html>

这段代码中，我们首先引入了 AngularJS 的 JavaScript 文件，并创建了一个名为 myApp 的 AngularJS 应用程序。然后，我们定义了一个名为 myCtrl 的控制器，并将其绑定到页面的 body 元素上。在控制器中，我们定义了一个 $scope.message 变量，并将其设置为字符串 Hello, world!。最后，我们在页面上使用 {{ message }} 的方式来显示这个变量的值。

现在，我们已经完成了一个简单的单页应用程序的构建。当用户访问根路径时，会显示一个包含 Hello, world! 的标题的页面。这个页面是由 Express.js 服务器动态生成的，而其中的前端逻辑则由 AngularJS 处理。

前端路由

在上面的例子中，我们只是简单地将 AngularJS 控制器绑定到了页面的 body 元素上。但是，在实际的应用程序中，我们可能需要使用更加复杂的前端路由来处理不同的页面。

为了实现前端路由，我们可以使用 AngularJS 提供的 ngRoute 模块。首先，我们需要在页面上引入 angular-route.js 文件，并将其添加到 AngularJS 应用程序中：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ngRoute']);

        app.config(function($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'home.html',
                    controller: 'homeCtrl'
                })
                .when('/about', {
                    templateUrl: 'about.html',
                    controller: 'aboutCtrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });

        app.controller('homeCtrl', function($scope) {
            $scope.message = 'Welcome to my website!';
        });

        app.controller('aboutCtrl', function($scope) {
            $scope.message = 'This is my about page.';
        });
    </script>
</head>
<body>
    <ul>
        <li><a href="#/">Home</a></li>
        <li><a href="#/about">About</a></li>
    </ul>

    <div ng-view></div>
</body>
</html>

这段代码中，我们首先在页面上引入了 angular-route.js 文件，并将其添加到 AngularJS 应用程序中。然后，我们使用 app.config 方法来配置路由，使用 $routeProvider 来定义不同的路由规则。在这个例子中，我们定义了两个路由：/ 和 /about，分别对应着首页和关于页面。对于每个路由，我们都指定了一个模板文件和一个控制器。最后，我们使用 ng-view 指令来指定路由视图的位置。

在控制器中，我们定义了两个变量 $scope.message，分别对应着首页和关于页面的标题。在页面上，我们使用 ng-view 指令来显示路由视图，使用 ng-href 指令来定义路由链接。

现在，我们已经完成了一个包含前端路由的单页应用程序的构建。当用户访问不同的路由时，会显示不同的页面，并且页面中的标题也会随之变化。

后端 API

在实际的应用程序中，我们可能需要使用后端 API 来获取数据或进行其他操作。为了实现后端 API，我们可以使用 Express.js 提供的路由功能。

首先，我们需要创建一个 Express.js 的路由模块，并定义一些 API 接口，代码如下：

// javascriptcn.com 代码示例
var express = require('express');
var router = express.Router();

router.get('/api/users', function(req, res) {
    var users = [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' }
    ];
    res.json(users);
});

module.exports = router;

这段代码中，我们首先引入了 Express.js 模块，并创建了一个路由模块。然后，我们定义了一个名为 /api/users 的路由，当用户访问这个路由时，会返回一个包含三个用户的 JSON 数组。

接下来，我们需要在主应用程序中使用这个路由模块，代码如下：

// javascriptcn.com 代码示例
var express = require('express');
var app = express();
var api = require('./api');

app.use(express.static(__dirname + '/public'));
app.use('/api', api);

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(3000, function() {
    console.log('Server running on port 3000');
});

这段代码中，我们首先引入了 Express.js 模块，并创建了一个 Express.js 应用程序。然后，我们使用 express.static 中间件来指定静态资源目录，使用 app.use 方法来添加路由模块。在这个例子中，我们将路由模块添加到了 /api 路径下。接着，我们设置了一个路由，当用户访问根路径时，返回 public/index.html 文件。最后，我们启动了应用程序，并监听 3000 端口。

现在，我们已经完成了一个包含后端 API 的单页应用程序的构建。当用户访问 /api/users 路径时，会返回一个包含三个用户的 JSON 数组。

总结

在本篇文章中，我们介绍了如何使用 Express.js 和 AngularJS 构建一个完整的单页应用程序。我们首先构建了一个简单的单页应用程序，然后添加了前端路由和后端 API 的功能。这些例子可以帮助我们更好地理解如何使用 Express.js 和 AngularJS 来构建单页应用程序，同时也为我们提供了一些实用的技巧和指导意义。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656f423cd2f5e1655d7963e3