使用Angular和MongoDB来构建具有登录功能的博客应用程序

news2024/10/5 18:23:22

Angular 是一个一站式框架，用于使用相同的可重用代码创建移动和 Web 应用程序。使用 Angular，您可以将整个应用程序划分为可重用的组件，从而更轻松地维护和重用代码。

在本教程系列中，您将学习如何开始使用 Angular 和 MongoDB 作为后端创建 Web 应用程序。您将使用 Node.js 来运行服务器。

在本教程的整个过程中，您将使用 Angular、Node.js 和 MongoDB 构建一个博客应用程序。

在本教程中，您将了解如何开始设置应用程序并创建 Login 组件。

开始使用

让我们开始安装 Angular CLI。

npm install -g @angular/cli

安装 Angular CLI 后，创建一个名为 AngularBlogApp 的项目文件夹。

mkdir AngularBlogApp
cd AngularBlogApp

从项目文件夹中，使用以下命令创建一个新的 Angular 应用：

ng new client

创建 client 应用程序后，导航到项目文件夹并使用节点包管理器 (npm) 安装所需的依赖项。

cd client
npm install

使用 npm 启动客户端服务器。

npm start

您应该让应用程序在 http://localhost:4200/ 上运行。

设置应用程序

您的 Angular Web 应用程序将有一个根组件。在 src/app 文件夹中创建一个名为 root 的文件夹。创建一个名为 root.component.html 的文件并添加以下 HTML 代码：

<h3>
    Root Component
</h3>

添加一个名为 root.component.ts 的文件并添加以下代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './root.component.html'
})
export class RootComponent {
  
}

删除文件 app.component.html、app.component.ts、app.component.scss 和 app.component.spec.ts。 src/app 文件夹内只有一个名为 app.module.ts 的文件。

在 app.module.ts 文件中导入 RootComponent 。

import { RootComponent } from './root/root.component';

将 RootComponent 包含在 ngModules 中并引导它。

@NgModule({
  declarations: [
    RootComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [RootComponent]
})

保存更改并重新启动服务器。当应用程序加载时，您将显示 RootComponent。

您将使用 Angular Router 在我们的博客应用程序中进行路由。因此，在 src/app 文件夹内名为 app.routing.ts 的新文件中导入与路由相关的依赖项。

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';

定义路由路径以及组件，如下所示：

export const AppRoutes: Routes = [
    { path: '', component: LoginComponent }
];

导出路由以创建包含所有路由提供者的模块。

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

以下是 app.routing.ts 文件的外观：

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';

import { LoginComponent } from './login/login.component';

export const AppRoutes: Routes = [
    { path: '', component: LoginComponent }
];

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);

如上面的代码所示，您尚未创建 LoginComponent。添加它是为了清楚起见。

在 app.module.ts 文件中导入 ROUTING 类。

import { ROUTING } from './app.routing';

将其包含在 NgModule 导入中。

imports: [
    BrowserModule,
    ROUTING,
    FormsModule
]

将 RouterOutlet 放置在 root.component.html 页面中。这是渲染路由组件的地方。

<router-outlet></router-outlet>

在 src/app 文件夹内创建一个名为 login 的文件夹。在 login 文件夹中，创建一个名为 login.component.ts 的文件并添加以下代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

  constructor() {
      
  }

}

创建一个名为 login.component.html 的文件并添加以下代码：