Monday, June 11, 2018

A2–Building App using Angular and ASP.NET Core 2.1 – GitHub & Forms

This post is a part of a series of posts that I am writing as I am building an app using Angular and ASP.NET Core 2.1. The first post can be found here.

My first goal is to put this code on GitHub so people can follow progress and goof ups. Here is the link. The repo is called A100. Why A100 name? Because I couldn’t come up with a better name. There is no logic. Everything can be changed at any time in software so I just picked something and moved on.

You can clone it into a folder and if you have latest .NET Core SDK 2.1 installed you will be able to run the project as shown below.

PS M:\github\A100\src\A100> dotnet watch run

dotnet watch run is the best thing about building .NET web apps. You can make changes to file and see your website updated. No need to keep refreshing.

There is just one issue with dotnet watch when working with Angular and ASP.NET Core. And that is multiple urls. In the image below, there are three ports listening 5001 (https), 5000 and some random port generated by ng 55267.

image

You can use any url to test your application.

Next I am creating different pages edit, insert, details for viewing product information.

Details Page

image

Add New Page

image

Edit Product Page

image

Delete Confirmation Page

image

Product List Page

image

For all the methods, I am doing console.log as shown below.

image

One of the things that tripped me off was on initial page load when model was null. I had to add *ngIf=”product” at the root div. So that’s all I could accomplish today. The code is pushed to github.

Next I am going to tackle form validation.