WEB - AngularJS and Typescript

Source code https://github.com/mattcoder2017/CoreTypescript/tree/master/WebApplication1

AngularIO:  https://angular.io/

Nodejs vs angular compatiblity matrix

https://angular.io/guide/versions

ngx bootstrap & modal

https://valor-software.com/ngx-bootstrap/#/components/modals?tab=overview

Angular Material Caroussel

https://material.angular.io/guide/getting-started

Ngx datatable

https://swimlane.github.io/ngx-datatable/

Material Carousel

https://gbrlsnchs.github.io/material2-carousel/

nvm in linux https://tecadmin.net/install-nvm-centos-8/#:~:text=A%20shell%20script%20is%20available%20for%20the%20installation,creates%20a%20.nvm%20directory%20under%20the%20home%20directory.

nvm to switch between nodejs version

1. Install Chocolatey (Package Manager): nvm can be installed on Windows using Chocolatey, a popular package manager for Windows. If you don't already have Chocolatey installed, follow these steps to install it:

   Open a PowerShell terminal as an administrator (right-click on PowerShell and select "Run as administrator") and run the following command:

   powershellCopy code

   Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

   This command will download and install Chocolatey.

2. Install nvm using Chocolatey: After Chocolatey is installed, you can use it to install nvm. Open a new PowerShell terminal (as administrator) and run the following command to install nvm:

   powershellCopy code

   choco install nvm

3. Verify nvm Installation: After the installation is complete, close and reopen your PowerShell terminal (or open a new one) to ensure the changes take effect. To verify that nvm is installed, you can run:

   powershellCopy code

   nvm version

   You should see the installed version of nvm displayed.

4. Install Node.js Versions with nvm: Now that nvm is installed, you can use it to install specific Node.js versions. For example, to install Node.js version 14, run:

   powershellCopy code

   nvm install 14

   To install Node.js version 16, replace 14 with 16 in the command above.

5. Switch Between Node.js Versions: To switch between installed Node.js versions, you can use the nvm use command followed by the version number. For example, to use Node.js version 14, run:

   powershellCopy code

   nvm use 14

Setup Angular in windows https://angular.io/guide/setup-local

https://unpkg.com/browse/@angular/core@15.2.0/package.json, 

Angular 15.2 supported by NodeJs version of 14.20, 16.13 etc

Udemy: https://commscope1.udemy.com/course/learn-to-build-an-e-commerce-app-with-net-core-and-angular/learn/lecture/18137468#overview
TypeScript:

Difference - Class syntax

 

tsconfig.json is needed at root level, sourceMap is used for browser debugging just like managed code

 Run commandline to get the angular cli

npm install -g @angular/cli

3 major commands to be used -new -build - serve

//alternatively you can use npm run ng <command>

//Or add the npm to enviornemental variable PATH

 

 

Use ng generate to add component. service automatically and they are referenced at appmodule.ts without manual effort.

https://github.com/angular/angular-cli/wiki/generate-component 

D:\SourceCode\FromAppToK8S2022\AngularNetCoreProj\ClientApp\src\app\product>ng g c productmodify --module=Product.module
CREATE src/app/product/productmodify/productmodify.component.html (32 bytes)
CREATE src/app/product/productmodify/productmodify.component.spec.ts (677 bytes)
CREATE src/app/product/productmodify/productmodify.component.ts (297 bytes)
CREATE src/app/product/productmodify/productmodify.component.css (0 bytes)

Create a subfolder right under root level name "ClientApp"

Move angular.json and tsconfig.json under root level to replace existed ones

Move everyfile from the src to ClientApp

 

Anyway, actually we are just interested in moving the package.json that download each angular module copy over to one in .net project, so that NPM under 

dependency will grab

{"name": "dutch-app","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},"private": true,"dependencies": {"@angular/animations": "^6.1.0","@angular/common": "^6.1.0","@angular/compiler": "^6.1.0","@angular/core": "^6.1.0","@angular/forms": "^6.1.0","@angular/http": "^6.1.0","@angular/platform-browser": "^6.1.0","@angular/platform-browser-dynamic": "^6.1.0","@angular/router": "^6.1.0","core-js": "^2.5.4","rxjs": "~6.2.0","zone.js": "~0.8.26"},"devDependencies": {"@angular-devkit/build-angular": "~0.8.0","@angular/cli": "~6.2.5","@angular/compiler-cli": "^6.1.0","@angular/language-service": "^6.1.0","@types/jasmine": "~2.8.8","@types/jasminewd2": "~2.0.3","@types/node": "~8.9.4","codelyzer": "~4.3.0","jasmine-core": "~2.99.1","jasmine-spec-reporter": "~4.2.1","karma": "~3.0.0","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~2.0.1","karma-jasmine": "~1.1.2","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.4.0","ts-node": "~7.0.0","tslint": "~5.11.0","typescript": "~2.9.2"}
}

 Modify angular.json file to allow cli build command to dump root level ts based ts or html files to the directory under wwwroot

 

Run ng build to flush the files to dist according to angular.json

main.ts will import app.module and in turn import app.component

• 
•  Move the UI to external template

• Create shop component to contains product and cart componenet

• Create Entity Framework entity and repository
  • Add Entities

• using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;namespace ASPCoreAngular.Persistence.Entity
  {public class Order{public int Id { get; set; }public DateTime Date { get; set; }public IList<OrderItem> OrderItems { get; set; }}
  }

  • Add dbcontext class,  be aware that data base table naming should follow - entityname+'s', e.g. Order.cs -> Orders table in database

• using ASPCoreAngular.Persistence.Entity;
  using Microsoft.EntityFrameworkCore;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;namespace ASPCoreAngular.Persistence
  {public class CoreContext : DbContext{public DbSet<Product> Products { get; set; }public DbSet<Order> Orders { get; set; }public DbSet<OrderItem> OrderItems { get; set; }public CoreContext(DbContextOptions<CoreContext> options): base(options){}protected override void OnModelCreating(ModelBuilder modelBuilder){modelBuilder.Entity<Order>().HasMany(e => e.OrderItems).WithOne(e => e.Order).HasForeignKey(e => e.OrderId);base.OnModelCreating(modelBuilder);}}
  }

  • Add dbcontext object to service registry at startup.cs

• Create Web API to fetch data

ASP CORE doesnt requires webapi route config like in .net 4.5, simply create Controller -> ApiController and everything is ready to go

 

• Create typescript entity type to ensure typesafe

Use  https://csharptotypescript.azurewebsites.net/   or  http://json2ts.com/ to obtain the typscritp type

Using https://json2csharp.com/ to convert json object to c# type

 

• Create share / dataservice to get the data 

Service (Injectable)

providedIn specify the module this service will be eligible to inject, 'root' is referring to the base module i.e. appmodule.

Unlike other components or module when the routing engine navigate the user to different view, their instances and cached data will be clear from memory, base module and its data will not be terminated and clear from the memory during routing.

 

 

• Create share / dataservice / Order to coordinate the addcart action
• Routing
  • 
• Checkout page
  • 

  • 

• Error popup using toastr https://github.com/scttcper/ngx-toastr

• 

  • npm install ngx-toastr --save
• Loading popup using ngxspinner https://www.npmjs.com/package/ngx-spinner#installation
  • Choose a spinning style: https://napster2210.github.io/ngx-spinner/
•  
•  
• Login with token
  • Add token creation webapi

• [HttpPost]public async Task<IActionResult> CreateToken([FromBody]LoginViewModel vm){if (ModelState.IsValid){var user = await userMgr.FindByNameAsync(vm.UserName);if (user != null){var result = await signinMgr.CheckPasswordSignInAsync(user, vm.Password, false);if (result.Succeeded){var Claimns = new[]{new Claim(JwtRegisteredClaimNames.Sub, user.Email),new Claim(JwtRegisteredClaimNames.Jti, new Guid().ToString()),new Claim(JwtRegisteredClaimNames.UniqueName, user.UserName)};var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["token:key"]));var cred = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);var token = new JwtSecurityToken(config["token:issuer"],config["token:audience"],Claimns,expires: DateTime.Now.AddMinutes(30),signingCredentials: cred);var results = new {token = new JwtSecurityTokenHandler().WriteToken(token),expire = token.ValidTo};return Created("", results);}}}return BadRequest();}

   

  
  
  • Add token authorize to api
    • 
  • Add token authentication at middleware - ConfigureService and Configure
    • 

      

       

  • Client Id token cache and forware at header in api call
    • 

       

• 2 ways binding
• Validation

 Parameterized component

 Param setting from Parent to Child and Child postback message to Parent