使用.NET 6（全球市场）构建Angular 13应用程序——第1部分

寒冰屋

已于 2023-01-08 20:11:35 修改

阅读量543

点赞数

分类专栏： ASP.NET CORE 架构及框架 web前端文章标签： angular.js VS 2022 .NET 6

于 2023-01-08 19:55:35 首次发布

原文链接：https://www.codeproject.com/Articles/5329517/Building-an-Angular-13-Application-with-NET-6-Glob

版权

ASP.NET CORE 同时被 3 个专栏收录

1124 篇文章 55 订阅

订阅专栏

架构及框架

634 篇文章 16 订阅

订阅专栏

web前端

235 篇文章 4 订阅

订阅专栏

本文介绍了如何在VisualStudio2022中创建Angular13前端和.NET6后端应用，包括设置代理、创建多项目工作区和Angular库，并展示了如何集成TradingView小部件。此外，还详细讲解了创建WebAPI项目、设置启动项目和处理Angular代理设置的过程。

摘要由CSDN通过智能技术生成

介绍

在Visual Studio 2022中使用Angular创建ASP.NET Core应用程序

下载源代码 - 67.9 KB

介绍

在本文中，我将向您展示如何从Visual Studio 2022创建Angular 13前端和.NET 6后端，并介绍一些Angular基础知识，例如多项目工作区、Angular 库和开发代理。

在Visual Studio 2022中使用Angular创建ASP.NET Core应用程序

Visual Studio 2022引入了新的JavaScript和TypeScript体验。有三个独立的项目模板，独立的Angular、独立的React和独立的Vue。这些模板使用每个框架的本地CLI来创建这些前端项目。在本文中，我们只讨论Angular。

先决条件

Visual Studio 2022（17.1或更高版本）。在Visual Studio 2022的早期版本中，创建Angular 13（最新版本）时存在错误。因此，请确保您的Visual Studio 2022是最新的。
Angular CLI

安装Node.js 16或更高版本。

然后安装最新的Angular CLI。

npm install -g @angular/cli

此命令将安装Angular 13.3（最新版本）。

创建Angular应用

启动Visual Studio 2022，选择“Standalone TypeScript Angular Project”。

当您进入Additional information窗口时，检查Add integration for Empty ASP.NET Web API Project选项。此选项将文件添加到您的Angular模板，以便以后可以将其与ASP.NET Core项目挂钩。

选择此选项，项目创建后将设置代理。

aspnetcore-https.js , proxy.conf.js。

并在angular.json中配置代理。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "GlobalMarket:build:production"
    },
    "development": {
      "browserTarget": "GlobalMarket:build:development"
    }
  },
  "defaultConfiguration": "development",
  "options": {
    "proxyConfig": "src/proxy.conf.js"
  }
}

创建Web API项目

在同一个解决方案中，添加ASP.NET Core Web API项目。

将此后端项目命名为“GlobalMarket API”。

右键单击GlobalMarketAPI项目并选择Properties。转到调试菜单并选择打开调试启动配置文件UI选项。

取消选中启动浏览器选项。

设置启动项目

右键单击解决方案并选择Set Startup Project。将启动项目从Single startup project更改为Multiple startup projects。为每个项目的操作选择开始。

接下来，选择后端项目并将其移动到前端上方，以便它首先启动。

更改Angular代理设置

检查GlobalMarketAPI启动配置文件UI中的APP URL 。

然后，转到Angular项目的proxy.conf.js文件（查看src文件夹）。更新target属性以匹配applicationUrl。

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
    ],
    target: "https://localhost:7219",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

现在按“F5”或单击顶部菜单中的“开始”按钮启动解决方案。

Angular工作区

目前，前端是单个Angular项目。使用ng new创建Angular应用程序的Visual Studio 2022独立Angular项目。默认情况下，ng new在工作空间的根级别创建一个初始框架应用程序，以及它的端到端测试。该框架用于一个简单的Welcome应用程序，该应用程序已准备好运行且易于修改。根级应用程序与工作区同名，源文件位于工作区的src/子文件夹中。这个简单的结构很适合初学者。

在这篇文章中，我让它有点复杂，即在单个工作区中创建多个项目和库。

在解决方案资源管理器中右键单击“GlobalMarket”项目，选择“打开终端”。

它将在GloblaMarket文件夹下打开一个PowerShell终端窗口。

在GlobalMarket工作区中创建一个“trading” Angular项目。

ng generate application trading --style=css --routing=false

此命令在子文件夹项目/交易中为应用程序创建文件：

tsconfig.*.ts文件。它们扩展工作空间根tsconfig.ts并设置特定配置以编译应用程序(tsconfig.app.ts )或其单元测试(tsconfig.spec.ts)。
src文件夹，它包含应用程序的所有TypeScript、HTML和CSS源（更多关于src文件夹结构）。
用于单元测试的karma.conf.js Karma 配置文件。

现在我们需要将Visual Studio 2022 Standalone Angular模板创建的文件合并到新的交易项目中。

将GlobalMarket\src\中的所有文件复制到GlobalMarket\projects\trading\src\。然后删除GlobalMarket\src文件夹。

编辑GlobalMarket\angular.json。将代理配置添加到“trading”项目的“服务”部分。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "trading:build:production"
    },
    "development": {
      "browserTarget": "trading:build:development"
    }
  },
  "defaultConfiguration": "development",
  "options": {
    "proxyConfig": "projects/trading/proxy.conf.js"
  }
},

从项目中删除原始GlobalMarket项目。然后将“defaultProject”更改为“trading”。

"defaultProject": "trading"

在angular.json中保存更改。现在解决方案文件结构应如下所示：

单击“开始”按钮或按“F5”检查是否一切正常。

这与以前完全相同，验证了多个项目架构工作正常。

交易视图小部件

到目前为止，我们讨论的是解决方案的基础、.NET 6、Angular 13以及它们如何协同工作。

从现在开始，我们开始讨论如何构建一个简单的金融应用程序。TradingView是全球交易者和投资者使用的图表平台。

TradingView小部件是一个免费的小部件，可用于Ract、Angular和Vue。angular-tradingview-widget已经在github（https://github.com/mostafizur044/angular-tradingview-widget）中构建了。让我们先尝试安装它。

右键单击“GlobalMarket”项目并在终端中打开。运行以下命令：

npm install --save angular-tradingview-widget

安装失败，因为angular-tradingview-widget使用的是Angular 9，还不支持Angular 13。

不用担心。我们可以使用github存储库中的源文件来构建我们自己的tradingview-widget Angular 13库。

Angular库

Angular库是一个Angular项目，它与应用程序的不同之处在于它不能单独运行。必须在应用程序中导入和使用库。库扩展了Angular的基本功能。

现在我们在GlobalMarket工作区中创建tradingview-widget库。

ng generate library tradingview-widget

该ng generate命令在GlobalMarket工作区中创建了projects/tradingview-widget文件夹，在其NgModule中包含一个组件和一个服务。

生成新库时，工作区配置文件angular.json将使用库类型的项目进行更新。

"projects": {
  ...
  " tradingview-widget": {
    "root": "projects/my-lib",
    "sourceRoot": "projects/my-lib/src",
    "projectType": "library",
    "prefix": "lib",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        ...

解决方案资源管理器如下所示：

您可以看到tradingview-widget\src下有一个名为“public-api.ts”的文件。这是什么？

要使库代码可重用，您必须为其定义一个public API。这个“用户层”定义了库的消费者可以使用的内容。您库的用户应该能够通过单一import路径访问公共功能（例如NgModules，服务提供者和通用实用程序功能）。

您的库的public API在您的库文件夹中的public-api.ts文件中维护。在将库导入应用程序时，从此文件导出的任何内容都是public。使用NgModule来公开服务和组件。

/*
 * Public API Surface of tradingview-widget
 */

export * from './lib/tradingview-widget.service';
export * from './lib/tradingview-widget.component';
export * from './lib/tradingview-widget.module';

现在只需复制tradingview-widget.components.ts。tradingview-widget.model.ts和tradingview-widget.module.ts从https://github.com/mostafizur044/angular-tradingview-widget/tree/main/projects/angular-tradingview-widget/src/lib到GlobalMartket\projects\tradingview-widget\srec\lib。

将以下代码添加到public-api.ts。

export * from './lib/tradingview-widget.model';

让我们在命令行中构建tradingview-widget库。还是去PowerShell终端。

ng build tradingview-widget

Angular 13有一些构建错误，大多数是类型错误。让我们修复它。

属性“_widegtConfig”没有初始值设定项，并且未在构造函数中明确分配。

在tradingview-widget.component.ts中添加初始化程序：

private _widgetConfig: ITradingViewWidget = {};

看起来仍然不对，它抱怨在类型{}中缺少'symbol '。

在tradingview-widget.model.ts中声明ITradingViewWidget接口的“symbol”可以为空。

symbol?: string;

widgetType Type“未定义”不能用作索引类型。

添加null——抑制运算符“!”

new TradingView[widgetType!](config);

参数“onload”隐含具有“any”类型。

将'onload'声明为'any'。

appendScript(onload : any) {

updateOnloadListener Object可能是'null'。

更改updataOnloadListener如下：

updateOnloadListener(onload: any) {
    const script = this.getScriptElement();
    const oldOnload: any = script!.onload!.bind(script!);
    return script!.onload = () => {
      oldOnload();
      onload();
    };
};

再次构建。现在它成功了。

您可以发布您的库。

转到GlobalMarket\dist\tradingview-widget文件夹。您可以看到包文件已创建。运行“npm publish”发布库。

npm publish

如果您只在应用程序中使用自己的库，则不必将库发布到npm package管理器。你只需要构建它。

我们已经建立了tradingview-widget库，现在在交易应用程序中使用它。

在app.module.ts中按名称导入库。

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

import { AppComponent } from './app.component';
import { TradingviewWidgetModule } from 'tradingview-widget'

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

从tradingview-widget库中导入ITradingViewWidget和Themes，然后在app.component.ts中声明widgetConfig。

import { Component } from '@angular/core';
import { ITradingViewWidget, Themes } from 'tradingview-widget'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  widgetConfig: ITradingViewWidget = {
    symbol: 'MSFT',
    widgetType: 'widget',
    allow_symbol_change: true,
    height: 540,
    width: 980,
    hideideas: true,
    hide_legend: false,
    hide_side_toolbar: true,
    hide_top_toolbar: false,
    theme: Themes.LIGHT,
  };

  constructor() {
  
  }

  title = 'GlobalMarket';
}

最后更新app.comonent.html。

<tradingview-widget [widgetConfig]="widgetConfig"></tradingview-widget>

现在运行它，像小部件一样工作。

TradingView小部件具有许多内置功能。您可以将符号更改为您感兴趣的任何内容。

例如，我们可以将符号从Microsoft更改为Bit Coin。

单击符号字段。

在符号搜索对话框中，键入“BitCoin”。然后选择“BTCUSD”符号。

现在图表切换到比特币图表。

如果您担心汽油价格，请查看原油期货。

选择2022年7月NYMEX原油期货。

显示原油期货图表。

如何使用源代码

下载并提取源代码，使用Visual Studio 2022打开GlobalMaket.sln。

然后在解决方案资源管理器中右键单击GlobalMarket项目，选择“在终端中打开”。

首先需要构建tradingview-widget库。

npm install

ng build tradingview-widget

然后单击“开始”按钮或按“F5”。它应该同时启动GlobalMarket和GlobalMarketAPI项目，并在您的默认浏览器中显示交易视图。

结论

在本文中，我们从Visual Studio 2022 Standalone Angular模板开始，然后构建了一个tradingview-widget库，最后我们在交易应用程序中使用了这个库。

在第2部分中，我们将继续构建这个金融应用程序，在后端调用Yahoo Finance API，并使用Angular Material增强前端。

https://www.codeproject.com/Articles/5329517/Building-an-Angular-13-Application-with-NET-6-Glob

寒冰屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用.NET 6（全球市场）构建Angular 13应用程序——第1部分

介绍

在Visual Studio 2022中使用Angular创建ASP.NET Core应用程序

先决条件

创建Angular应用

创建Web API项目

设置启动项目

更改Angular代理设置

Angular工作区

交易视图小部件

Angular库

在应用程序中使用TradingView-Widget库

如何使用源代码

结论