Angular Basics

Angular is component based framework. Each page in application has different components and tied to the root component.

Each component has its view (html) , css(stylesheets), ts(typescript files containing logic), spec.ts (used for unit testing component)

Prerequisites:
------------
Download
- Node.js (Runtime for angular applications)
- npm (node package manager - to install dependencies for angular)
- angular cli (command line interface for generating, running angular projects)

Angular CLI Commands:
----------------------
ng new (creates a fresh application)
ng serve (starts the application on node server)
ng generate component (To create a new component)

Visual Code Commands:
Open a terminal window - Control + ~

Module vs Components:
--------------------
Each module may have one or more components.
Each component will have HTML, logic and Data.

Steps to create a component:

Create a component.
 - Naming convention for component : .component.ts
 - Components uses decorator pattern provided by angular library component "Component". Place the below statements before defining the class in TS file.

@Component({
		selector: 'app-archive-data', --> This is selector element which we need to place in HTML file.
		templateUrl: './archive-data.component.html', --> HTML template for the data in the selector
		styleUrls: ['./archive-data.component.css'],
		providers: [NgbModalConfig, NgbModal]
		})

Register the component in a module.
 - Add the components in the app module (app.module.ts) inside delcarations array.

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ]})

Add HTML mark up.
 - Finally add the selector in the app.component.html

Angular CLI can generate component files automatically using a simple command. Use the below command to generate component files automatically.

 -------------------------------------------------------------[
 Use ctrl+~ to open the terminal window in visual studio code |
 -------------------------------------------------------------|
Command to generate components:                               |
															  |											
 Use command : ng g c componentName                         |
 g --> Generate                                               |
 c --> component                                              |
 -------------------------------------------------------------]

Directives:
-------------- 
 There are so many directive angular provides out of the box. Check this API reference for more directives and usage : https://docs.angularjs.org/api

Service: Services are created separately out of components so that components are not tightly coupled with services like calling external HTTP end points.
 Once the service class ts file is created, it should be injected into the components using dependency injection. After creating a service class we need to register the service class in the app module class under providers. See below example:

providers: [
    ViewActiveJobsComponent,
    ArchiverJobConfigurationComponent
  ],

 Dependency Injection: Dependency injection is handled by angular by injecting the dependencies during run time. There will be only one instance of service class per module even though multiple components use the same service class.

 Angular CLI can generate service file automatically using a simple command. Use the below command to generate service files automatically.

 -------------------------------------------------------------[
 Use ctrl+~ to open the terminal window in visual studio code |
 -------------------------------------------------------------|
Command to generate service:                               	  |
															  |											
 Use command : ng g s serviceName                           |
 g --> Generate                                               |
 s --> service                                                | 
 -------------------------------------------------------------]