使用 Angular2 Cli 构建完整的 MEAN Web 应用程序教程-JavaScript中文网-JavaScript教程资源分享门户

本文将为大家介绍如何使用 Angular2 Cli 构建一个完整的 MEAN Web 应用程序。MEAN 是一种流行的 Web 应用程序开发技术栈，它由 MongoDB、Express、Angular 和 Node.js 组成。使用 Angular2 Cli 可以帮助我们更加高效地构建 Web 应用程序，并且它提供了许多有用的功能，如自动化构建、测试、打包等。

环境准备

在开始之前，我们需要安装以下软件：

Node.js：可以从官网下载并安装。
MongoDB：可以从官网下载并安装。

安装完成后，我们可以使用以下命令检查它们是否已经正确安装：

node -v
npm -v
mongo --version

创建 Angular2 项目

首先，我们需要使用 Angular2 Cli 创建一个新的项目。打开终端，进入到你想要创建项目的目录，然后执行以下命令：

ng new mean-app

这将创建一个名为 mean-app 的新项目，并自动安装所有必需的依赖项。在项目创建完成后，进入到项目目录中：

cd mean-app

集成 Express 和 MongoDB

接下来，我们需要集成 Express 和 MongoDB。在项目根目录下，创建一个名为 server 的目录，并在其中创建一个名为 index.js 的文件。在 index.js 中，我们需要编写以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
const port = process.env.PORT || 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/mean-app', { useNewUrlParser: true });

const router = express.Router();

router.get('/', (req, res) => {
  res.json({ message: 'Hello World!' });
});

app.use('/api', router);

app.listen(port);
console.log(`Server started on port ${port}`);

这段代码使用 Express 创建了一个简单的 Web 服务器，并连接到了 MongoDB 数据库。它还定义了一个简单的路由，用于处理根路径的 GET 请求。

接下来，我们需要在 package.json 中添加一个新的脚本，用于启动我们的 Web 服务器。在 scripts 中添加以下代码：

"start:server": "node server/index.js"

现在可以使用以下命令启动我们的 Web 服务器了：

npm run start:server

创建 Angular2 组件

现在，我们需要创建一个 Angular2 组件，用于显示从服务器获取的数据。在项目根目录下，创建一个名为 src/app 的目录，并在其中创建一个名为 message 的目录。在 message 目录中，创建一个名为 message.component.ts 的文件，并编写以下代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-message',
  template: '<h1>{{ message }}</h1>'
})
export class MessageComponent implements OnInit {
  message: string;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api').subscribe((data: any) => {
      this.message = data.message;
    });
  }
}

这段代码使用 HttpClient 发送 GET 请求，并获取服务器返回的消息。然后，它将消息显示在页面上。

接下来，我们需要在 app.module.ts 中引入 HttpClient，并将 MessageComponent 添加到 declarations 中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { MessageComponent } from './message/message.component';

@NgModule({
  declarations: [
    AppComponent,
    MessageComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行应用程序

现在，我们已经完成了应用程序的开发。我们可以使用以下命令启动应用程序：

ng serve

这将启动一个开发服务器，并在浏览器中打开应用程序。现在，我们就可以看到从服务器获取的消息了。

总结

在本文中，我们学习了如何使用 Angular2 Cli 构建一个完整的 MEAN Web 应用程序。我们了解了如何集成 Express 和 MongoDB，并创建了一个 Angular2 组件，用于显示从服务器获取的数据。希望这篇文章能够帮助你更好地理解如何使用 Angular2 Cli 构建 Web 应用程序。

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