Angular CLI Primer

What is Angular CLI?

Angular Command Line Interface, makes it easy to create an application that works and follows best practices right out the box.
It takes care of most of managing the dependencies and boiler plate code when creating Angular projects.

Requirements 

• Node (Version  8 or higher)
• NPM (usually bundles with node, version 5 or higher)
• Code editor tools (ex. Visual Studio Code)

Checking for node version:

> node -v

Checking npm version

> npm -v

Installing Angular CLI

> npm install -g @angular/cli

Creating a new application

> ng new application_name

Some Useful Options Flag

• --help This applies to almost all, if not all, the command line interfaces used
• --dryRun or -d Displays files that would be generated when running the cli command
• --directory Specifies directory to where the application would be generated
• --skip-install Skips installation of dependency packages

Running the application

> ng serve -o

References

https://angular.io/

SOLID Principles in OOP

(S)ingle Responsibility Principle
This states that a class should only have a single responsibility.

(O)pen Closed Principle
Open for extension and closed for modifications.

(L)iskov Substitution Principle
Objects should be replaceable with instances of their subtypes

(I)nterface Segregation Principle
Many client-specific interfaces are better than one general-purpose interface

(D)ependency Inversion Principle
Depend upon abstractions, not concretions



Reference
https://en.wikipedia.org/wiki/SOLID

Entity Framework Core Notes Part 1

We execute command line commands to add/update database or to generate model from a database.
We can either execute them on the command line,  powershell or Visual Studio's package manager console.

On previous versions of Entity Framework, we need to execute the command below to setup migrations on the project, to create the migrations folder:

> enable-migrations 

This is already considered obsolete in Entity Framework Core. The Add-Migrations script automatically creates for you the migrations folder, unless you have specified it explicitly with specific command line parameters.


Commands (Package Manager Console):

Adding migration scripts to the project.

> Add-Migration

Specifying a Migration name

> Add-Migration MyFirstMigration

Specifying a Migrations output directory

> Add-Migration MyOtherMigration -OutputDir OtherMigrationsDirectory

Targeting a Project for Migration

> Add-Migration SpecifiedProjectMigration -Project OtherCodeFirstProject

Applying the Migration scripts to the Database

> Update-Database

The following command removes the previous Migration

> Remove-Migration


Creating your models from an existing database

> Scaffold-DbContext "<ConnectionString>" Microsoft.EntityFramework.SqlServer -OutputDir Models

Entity Framework Core 2.1 Package Installation

Entity Framework Core Packages
On your project install the following NuGet Packages

• Microsoft.EntityFrameworkCore
• Microsoft.EntityFrameworkCore.Design
• Microsoft.EntityFrameworkCore.Relational
• Microsoft.EntityFrameworkCore.SqlServer  -- Provider based
• Microsoft.EntityFrameworkCore.Tools -- (optional)

Installing the packages using Package Manager Console (Tools > NuGet Package Manager > Package Manager Console)

1. Make sure you are in the correct directory by typing in dir then press enter.
2. Install-Package <Package Name> 

Installing the packages using Visual Studio's NuGet Package Manager

1. Go to Tools > NuGet Package Manager > Manage NuGet Packages for Solution
2. Search for Microsoft.EntityFrameworkCore

Installing the packages by editing the Project (Visual Studio 2017)

Another way of installing the EF packages is by editing the project. Paste in the following inside the <Project> scope.

<ItemGroup>

   <PackageReference Include="Microsoft.EntityFrameworkCore" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="2.0.3" />

   <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.0.3" />

</ItemGroup>

Save project then on the Package Manager Console, enter the command below to restore the packages to the project:

> dotnet restore

TypeScript Fields

Just like regular OOP classes, you can define fields in a Typescript class. On the next section are samples on how you define them.

By default access modifiers on the fields are public, however you can explicitly set it to private or public.

class SampleFields {

id: number;

name: string;

description: string;

}

On the above example, field types are explicitly set.

A similar C# class would look like the following:

public class SampleFields
{
    public int id;
    public string name;
    public string description;
}

Do note that type can be inferred:

class SampleFields {

id = 0;

name = "";

description = "";

}

Fields can also be defined on the constructor:

class SampleFields {

constructor (public id = 0, public name = "", public description = "") {

}

}

or

class SampleFields {

constructor (public id: number, public name: string, public description: string) {

}

}

This is called shorthanding

The following statement would only set the fields as local to the constructor block, thus is different from the examples above.

class SampleFields {

constructor (id: number, name: string, description: string) {

}

}

Do note that when accessing class scoped fields, we need to use the this keyword

class SampleFields {

constructor (public id: number, public name: string, public description: string) {

}

setFields() {

this.id = 1;

this.name = "SomeName";

this.description = "Some Description";

}

}

This is it for Typescript fields for now, do leave me a comment if you have corrections or questions.

K, Bye!

TypeScript Setup for Visual Studio Code

1. Go to https://nodejs.org/
   
   
2. Download the installer you wish to install.
3. Run the installer
   
   
   
4. Open either command prompt or powershell and type in (-g parameter means global):
   npm install -g typescript
   
   
5. To verify that we have installed TypeScript successfully, type in the following in powershell:
   tsc --version
6. Open Visual Studio Code
7. Add a TypeScript configuration file (tsconfig.json) to the folder. A sample TypeScript config file can be found on the Visual Studio Code site: https://code.visualstudio.com/docs/languages/typescript
   
   
8. Now let's add a Type script file, add a HelloWorld.ts file
9. Place in the following code:
   

   export class HelloWorld {

   shout() {

   console.log("hello world");

   }

   }

   
   

   let helloWorld = new HelloWorld();

   helloWorld.shout();
10. Click on Task -> Run Build Task
    
    
    
11. Select tsc: build - tsconfig.json
    
    
    
12. 
    Open windows powershell, go to file folder and type in the following:
    node helloWorld.

Finalize vs Dispose

In my opinion the difference between "Finalize" and "Dispose":

• Finalize is always called by the GC, so we could never determine when this would happen.
• Finalize cannot be overriden or called.
• In order to use Dispose(), the class should impelement the IDisposable interface.
• Dispose() is the right place for freeing up unmanaged resources like DB connection, handles, etc...
• Dispose() is called when using the "using" block.