Angular and Core project

 

Hi and welcome. This is tutorial for web applications build with Asp.Net Core 2 in back-end and Angular 5 as front-end

on Windows OS. We will also be using Visual Studio Code known as VS Code.

 

First you will need few things before we start:

 

Visual studio code: https://code.visualstudio.com/docs/?dv=win

Node.js be sure to download latest version of it:  https://nodejs.org/en/

Asp.net core 2: https://www.microsoft.com/net/download/thank-you/dotnet-sdk-2.1.3-windows-x64-installer

 

After downloading and installing all of the requirements open VS code and open terminal in VS code using ctrl + ` ( tilde button, left of key 1 on the keyboard).  Now open the Command Palette (ctrl+shift+P) and type “shell command” to find the Shell Command: Install ‘code’ command in PATH command.

With this we can open our projects from cmd or VS code terminal by typing in “code .”

  1. First approach

Go to the desired location of your new project and create new folder using mkdir command or do it manually with windows file explorer. After creating new folder open it in VS code terminal using cd command and go to path of your new folder.

After cd you can type first latter of desired folder’s name and press tab which will give you suggestions you can go to

 

 

 

 

Now we are going to create our project structure using command: dotnet new angular

When this is done we have to run “npm install” to restore all packages. You will get some warnings but there is nothing to worry about. It might take some time for this to complete depending on your computer and internet connection. Open the project using VS code File -> Open Folder and select folder where you created project, or simply type “code .” which will open new VS code with our project already inside it.

All you have to do now with this approach is type “dotnet run” and you are set to go!


2. Second approach

For this approach we do the same thing with creating new folder for our project and enter using terminal in VS code.

Now type “ng new {your folder name}”  which will create new folder with angular app.

Here, Angular stands for folder name

In project folder which for us is “Angular and Core” we create new folder with “mkdir” and enter it using “cd” command. Now we type “dotnet new webapi

 

We have 2 projects now, in one folder we have angular in the other Core. We will combine them with Cross-Origin Requests or simply called CORS.

Open Startup.cs in our Core application and in method Configure Services add the following code:

 services.AddCors(options =>
            {
                options.AddPolicy("AllowSpecificOrigin",
                    builder => builder.WithOrigins("http://localhost:4200").AllowAnyMethod().AllowAnyHeader());
            });

In method Configure add:

app.UseCors("AllowSpecificOrigin");

With this we finished creating this angular and core application. Now we are going to test it and try to explain why we think this is better approach and how it works.

From front-end we will call back-end API and render the result in App component.

Let’s add HttpModule into our app.module as such:

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


import { AppComponent } from './app.component';


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

Replace you code in app.component.ts with the following code:

import { url } from './url';
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  values = [];
  url = url + '/api/values'

  constructor(private http: Http) {}

  ngOnInit() {
    this.http.get(this.url).subscribe(res => this.values = res.json());
  }
}


In app.component.html add the following code:



<h2>Data from Core app: </h2>


<ul>

<li *ngFor="let value of values">

<h2>{{value}}</h2>

</li>

</ul>


We used magic string for back-end url ‘http://localhost:5000/api/values’  only for tutorial purpose but it is better to export this as new .ts file then import it wherever you need it like so:

Lastly  replace your app.component.ts with the following code:

import { url } from './url';
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  values = [];
  url = url + '/api/values'

  constructor(private http: Http) {}

  ngOnInit() {
    this.http.get(this.url).subscribe(res => this.values = res.json());
  }
}

Now we are going to run the application. In VS code open another terminal.

Before we continue we would like to suggest installing dotnet watch because it rebuilds our back-end whenever we make some changes to it. To do this all you have to do is add the following code to your .csproj file:

<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
</ItemGroup>

After adding Reference for dotnet watch we have to restore our packages so let’s run “dotnet restore” from our core project.

Now in one of the terminals go to your angular project folder and type “ng serve” and in the other terminal go to the core project and type “dotnet watch run“. With this we have completed this short tutorial and you can start building your web application, good luck!

2018-01-23T11:19:17+01:00 20 decembar, 2017|Blog|0 Comments