65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 .NET 6 (Global Market) 构建 Angular 13 应用程序 - 第一部分

Fred Song (墨尔本)
starIconstarIconstarIconstarIconstarIcon

5.00/5 (18投票s)

2022年4月11日

CPOL

7分钟阅读

viewsIcon

57756

downloadIcon

977

使用 Angular 13 和 .NET 6 构建一个简单的金融应用程序

引言

在本文中，我将向您展示如何使用 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 (最新版本) 时存在一个 bug。所以请确保您的 Visual Studio 2022 是最新的。
  • Angular CLI

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

    然后安装最新的 Angular CLI。

    npm install -g @angular/cli

    此命令将安装 Angular 13.3 (最新版本)。

创建 Angular 应用

启动 Visual Studio 2022，选择“独立 TypeScript Angular 项目”。

当您进入 **附加信息** 窗口时，选中 **添加针对空 ASP.NET Web API 项目的集成** 选项。此选项会将文件添加到您的 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 项目并选择 **属性**。转到 **调试** 菜单并选择 **打开调试启动配置文件** UI 选项。

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

设置启动项目

右键单击解决方案并选择 **设置启动项目**。将启动项目从 **单个启动项目** 更改为 **多个启动项目**。为每个项目的操作选择 **启动**。

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

更改 Angular 代理设置

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

然后，转到您的 Angular 项目的 proxy.conf.js 文件 (在 src 文件夹中查找)。将 target 属性更新为与 applicationUrl 匹配。

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

module.exports = PROXY_CONFIG;

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

Angular 工作区

目前，前端是单个 Angular 项目。Visual Studio 2022 独立 Angular 项目使用 ng new 创建 Angular 应用程序。默认情况下，ng new 在工作区的根目录下创建一个初始骨架应用程序，以及其端到端测试。该骨架用于一个简单的欢迎应用程序，该应用程序已准备就绪且易于修改。根目录下的应用程序与工作区的名称相同，源文件位于工作区的 src/ 子文件夹中。这种简单的结构对初学者来说已经足够了。

在本文中，我使其稍微复杂一些，即在单个工作区中创建多个项目和库。

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

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

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

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

此命令会在 projects/trading 子文件夹中创建应用程序的文件

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

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

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

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

"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"
  }
},

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

"defaultProject": "trading"

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

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

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

交易视图小部件

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

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

TradingView 小部件是一个免费的小部件，可以在 Ract、Angular 和 Vue 中使用。GitHub 上已经有一个名为 angular-tradingview-widget 的库 (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 会使用类型为 library 的项目进行更新。

"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 在 library 文件夹中的 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\porjects\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 ‘undefined’ 不能用作索引类型。

    添加 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 库

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

在 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 { }

在 app.component.ts 中从 tradingview-widget 库导入 ITradingViewWidget 和 Themes，然后声明 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 独立 Angular 模板开始，然后构建了一个 tradingview-widget 库，最后，我们在 trading 应用程序中使用了这个库。

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

历史

  • 2022 年 4 月 11 日：初始版本
© . All rights reserved.