AngularCLI

 Angular CLI

A command-line interface for Angular

The Angular CLI helps to quickly create an Angular application with all the configuration files and packages in one single command. 

The Angular CLI creates the Angular Application and uses Typescript, Webpack ( for Module bundling), Karma ( for unit testing), Protractor ( for an end to end testing).

Installing Angular CLI: npm install -g @angular/cli@latest

Angular CLI Version Check: ng --version

Creating a new Angular Application: ng new MyApp

The Angular CLI does the following
1. Creates a new directory MyAppis created
2. Sets up the folder structure for the application
3. Downloads and installs Angular libraries and any other dependencies
4. Installs and configures TypeScript.
5. Installs and configures Karma & Protractor for testing
6. Initializes the Git.

Running new Angular Project

ng serve 

npm start

The command compiles the Angular application and invokes the Webpack development server. 

The server keeps a watch on our project folder.

The Webpack Development server listens on HTTP Port 4200.

Angular project Folder structure

├── e2e
│ ├── src
│ │ ├── app.e2e-spec.ts
│ │ ├── app.po.ts
│ ├── protractor.conf.js
│ ├── tsconfig.e2e.json
├── node_modules
├── src
│ ├── app
│ │ ├── app-routing.module.ts
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ ├── assets
│ │ ├── .gitkeep
│ ├── environments
│ │ ├── environment.prod.ts
│ │ ├── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
├── .editorconfig
├── .gitignore
├── angular.json
│── browserslist
├── karma.conf.js
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

The root folder application contains subfolders e2e, node_modules and src.

e2e

This folder contains the files required for end to end tests by protractor. Protractor allows us to test our application against a real browser.

node_modules

All our external dependencies are downloaded and copied here by NPM Package Manager.

src

This where our application lives.

app folder

creates the root component, a root module, a unit test class to test the component.

.editorconfig: This is the configuration file for the Visual Studio code editor.

.gitignore: Git configuration to make sure autogenerated files are not committed to source control.

angular.json: This is the configuration file for Angular CLI. The older versions of the Angular used the file angular-cli.json

browserslist: Ensures the compatibility of the Angular app with different browsers.

karma.conf.js: The Configuration file for the karma test runner.

package.json: The package.json is an npm configuration file, that lists the third-party packages that your project depends on. We also have package-lock.json

README.md: The Read me file

tsconfig.json, tsconfig.app.json & tsconfig.spec.json are Typescript configuration files. 

The tsconfig.json is the Typescript compiler configuration file. This file specifies the compiler options required for the Typescript to compile (transpile) the project. 

The tsconfig.app.json is used for compiling the code, while tsconfig.spec.json for compiling the tests

tslint.json: tslint is a static code analysis tool. Used to check Typescript code quality. To check if TypeScript source code complies with coding rules. TSLint checks your TypeScript code for readability, maintainability, and functionality errors

The Component

The app.component.ts is the component that is added to the project by Angular CLI. 

You will find it under the folder app/src

import { Component } from '@angular/core';
@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})
export class AppComponent {

title = 'GettingStarted';

}

The component class is the most important part of application. 

It represents the view of the application.

A view is a region on the screen. 

It consists of three main parts i.e. a class, a class decorator, and an import statement

Import statement

import { Component } from '@angular/core';

The import statement is used to import the libraries that are used in component class.

Our Component is decorated with the @Component decorator, which is part of the @angular/core module.

Hence need to refer it in our class.

This is done using the import method.

Component class

export class AppComponent {

title = 'GettingStarted';

}

The component is a simple class. 

We define it using the export keyword. 

The other parts of the app can import it use it. 

The above component class has one property title. This title is displayed, when the application is run.

The component class can have many methods and properties. 

The main purpose of the component is to supply logic to our view.

@Component decorator

The @Component (called class decorator) provides Metadata about our component. 

The Angular uses this Metadata to create the view.

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

The @component Metadata above has three fields. The selector, templateURL & styleUrls

templateUrl

The templateUrl contains the path to the HTML template file. 

The Angular uses this HTML file to render the view.

styleUrls

The styleUrls is an array of Style Sheets that Angular uses to style our HTML file.

selector

The selector tells angular, where to display the template. In the example above selector is app-root. The Angular  whenever it encounters the above tag in the HTML file it replaces it with the template (app.component.html)

Template

The app.component.html is our template.The templateUrl in the component class above points to this class.

Root Module

Angular organizes the application code as Angular modules. 

The Modules are closely related blocks of code in functionality. 

Every application must have at least one module.

The Module, which loads first is the root Module. This Module is our root module.

The root module is called app.module.ts. (under src/app folder). 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

The structure of the Angular module is similar to the component class.

Module class

export class AppModule { }

@NgModule class decorator

The Angular Modules require a @ngModule decorator. @ngModue decorator passes the metadata about the module.

The @ngModule Metadata has four fields. The declarations, imports, providers, & bootstrap

Imports Metadata tells the angular list of other modules used by this module. 

The BrowserModule is the core angular module, which contains critical services, directives, and pipes, etc.

The AppRoutingModule is defines the application Routes

Declaration Metadata lists the components, directives & pipes that are part of this module.

Providers are the services that are part of this module, which can be used by other modules.

Bootstrap Metadata identifies the root component of the module.

App Routing Module

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

The AppRoutingModule in the file app-routing.module.ts defines the Routes of the application. These Routes tells Angular how to move from one part of the application to another part or one View to another View.

The Routes defined in the constant const routes: Routes = [];, which is empty

This Module is defined as a separate Module and is imported in  AppModule.

Bootstrapping our root module

The app.component.html is the file, which we need to show, It is bound to AppComponent component.
We indicated that the AppComponent is to be bootstrapped when AppModule is loaded
Now we need to ask the Angular to load the AppModule when the application is loaded. 

This is done in main.ts file

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.error(err));

The main.ts file is found under the src folder.

The Angular’s code by default runs in development mode.
the bootstrapModule method of platformBrowserDynamic library to bootstrap our AppModule

index.html

Index.html is the entry point of our application.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GettingStarted</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

The selector app-root, which we defined in our component metadata is used as an HTML tag. The Angular scans the HTML page and when it finds the tag <app-root><app-root> replaces the entire
content with content of app.component.html

Assets
A folder where you can put images and anything else to be copied wholesale when you build your application.

Environments
The environment folder is where we define environment variables for various build setups. The build setups can be development, production, testing & staging. The Angular has creates two build environments out of the box. One is development, which is the default and the other one in Production. The two files environment.ts is the default for development and the environment.prod.ts is for the production build.

polyfills.ts
Different browsers have different levels of support of the web standards. Polyfills help normalize those differences.

styles.css
Your Angular global styles go here.

test.ts
This is the main entry point for your unit tests.

What is Angular?

Angular is a development platform for building a Single Page Application for mobile and desktop. 

It uses Typescript & HTML to build Apps. 

The Angular itself is written using Typescript.

What is Angular Directive?

The Angular directive helps us to manipulate the DOM. 

It Can change the appearance, behavior, or layout of a DOM element using the Directives. 

They help you to extend HTML

There are three kinds of directives in Angular:

    1) Component Directive
    2) Structural directives
        Structural directives can change the DOM layout by adding and removing DOM elements. 

        All structural Directives are preceded by Asterix symbol. 

        ngFor, ngSwitch, ngIf
    3) Attribute directives
        An Attribute or style directive can change the appearance or behavior of an element.

        ngModel, ngClass, ngStyle

Component Communication

    1) Parent to Child Communication

        The parent component can pass the data to the child using the @input Property.

    2) Child to Parent Communication

        The Child to Parent communication can happen in three ways.

            1) Listens to Events from Child

            2) Uses Local Variable to access the child in the Template

            3) Uses a @ViewChild to get a reference to the child component

    3) Interaction when there is no parent-child relation

        Can share data is by using the services and observable.

Angular lifecycle hooks

The list of life cycle hooks, which angular invokes during the component life cycle. 

Angular invokes them when a specific event occurs.

    1) ngOnChanges
    2) ngOnInit
    3) ngDoCheck
    4) ngAfterContentInit
    5) ngAfterContentChecked
    6) ngAfterViewInit
    7) ngAfterViewChecked
    8) ngOnDestroy

Angular Pipes

Angular Pipes takes data as input and formats or transform the data to display in the template. We use them to change the appearance of the data before presenting it to the user.

Creating a new Angular Application:

ng new GettingStarted

The above command will create a folder GettingStarted and copies all the required dependencies and configuration settings. The Angular CLI does the following:

1) Creates a new directory GettingStarted is created

2) Sets up the folder structure for the application

3) Downloads and installs Angular libraries and any other dependencies

4) Installs and configures TypeScript

5) Installs and configures Karma & Jasmine for testing.

ng serve --open

or 

ng serve

The above command compiles the Angular application and starts the development server. 

ng serve builds our application but does not save the compiled application to the disk.

ng build will build and copy the output files to the dist\getting-started folder (Older versions copied the files to the dist folder).

Bootstrapping in Angular

What is a Bootstrapping?

    Bootstrapping is the process of initializing or loading our Angular application.

    Angular takes the following steps to load our first view.

        1) Loads Index.html

        2) Loads Angular & Third-party libraries & Application

        3) Executes application entry point (main.ts)

        4) Load & execute Root Module (app.module.ts)

        5) Executes the Root Component (app.component.ts)

        6) Displayes the template (app.component.html)

What is Webpack?

    - Webpack is a bundler. it scans our application looking for javascript files and merges them into one ( or more) big file. 

    - Webpack has the ability to bundle any kind of file like JavaScript, CSS, SASS, LESS, images, HTML, & fonts, etc.

    - The Angular CLI uses Webpack as a module bundler. 

    - Webpack needs a lot of configuration options to work correctly. 

    - The Angular CLI sets up all these configuration options behind the scene.

    - The Webpack traverses through our application, looking for javascript and other files, and merges all of them into one or more bundles. 

What is GULP?

    Gulp is a toolkit for automating painful or time-consuming tasks in development workflow.

    Gulp was created to be a task runner.

    npm install gulp-cli -g

    npm install gulp --save-dev