This component demonstrates fetching data from the server.
4 |
5 |
Loading...
6 |
7 |
8 |
9 |
10 |
Date
11 |
Temp. (C)
12 |
Temp. (F)
13 |
Summary
14 |
15 |
16 |
17 |
18 |
{{ forecast.date }}
19 |
{{ forecast.temperatureC }}
20 |
{{ forecast.temperatureF }}
21 |
{{ forecast.summary }}
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/ClientApp/src/app/fetch-data/fetch-data.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Inject, Component,
3 | AfterViewInit,
4 | AfterContentInit,
5 | DoCheck,
6 | OnInit,
7 | AfterContentChecked,
8 | OnDestroy, OnChanges, AfterViewChecked
9 | } from '@angular/core';
10 | import { HttpClient } from '@angular/common/http';
11 |
12 | @Component({
13 | selector: 'app-fetch-data',
14 | templateUrl: './fetch-data.component.html'
15 | })
16 | export class FetchDataComponent implements
17 | OnInit, DoCheck, OnChanges,
18 | AfterContentInit, AfterContentChecked,
19 | AfterViewInit, AfterContentChecked,
20 | AfterViewChecked, OnDestroy {
21 | public forecasts: WeatherForecast[] = [];
22 |
23 | constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
24 | http.get(baseUrl + 'weatherforecast').subscribe(result => {
25 | this.forecasts = result;
26 | }, error => console.error(error));
27 | }
28 |
29 | //create methods of all life cycles of angular
30 | ngOnChanges() {
31 | //Called before ngOnInit() (if the component has bound inputs) and whenever one or more data-bound input properties change.
32 | //Note that if your component has no inputs or you use it without providing any inputs, the framework will not call ngOnChanges().
33 | }
34 |
35 | ngOnInit() {
36 | // Called once, after the first ngOnChanges(). ngOnInit() is still called even when ngOnChanges() is not
37 | // (which is the case when there are no template-bound inputs).
38 | }
39 |
40 |
41 | ngDoCheck() {
42 | // Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.
43 | }
44 |
45 | ngAfterContentInit() {
46 | // Called once after the first ngDoCheck().
47 | }
48 |
49 | ngAfterContentChecked() {
50 | // Called after ngAfterContentInit() and every subsequent ngDoCheck().
51 | }
52 |
53 | ngAfterViewInit() {
54 | // Called once after the first ngAfterContentChecked().
55 | }
56 |
57 | ngAfterViewChecked() {
58 | // Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
59 | }
60 |
61 | ngOnDestroy() {
62 | // Called immediately before Angular destroys the directive or component.
63 | }
64 |
65 | }
66 |
67 | interface WeatherForecast {
68 | date: string;
69 | temperatureC: number;
70 | temperatureF: number;
71 | summary: string;
72 | }
73 |
--------------------------------------------------------------------------------
/ClientApp/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
Hello, world!
2 |
Welcome to your new single-page application, built with ASP.NET Core & Angular:
3 |
4 |
To help you get started, we've also set up:
5 |
6 |
Client-side navigation. For example, click Counter then Back to return here.
7 |
Angular CLI integration. In development mode, there's no need to run ng serve. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.
8 |
Efficient production builds. In production mode, development-time features are disabled, and your dotnet publish configuration automatically invokes ng build to produce minified, ahead-of-time compiled JavaScript files.
9 |
10 |
The ClientApp subdirectory is a standard Angular CLI application. If you open a command prompt in that directory, you can run any ng command (e.g., ng test), or use npm to install extra packages into it.
11 |
--------------------------------------------------------------------------------
/ClientApp/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | })
7 | export class HomeComponent {
8 | }
9 |
--------------------------------------------------------------------------------
/ClientApp/src/app/nav-menu/nav-menu.component.css:
--------------------------------------------------------------------------------
1 | a.navbar-brand {
2 | white-space: normal;
3 | text-align: center;
4 | word-break: break-all;
5 | }
6 |
7 | html {
8 | font-size: 14px;
9 | }
10 | @media (min-width: 768px) {
11 | html {
12 | font-size: 16px;
13 | }
14 | }
15 |
16 | .box-shadow {
17 | box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
18 | }
19 |
--------------------------------------------------------------------------------
/ClientApp/src/app/nav-menu/nav-menu.component.html:
--------------------------------------------------------------------------------
1 |
2 |
44 |
45 |
--------------------------------------------------------------------------------
/ClientApp/src/app/nav-menu/nav-menu.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-nav-menu',
5 | templateUrl: './nav-menu.component.html',
6 | styleUrls: ['./nav-menu.component.css']
7 | })
8 | export class NavMenuComponent {
9 | isExpanded = false;
10 |
11 | collapse() {
12 | this.isExpanded = false;
13 | }
14 |
15 | toggle() {
16 | this.isExpanded = !this.isExpanded;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/ClientApp/src/app/shared-services/data.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { DataService } from './data.service';
4 |
5 | describe('DataService', () => {
6 | let service: DataService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(DataService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/ClientApp/src/app/shared-services/data.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root'
5 | })
6 | export class DataService {
7 | constructor() { }
8 |
9 | //fetch data from server
10 | getData(){
11 |
12 | }
13 |
14 | }
15 |
--------------------------------------------------------------------------------
/ClientApp/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/ASP.NETCoreWithAngular/c33b53d1f45ac3eb40b808afc4db9dc7ac32ae6d/ClientApp/src/assets/.gitkeep
--------------------------------------------------------------------------------
/ClientApp/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/ClientApp/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/ClientApp/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ASP.NETCoreWithAngular
6 |
7 |
8 |
9 |
10 |
11 |
12 | Loading...
13 |
14 |
15 |
--------------------------------------------------------------------------------
/ClientApp/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | export function getBaseUrl() {
8 | return document.getElementsByTagName('base')[0].href;
9 | }
10 |
11 | const providers = [
12 | { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
13 | ];
14 |
15 | if (environment.production) {
16 | enableProdMode();
17 | }
18 |
19 | platformBrowserDynamic(providers).bootstrapModule(AppModule)
20 | .catch(err => console.log(err));
21 |
--------------------------------------------------------------------------------
/ClientApp/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * IE11 requires the following for NgClass support on SVG elements
23 | */
24 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
25 |
26 | /**
27 | * Web Animations `@angular/platform-browser/animations`
28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 | */
31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
32 |
33 | /**
34 | * By default, zone.js will patch all possible macroTask and DomEvents
35 | * user can disable parts of macroTask/DomEvents patch by setting following flags
36 | * because those flags need to be set before `zone.js` being loaded, and webpack
37 | * will put import in the top of bundle, so user need to create a separate file
38 | * in this directory (for example: zone-flags.ts), and put the following flags
39 | * into that file, and then add the following code before importing zone.js.
40 | * import './zone-flags';
41 | *
42 | * The flags allowed in zone-flags.ts are listed here.
43 | *
44 | * The following flags will work for all browsers.
45 | *
46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 | *
50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
52 | *
53 | * (window as any).__Zone_enable_cross_context_check = true;
54 | *
55 | */
56 |
57 | /***************************************************************************************************
58 | * Zone JS is required by default for Angular itself.
59 | */
60 | import 'zone.js'; // Included with Angular CLI.
61 |
62 |
63 | /***************************************************************************************************
64 | * APPLICATION IMPORTS
65 | */
66 |
--------------------------------------------------------------------------------
/ClientApp/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
3 | /* Provide sufficient contrast against white background */
4 | a {
5 | color: #0366d6;
6 | }
7 |
8 | code {
9 | color: #e01a76;
10 | }
11 |
12 | .btn-primary {
13 | color: #fff;
14 | background-color: #1b6ec2;
15 | border-color: #1861ac;
16 | }
17 |
--------------------------------------------------------------------------------
/ClientApp/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 |
--------------------------------------------------------------------------------
/ClientApp/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/ClientApp/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "forceConsistentCasingInFileNames": true,
7 | "strict": true,
8 | "noImplicitReturns": true,
9 | "noFallthroughCasesInSwitch": true,
10 | "sourceMap": true,
11 | "declaration": false,
12 | "downlevelIteration": true,
13 | "experimentalDecorators": true,
14 | "moduleResolution": "node",
15 | "importHelpers": true,
16 | "target": "es2017",
17 | "module": "es2020",
18 | "lib": [
19 | "es2018",
20 | "dom"
21 | ]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/ClientApp/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine",
8 | "node"
9 | ]
10 | },
11 | "files": [
12 | "src/test.ts",
13 | "src/polyfills.ts"
14 | ],
15 | "include": [
16 | "src/**/*.spec.ts",
17 | "src/**/*.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/Controllers/WeatherForecastController.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Mvc;
2 |
3 | namespace ASP.NETCoreWithAngular.Controllers;
4 |
5 | [ApiController]
6 | [Route("[controller]")]
7 | public class WeatherForecastController : ControllerBase
8 | {
9 | private static readonly string[] Summaries = new[]
10 | {
11 | "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
12 | };
13 |
14 | private readonly ILogger _logger;
15 |
16 | public WeatherForecastController(ILogger logger)
17 | {
18 | _logger = logger;
19 | }
20 |
21 | [HttpGet]
22 | public IEnumerable Get()
23 | {
24 | return Enumerable.Range(1, 5).Select(index => new WeatherForecast
25 | {
26 | Date = DateTime.Now.AddDays(index),
27 | TemperatureC = Random.Shared.Next(-20, 55),
28 | Summary = Summaries[Random.Shared.Next(Summaries.Length)]
29 | })
30 | .ToArray();
31 | }
32 | }
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
2 | WORKDIR /app
3 | EXPOSE 80
4 | EXPOSE 443
5 |
6 | FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
7 |
8 | # Install Node.js
9 | RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash - \
10 | && apt-get install -y \
11 | nodejs \
12 | && rm -rf /var/lib/apt/lists/*
13 |
14 | WORKDIR /src
15 | COPY ["ASP.NETCoreWithAngular.csproj", "./"]
16 | RUN dotnet restore "ASP.NETCoreWithAngular.csproj"
17 | COPY . .
18 | WORKDIR "/src/"
19 | RUN dotnet build "ASP.NETCoreWithAngular.csproj" -c Release -o /app/build
20 |
21 | FROM build AS publish
22 | RUN dotnet publish "ASP.NETCoreWithAngular.csproj" -c Release -o /app/publish
23 |
24 | FROM base AS final
25 | WORKDIR /app
26 | COPY --from=publish /app/publish .
27 | ENTRYPOINT ["dotnet", "ASP.NETCoreWithAngular.dll"]
28 |
--------------------------------------------------------------------------------
/Program.cs:
--------------------------------------------------------------------------------
1 | var builder = WebApplication.CreateBuilder(args);
2 |
3 | // Add services to the container.
4 |
5 | builder.Services.AddControllersWithViews();
6 |
7 | var app = builder.Build();
8 |
9 | // Configure the HTTP request pipeline.
10 | if (!app.Environment.IsDevelopment())
11 | {
12 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
13 | app.UseHsts();
14 | }
15 |
16 | app.UseHttpsRedirection();
17 | app.UseStaticFiles();
18 | app.UseRouting();
19 |
20 |
21 | app.MapControllerRoute(
22 | name: "default",
23 | pattern: "{controller}/{action=Index}/{id?}");
24 |
25 | app.MapFallbackToFile("index.html");
26 | ;
27 |
28 | app.Run();
--------------------------------------------------------------------------------
/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "iisSettings": {
3 | "windowsAuthentication": false,
4 | "anonymousAuthentication": true,
5 | "iisExpress": {
6 | "applicationUrl": "http://localhost:57042",
7 | "sslPort": 44385
8 | }
9 | },
10 | "profiles": {
11 | "ASP.NETCoreWithAngular": {
12 | "commandName": "Project",
13 | "launchBrowser": true,
14 | "applicationUrl": "https://localhost:7260;http://localhost:5260",
15 | "environmentVariables": {
16 | "ASPNETCORE_ENVIRONMENT": "Development",
17 | "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
18 | }
19 | },
20 | "IIS Express": {
21 | "commandName": "IISExpress",
22 | "launchBrowser": true,
23 | "environmentVariables": {
24 | "ASPNETCORE_ENVIRONMENT": "Development",
25 | "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
26 | }
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/WeatherForecast.cs:
--------------------------------------------------------------------------------
1 | namespace ASP.NETCoreWithAngular;
2 |
3 | public class WeatherForecast
4 | {
5 | public DateTime Date { get; set; }
6 |
7 | public int TemperatureC { get; set; }
8 |
9 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
10 |
11 | public string? Summary { get; set; }
12 | }
--------------------------------------------------------------------------------
/appsettings.Development.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft": "Warning",
6 | "Microsoft.AspNetCore.SpaProxy": "Information",
7 | "Microsoft.Hosting.Lifetime": "Information"
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/appsettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft": "Warning",
6 | "Microsoft.Hosting.Lifetime": "Information"
7 | }
8 | },
9 | "AllowedHosts": "*"
10 | }
11 |
--------------------------------------------------------------------------------
/wwwroot/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/ASP.NETCoreWithAngular/c33b53d1f45ac3eb40b808afc4db9dc7ac32ae6d/wwwroot/favicon.ico
--------------------------------------------------------------------------------