Node.js 和 AngularJS 虽然都以 “JS” 结尾,但它们实际上是两个不同的技术栈,分别服务于后端和前端。尽管如此,它们可以一起协作来构建完整的 Web 应用程序。
关系
Node.js: 是一个用于构建服务器端应用程序的 JavaScript 运行环境。它基于 Chrome V8 JavaScript 引擎,并且使用非阻塞 I/O 模型来提供高性能的网络服务。
AngularJS: 是一种前端框架,用于构建动态 Web 应用程序。它提供了数据绑定、依赖注入等特性,使得开发单页应用(SPA)变得简单。
使用场景
通常情况下,Node.js 会在后端处理逻辑和数据存储相关的任务,而 AngularJS 会在前端处理用户界面和交互。这两个框架可以通过 REST API 相互连接。
示例
假设有一个简单的待办事项列表应用,你可以使用 Node.js 来搭建一个后端 REST API,然后用 AngularJS 在前端显示这些数据。
后端 (Node.js)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let todos = [];
app.get('/api/todos', (req, res) => {
res.json(todos);
});
app.post('/api/todos', (req, res) => {
const todo = req.body;
todos.push(todo);
res.status(201).json(todo);
});
app.listen(3000, () => console.log('Server running on port 3000'));
前端 (AngularJS)
Todo List
- {{todo.text}}
angular.module('todoApp', [])
.controller('TodoController', function($scope, $http) {
$scope.todos = [];
$scope.newTodo = { text: '' };
$http.get('/api/todos')
.then(response => {
$scope.todos = response.data;
});
$scope.addTodo = function() {
$http.post('/api/todos', $scope.newTodo)
.then(response => {
$scope.todos.push(response.data);
$scope.newTodo = { text: '' };
});
};
});
这段代码展示了如何通过一个简单的 REST API 将 Node.js 作为后端,同时使用 AngularJS 处理前端的数据展示和用户输入。这就是为什么你在启动项目时会看到 node app.js 的命令,因为这是用来运行 Node.js 服务的。