Angular 7

           First Angular App Step By Step 

Angular is a TypeScript -based open-source web application framework. Developed by Google. Angular is a platform for building mobile, desktop and web applications.

TypeScript:- TypeScript is an open-source programming language developed and maintained by Microsoft. TypeScript is a superset of JavaScript that compiles to plain JavaScript.

Development Environment Required Software:
1.Node : Node.js is an open-source, cross-platform JavaScript run-time environment that            executes JavaScript code outside of a browser.

Download Link:-  https://nodejs.org/en/download/
2. NPM: install when we install node js

3 Angular CLI : Angular CLI is a command-line interface tool that we use to initialize, develop and maintain Angular applications.

Download by Command : “npm install -g @angular/cli”

4 Visual studio code –Optional

Download Link:- https://code.visualstudio.com/download

How to check Required Software install or not?

Node js :       command        “node -v”
NPM     :       command        “npm -v”
Angular CLI: command        “ng v”

Folder structures explanations : https://angular.io/guide/file-structure

Create component ex.
ng g c employee/employee-create --spec=false

ng g c employee/employee-list --spec=false

why we use  –spec=false; and --skipTests

Routing:

const routes: Routes = [

{path:'addemployee',component:EmployeeCreateComponent},

{path:'listemployee',component:EmployeeListComponent},

];

Router Outlet :

RouterOutlet is a “placeholder” .. different component will be rendered using a router-outlet directive.

app.module.ts
he main entry point for your app. Compiles the applicationwith the JIT compiler and bootstraps the application's root ...

[routerLink]:

    <li class="list-group-item"><a [routerLink]="['/']">Home</a></li>

    <li class="list-group-item"><a [routerLink]="['/addemployee']">add</a></li>

Difference b/w src and routerLink

In Single Page Application (SPA), routerLink  will load the component into router-outlet without reloading/refreshing the page. On the other hand, clicking on a href link will refresh/reload the whole application or reset the application back to the start (state will get reset).

Bootstrap add on our Angular project:

Command : npm install bootstrap@4 jquery –save

                       @import "~bootstrap/dist/css/bootstrap.css";

After install add css file on our styles file.

DataBinding:

1.       We are creating a class like employee class for binding data

2.       We need API ex. https://localhost:4204/api/Users

3.       We need to create service file for binding data

create class command :-  ng g class employee/employee

Create  service class :- ng g service employee/employee –spec=false
ex.

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

import { HttpClient } from '@angular/common/http'

@Injectable({

  providedIn: 'root'

})

export class EmployeeService {

  constructor(private http: HttpClient) {

  }

  getUsers() {

   return this.http.get('https://localhost:4204/api/Users');

  }

}

HttpClientModule need to include on app.module.ts file

import { HttpClientModule } from '@angular/common/http';

ex.

imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

Injecting service in component

constructor(private employeeService: EmployeeService)

Methods

 this.employeeService.delete(Id)
 .subscribe((data: any) =>
    { 
       console.log(data);    

    }, (err: HttpErrorResponse) => {

      console.log(err);

    })

this.employeeService.getUsers()

      .subscribe((data: any) => {

        console.log(data);

        data.forEach(element => {

          const employee = new Employee();

          employee.Id = element.Id;

          employee.Name = element.Name;

          employee.Email = element.Email;

          employee.PhoneNo = element.PhoneNo;

          this.employeeList.push(employee);

        });

      }, (err: HttpErrorResponse) => {

        console.log(err);

      })

Summary  In this article we discussed basic of angular 7 and typescript. We setup environment for create angular application. In my next article we will learn about internationalization in Angular application.