Ứng dụng sử dụng ASP.NET Core 5 + Angular 9

Thứ Năm, 18/06/2020

Tram Ho

Cài đặt Visual Studio 2019 preview, .NET Core SDK 5

Tạo dự án mới

Lần chạy đầu tiên sẽ khá lâu, do cần tải về các thư viện. Kiên nhẫn chờ đợi khoảng 5 phút, chứ không phải Visual Studio 2019 preview bị treo. Trình duyệt web sẽ được tự động bật ra. Nếu có hộp thoại cảnh báo error, hãy cứ chấp nhận. Vì kết quả vẫn hiện ra:

Vài file Mã nguồn minh họa

File SKClientAppsrcappcountercounter.component.html

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Counter<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>This is a simple example of an Angular component.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">aria-live</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Current count: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>{{ currentCount }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-primary<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>incrementCounter()<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Increment<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

<h1>Counter</h1>

<p>This is a simple example of an Angular component.</p>

<p aria-live="polite">Current count: <strong>{{ currentCount }}</strong></p>

<button class="btn btn-primary" (click)="incrementCounter()">Increment</button>

File SKClientAppsrcappcountercounter.component.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span>

@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  selector<span class="token punctuation">:</span> <span class="token string">'app-counter-component'</span><span class="token punctuation">,</span>
  templateUrl<span class="token punctuation">:</span> <span class="token string">'./counter.component.html'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">CounterComponent</span> <span class="token punctuation">{</span>
  <span class="token keyword">public</span> currentCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

  <span class="token keyword">public</span> <span class="token function">incrementCounter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>currentCount<span class="token operator">++</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

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

@Component({

selector: 'app-counter-component',

templateUrl: './counter.component.html'

})

export class CounterComponent {

public currentCount = 0;

public incrementCounter() {

this.currentCount++;

}

File SKClientAppsrcappfetch-datafetch-data.component.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> Inject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> HttpClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/common/http'</span><span class="token punctuation">;</span>

@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  selector<span class="token punctuation">:</span> <span class="token string">'app-fetch-data'</span><span class="token punctuation">,</span>
  templateUrl<span class="token punctuation">:</span> <span class="token string">'./fetch-data.component.html'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">FetchDataComponent</span> <span class="token punctuation">{</span>
  <span class="token keyword">public</span> forecasts<span class="token punctuation">:</span> WeatherForecast<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">constructor</span><span class="token punctuation">(</span>http<span class="token punctuation">:</span> HttpClient<span class="token punctuation">,</span> @<span class="token function">Inject</span><span class="token punctuation">(</span><span class="token string">'BASE_URL'</span><span class="token punctuation">)</span> baseUrl<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    http<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token operator">&lt;</span>WeatherForecast<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">&gt;</span><span class="token punctuation">(</span>baseUrl <span class="token operator">+</span> <span class="token string">'weatherforecast'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>result <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>forecasts <span class="token operator">=</span> result<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> error <span class="token operator">=&gt;</span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">interface</span> <span class="token class-name">WeatherForecast</span> <span class="token punctuation">{</span>
  date<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  temperatureC<span class="token punctuation">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  temperatureF<span class="token punctuation">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  summary<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

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

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-fetch-data',

templateUrl: './fetch-data.component.html'

})

export class FetchDataComponent {

public forecasts: WeatherForecast[];

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {

this.forecasts = result;

}, error => console.error(error));

}

interface WeatherForecast {

date: string;

temperatureC: number;

temperatureF: number;

summary: string;

}

Các file mã nguồn khác có thể xem trong project vừa được sinh ra.

Cập nhật lên phiên bản mới nhất SKClientApppackage.json

<span class="token punctuation">{</span>
  <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"sk"</span><span class="token punctuation">,</span>
  <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"0.0.0"</span><span class="token punctuation">,</span>
  <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"ng"</span><span class="token operator">:</span> <span class="token string">"ng"</span><span class="token punctuation">,</span>
    <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"ng serve"</span><span class="token punctuation">,</span>
    <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"ng build"</span><span class="token punctuation">,</span>
    <span class="token property">"build:ssr"</span><span class="token operator">:</span> <span class="token string">"ng run SK:server:dev"</span><span class="token punctuation">,</span>
    <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"ng test"</span><span class="token punctuation">,</span>
    <span class="token property">"lint"</span><span class="token operator">:</span> <span class="token string">"ng lint"</span><span class="token punctuation">,</span>
    <span class="token property">"e2e"</span><span class="token operator">:</span> <span class="token string">"ng e2e"</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"@angular/animations"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/common"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/compiler"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/core"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/forms"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/platform-browser"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/platform-browser-dynamic"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/platform-server"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/router"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@nguniversal/module-map-ngfactory-loader"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"aspnet-prerendering"</span><span class="token operator">:</span> <span class="token string">"^3.0.1"</span><span class="token punctuation">,</span>
    <span class="token property">"bootstrap"</span><span class="token operator">:</span> <span class="token string">"4.5.0"</span><span class="token punctuation">,</span>
    <span class="token property">"core-js"</span><span class="token operator">:</span> <span class="token string">"3.6.5"</span><span class="token punctuation">,</span>
    <span class="token property">"jquery"</span><span class="token operator">:</span> <span class="token string">"3.5.1"</span><span class="token punctuation">,</span>
    <span class="token property">"oidc-client"</span><span class="token operator">:</span> <span class="token string">"1.10.1"</span><span class="token punctuation">,</span>
    <span class="token property">"popper.js"</span><span class="token operator">:</span> <span class="token string">"^1.16.0"</span><span class="token punctuation">,</span>
    <span class="token property">"rxjs"</span><span class="token operator">:</span> <span class="token string">"6.5.5"</span><span class="token punctuation">,</span>
    <span class="token property">"zone.js"</span><span class="token operator">:</span> <span class="token string">"0.10.3"</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"@angular-devkit/build-angular"</span><span class="token operator">:</span> <span class="token string">"^0.901.9"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/cli"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/compiler-cli"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@angular/language-service"</span><span class="token operator">:</span> <span class="token string">"9.1.11"</span><span class="token punctuation">,</span>
    <span class="token property">"@types/jasmine"</span><span class="token operator">:</span> <span class="token string">"~3.4.4"</span><span class="token punctuation">,</span>
    <span class="token property">"@types/jasminewd2"</span><span class="token operator">:</span> <span class="token string">"~2.0.8"</span><span class="token punctuation">,</span>
    <span class="token property">"@types/node"</span><span class="token operator">:</span> <span class="token string">"~12.11.6"</span><span class="token punctuation">,</span>
    <span class="token property">"codelyzer"</span><span class="token operator">:</span> <span class="token string">"^5.2.0"</span><span class="token punctuation">,</span>
    <span class="token property">"jasmine-core"</span><span class="token operator">:</span> <span class="token string">"~3.5.0"</span><span class="token punctuation">,</span>
    <span class="token property">"jasmine-spec-reporter"</span><span class="token operator">:</span> <span class="token string">"~4.2.1"</span><span class="token punctuation">,</span>
    <span class="token property">"karma"</span><span class="token operator">:</span> <span class="token string">"^5.0.2"</span><span class="token punctuation">,</span>
    <span class="token property">"karma-chrome-launcher"</span><span class="token operator">:</span> <span class="token string">"~3.1.0"</span><span class="token punctuation">,</span>
    <span class="token property">"karma-coverage-istanbul-reporter"</span><span class="token operator">:</span> <span class="token string">"~2.1.0"</span><span class="token punctuation">,</span>
    <span class="token property">"karma-jasmine"</span><span class="token operator">:</span> <span class="token string">"~2.0.1"</span><span class="token punctuation">,</span>
    <span class="token property">"karma-jasmine-html-reporter"</span><span class="token operator">:</span> <span class="token string">"^1.4.2"</span><span class="token punctuation">,</span>
    <span class="token property">"typescript"</span><span class="token operator">:</span> <span class="token string">"3.5.3"</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">"optionalDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"node-sass"</span><span class="token operator">:</span> <span class="token string">"^4.12.0"</span><span class="token punctuation">,</span>
    <span class="token property">"protractor"</span><span class="token operator">:</span> <span class="token string">"~5.4.2"</span><span class="token punctuation">,</span>
    <span class="token property">"ts-node"</span><span class="token operator">:</span> <span class="token string">"~8.4.1"</span><span class="token punctuation">,</span>
    <span class="token property">"tslint"</span><span class="token operator">:</span> <span class="token string">"~5.20.0"</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

{

"name": "sk",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"build:ssr": "ng run SK:server:dev",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

},

"private": true,

"dependencies": {

"@angular/animations": "9.1.11",

"@angular/common": "9.1.11",

"@angular/compiler": "9.1.11",

"@angular/core": "9.1.11",

"@angular/forms": "9.1.11",

"@angular/platform-browser": "9.1.11",

"@angular/platform-browser-dynamic": "9.1.11",

"@angular/platform-server": "9.1.11",

"@angular/router": "9.1.11",

"@nguniversal/module-map-ngfactory-loader": "9.1.11",

"aspnet-prerendering": "^3.0.1",

"bootstrap": "4.5.0",

"core-js": "3.6.5",

"jquery": "3.5.1",

"oidc-client": "1.10.1",

"popper.js": "^1.16.0",

"rxjs": "6.5.5",

"zone.js": "0.10.3"

},

"devDependencies": {

"@angular-devkit/build-angular": "^0.901.9",

"@angular/cli": "9.1.11",

"@angular/compiler-cli": "9.1.11",

"@angular/language-service": "9.1.11",

"@types/jasmine": "~3.4.4",

"@types/jasminewd2": "~2.0.8",

"@types/node": "~12.11.6",

"codelyzer": "^5.2.0",

"jasmine-core": "~3.5.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "^5.0.2",

"karma-chrome-launcher": "~3.1.0",

"karma-coverage-istanbul-reporter": "~2.1.0",

"karma-jasmine": "~2.0.1",

"karma-jasmine-html-reporter": "^1.4.2",

"typescript": "3.5.3"

},

"optionalDependencies": {

"node-sass": "^4.12.0",

"protractor": "~5.4.2",

"ts-node": "~8.4.1",

"tslint": "~5.20.0"

}

Clean project, sau đó build lại, để các thư viện có liên quan là mới nhất.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Ứng dụng sử dụng ASP.NET Core 5 + Angular 9

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript