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

作者 : 慕源网 本文共3410个字,预计阅读时间需要9分钟 发布时间: 2021-11-3 共75人阅读

介绍

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

架构

使用 ASP.NET Core 和 Angular 构建的任何 Web 应用程序的架构概述可以如下所示,并且可以按如下方式构建。我们将拥有一个可以为我们的 Web 应用程序提供服务的 ASP.NET Core 后端。该 API 将允许用户执行 CRUD 操作。检索到的数据将存储在服务器上的数据库中以便持久保存,最终它们可以使用实体框架进行存储。API 可以让我们为用户添加的所有数据提供服务。

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

在前端,我们将使用 Angular,通过 Angular,我们可以创建服务和组件来向后端发出请求以发布新数据并获取所有现有数据。在此类应用程序中,我们还可以通过用户注册和登录来引入身份验证。

全栈开发

为了使用 ASP.NET Core 和 Angular 构建 Web 应用程序,我们需要使用 Web 应用程序的前端(客户端)和后端(服务器端)。为了做到这一点,我们必须在 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 项目文件。

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

我们可以通过键入以下命令来访问 Angular 项目。

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

Angular CLI 将通过创建所有文件和文件夹结构来创建我们的项目。之后,它将安装项目运行所需的所有第三方软件包。

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

让我们使用入门模板打开 Web 应用程序。我们可以通过查看,然后集成终端和输入来做到这一点。

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

让我们在 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';  

现在创建一个 ASP.NET Core 项目来创建控制器,该控制器将有一个路由,为我们的前端提供我们的消息。

要创建项目,请按照以下步骤打开 Visual Studio。
  • 单击文件,然后单击新建。单击项目。
  • 选择 ASP.NET Core Web 应用程序,提供项目的名称和目录。
  • 单击创建。
  • 选择 .NET Core 版本和 Web API。
  • 然后单击确定以创建项目。

现在我们将实现一个控制器来实际传递我们的消息数据。我们将创建一个名为 MessageController 的新控制器。

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; }  
    }  
}  

现在让我们更新 Angular,以便从服务而不是本地数组显示数据。我们将向我们新创建的 Web 服务发送对我们的消息的请求,因此为此创建一个 angular 服务。

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();  
    }  
}  
现在为了显示消息,我们需要首先运行服务器,即 ASP.NET Core 应用程序,我们将从中检索消息及其发件人。

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

运行服务器后,我们可以看到上面的输出。这些消息将由 Angular 应用程序检索以显示在前端。

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

概括

在本文中,我创建了一个使用 Angular 作为前端和 ASP.NET Core 作为后端的消息传递应用程序。在应用程序中,我们使用 ASP.NET Core 创建控制器,该控制器将有一个路由,为我们的前端提供我们的消息。使用 Angular,我们访问服务器位置,检索消息数据并将其显示在前端。 


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

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

发表评论

开通VIP 享更多特权,建议使用QQ登录