使用 Angular 作为前端构建 ASP.NET Core Web 应用程序

介绍

在本文中，我将演示如何使用 Angular 作为前端构建 ASP.NET Core Web 应用程序。在过去的几年里，Angular 和 ASP.NET Core 都提供了一些很大的改进。在本文中，我们将学习如何使用这两种技术使用实体框架构建 Web 应用程序。

架构

全栈开发

• 后端编程
• 前端编程
• UI 样式和 UX 设计
• 数据库设计、建模、配置和管理
• 网络服务器配置
• 网络应用部署

因此，在本文中，我将描述由 razor 页面、控制器和配置文件组成的 ASP.NET Core 后端如何与 Angular 前端相结合。

创建项目

我们可以使用 Visual Studio 社区来开发后端，使用 Visual Studio 代码来开发前端，因此我们可以从微软官网下载 .NET Core SDK 并按照安装步骤进行操作。

现在我们已经安装了 Visual Studio 的后端，下一步是创建和配置我们的 Angular 项目。为了设置 Angular 前端，我们可能还需要安装一些工具，例如 node、NPM 和 Angular CLI 或命令行界面。首先我们必须创建一个目录，现在我们可以使用 Angular CLI 来设置项目，因为它设置了大多数项目需要的所有项目。它还设置了一个使用 typescript 而不是普通 javaScript 的项目。

我们需要确保安装了节点，我们必须安装 Angular CLI 并创建一个项目。

打开命令提示符并确保您位于同一个 AngularProject 文件夹中。然后我们将使用以下命令来创建 Angular 项目文件。

让我们在 Visual Studio 代码中使用 Angular 创建一个消息应用程序，然后在 ASP.NET Core 控制器的帮助下创建一个消息传递应用程序，该控制器将有一个路由，为我们的前端提供我们的消息。

组件允许我们创建不同的视图，然后我们可以使用这些视图在 ASP.NET Core 的消息应用程序中发布和显示消息。我们将在我们的应用程序中构建组件、服务、指令和模块。

import {Component} from '@angular/core'  
import {WebService} from './web.service'  
  
@Component(  
    {  
        selector: 'messages',  
        template: 'this is the messages component<div *ngFor="let message of messages">{{message.text}} by: {{message.owner}}</div>'  
    }  
)  
export class MessagesComponent{  
    constructor(private webService:WebService){}  
    ngOnInit(){  
         this.webService.getMessages();     
    }  
   messages=[{text:'some text',owner:'Tim'},{text:'other message',owner:'Jane'}]  
}  

因此，要创建组件，请右键单击源文件夹内的 app 文件夹。选择新文件并将其命名为messages,component.ts。该组件将显示我们的消息应用程序中的所有消息。

然后在 app 组件中导入消息组件，如下所示：

import {MessagesComponent} from './messages.component'  

我们需要记住，为了正确加载，每个组件都需要注册到主 app 模块。

import {MessagesComponent} from './messages.component';  

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Http;  
using Microsoft.AspNetCore.Mvc;  
  
namespace MessageApplication.Controllers  
{  
    [Route("api/[controller]")]  
    [ApiController]  
    public class MessagesController : ControllerBase  
    {  
        public IEnumerable<Models.Message> Get()  
        {  
            return new Models.Message[]  
            {  
                new Models.Message  
                {  
                    Owner = "John",  
                    Text = "Hello"  
                },  
                new Models.Message  
                {  
                    Owner = "Tim",  
                    Text = "Hi"  
                }  
            };  
        }  
    }  
} 

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
  
namespace MessageApplication.Models  
{  
    public class Message  
    {  
        public string Owner { get; set; }  
        public string Text { get; set; }  
    }  
}  

import {HttpClient} from '@angular/common/http';  
  
import {Observable} from 'rxjs';  
import { Injectable } from '@angular/core';  
  
@Injectable()  
export class WebService{  
    constructor(private http: HttpClient){}  
  
    getMessages(){  
        return this.http.get('https://localhost:44369/api/Messages').toPromise();  
    }  
}