Angular Overview

Angular Overview

Good combination of templates, dependency injection

Npm install -g @angular/cli

basically used for installing the angular CLI in specifically mention package manager of npm

Ng help

Providing available online help related to angular by executing this command.

Ng generate -help

it gives an entire list of executable commands in angular with mentioning some common short description.

Ng new first--angular-project

used for creating one new basic project in angular, the developer should need to go to the corresponding workspace and executing this command for creating one new project

Cd first-angular-project

simply navigating to newly created project folder

Angular Tools

.Net Watch Run Tool

put in .csproj?

dotnet restore (after adding it)

dotnet watch run

Angular CLI

sudo npm install @angular/cli@latest -g

ng new name (create new Angular app)

angular-cli.json

copy into existing project

above DEPRACATED in Angular6 ...NOW called angular.json

cd .angular-cli.json ../

ng g component 'name'-form (creates a new Angular component)

the .spec.ts file is for Unit Tests (Jasmine)

this command also registers our component in app.module.ts (otherwise we'd have to 1) import @ top 2) @NgModule imports: []

Creating a Route

bottom of app.module.ts get bootstrap.com/components

Services

Package (encapsulate) calls to API/backend into services

services folder (under client app)

ng g service name (create 2 files .spec (Unit Tests)

after making-it have to register-it as a Dependency in appmodule.ts provides: [], (@ bottom)

Console -> Network (check API calls) XHR?

/ root of current drive

./ current directory

../ parent of current directory

ANGULAR rough code

[()] = 2 way binding

{{ }} = interopolated string

API Calls

1) Create a Resource (inside Resources in Controllers)

2) Create mapping between Resource and Class

MappingProfile.cs

Domain to API Resource (give out to user)

API Resource to Domain (taking input)

3) inject AutoMapper into Controller Constructor (IMapper)

API Resources 2 reasons to create:

1) Prevent API contract from breaking (classes (Domain) change)

2) Prevent Over-Posting attacks (contain properties shouldn't be set by client)

Testing APIs

postman chrome extension

Repository Pattern (Encapsulate queries)

collection of Domain objects

or Command/Query Objects (http://bit.ly/repo-vs-query)

Want-our controller to-be coupled to an Interface...NOT an implementation (helps w/ Unit Tests) (DON'T want to be dependent on External file-systems/Databases

when creating an Infterface...need to register them in startup.cs (Configure.services) Register as:

Transient - a seperate instance of repository for every use

Singleton - a single instance of repository during app. lifecycle

Scoped - A single instance of repository each scope. (this is how our Repository is w/ DbContext right now (won't make another call to database if object already in Memory)

Decoupling Controller from Entity Framework Core

Easy to replace w/ another O.R.M.

Object Oriented Programming - seperate what changes from what doesn't

Repository should-not expose IQueryable

Repository over repository

EFC already implements Repository and Unit of Work ...

...Want Controller Decoupled from EFC (Couple to Interface instead)

...Encapsulating Queries into one class

Not increased Complexity

Interface is a contract...NOT an implementation (helps w/ Decoupling )

Unit Of Work Pattern

context.SaveChanges();

Bad to put the above in Repository (Repo is a collection of Objects in memory)

You might have several different Repositories

So we'll use DbContext in Unit of Work AND Repository Class (nowhere else)

create a Mapping Dictionary keys = strings, values = Expressions

Dictionary(string, Expression(Func(Vehicle, object))

create IQueryAbleExtensions (Extension on IQueryAable class)

1) make Extensions folder @ root of project

2) class IQueryAbleExtensions public static class

3) Methods: public static IQueryable(T)ApplyOrdering(T)( )

allow us to use Generic(T) to decouple from particular objects

4) VehicleQuery: IQueryObject

public bool isSortAscending { get; set; } (not specific to just object (universal))

public string SortBy { get; set; }

Dependency Inversion Principle

High-level modules shouldn't depend upon low-level modules. Both should depend upon abstractions

Example: Controller ---= IRepository =-- Repository

REDUCES impact of changes!

Add a core folder to-make better! (Move Interfaces in there)

Paging On-the Server

LINQ

paging done in SQL Server...NOT in Memory

1) Vehicle(or whichever object)Query class

2) VehicleQuery resource (for calling Repository)

3) VehicleRepository (for logic)

Paging on the Client

1) need pagination component (raises an Event everytime we change page #)

2) Shared-folder (put component in there)

3) Query Result Class (Use Generic(T))

every class neds a Resource (for front-end of Angular)

4) then need mapper between Resource and Query Result Class

Querying / Filtering / Sorting in General

classes: NameObject Query ... NameObjectQueryResult

Resources: NameObject QueryResource ... QueryResult Resource

ObjectRepository:

queries data using dbContext

returns QueryResult

calls IQueryableExtension (for sorting...this takes an IQueryObject)

Controller

Takes-in-a ObjectQueryResource

Returns a QueryResultResource(ObjectResource) (use Generic(T))

GET

1) on-init... component uses services to bring in model-objects (objects matched to ObjectResource) (every component has a service class)

2) the service making API calls (through authenticated Http) to the relevant controller

3) Controller dependency injects: Imapper mapper, IModelClassRepository repo, IUnitofWork UnitOfWork,

4) Controller uses IRepository to query the database for desired object class...

IRepository (in case our repository (data access layer) changes in the future...we only have to change in one spot)

ClassRepository implements the IClassRepository... accesses the database using desired DbContext

5) Repository returns the desired class object and the controller uses IMapper to map the class object to a to a class resource for use by the component in the view (UI) (every returnable class object should have a resource in Angular)

Mapper for going between model classes and model resources (resources make for better use in component views

6) Unit of work and IUnit of work (for decoupling away database updating)

Unit of work implementing IUnitOfWork (injecting DbContext)

Querying Angular

1) Controller takes a ClassQuery object and returns a QueryResult(class)

ClassQuery object implements IQueryObject(T)

IQueryObject(T) and IQueryableExtensions go inside 'Extensions' folder of root project

2) Repository method takes a ClassQuery object and returns a QueryResult(T)

3) QueryResult(class) returned but needs to be mapped to QueryResultResource(class) for use in the component view