Angular

Angular cli is a useful toolset which helps in development,testing and deployment of Angular applications.

Check if cli is installed

ng --version

Install latest version of angular cli

npm install -g @angular/cli@latest

Create new Angular project using cli

1.Create folder where you want to create Angular application

2.Open command prompt and navigate to the above folder

3.Type following command

ng new angular-app-name --dry-run

this command will show you the files which it will create without creating the files.It does thin in-memory.This is a good way to verify
if the command will produce the files which you are expecting it to produce.

ng new angular-app-name

4.Veify if it is working fine type

ng serve

this should open the application in browser

5.Type following command to open the application in visual studio code

code ..

the above command will open the new angular application in visual studio code

Generate project elements

component

ng generate component component-name

module

ng generate module module-name

directive

ng generate directive directive-name

 

Follow on:

Route Guards determine whether to allow or deny navigation within Angular application.

There are 4 types of routing guards in Angular:

• CanActivate Determines if a route can be activated
• CanActivateChild If route children can be activated
• CanLoad If lazy loaded child routes can be loaded.
• CanDeactivate Determines if the user can navigate away from route url

You attach a route guard to a route while defining the route using the route type.For example you can attach a route guard called DetailsGuard of type canActivate as:

const routes: Routes = [{ path: 'details',component: DetailsComponent,canActivate: [DetailsGuard]}

You define the CanActivate guard as:

@Injectable()
export class DetailsGuard implements CanActivate {
constructor(private router: Router) {}
canActivate():boolean {
//logic to determine true or false value
return true;
}
}

 

 

Follow on:

Angular framework provides dependency injection to automatically inject services. Whenever we specify a service as a constructor parameter ,Angular automatically injects the service instance in the class.You provide required services to the different components using constructor parameters.

In Angular a service is a class decorated with the @Injectable decorator:

import { Injectable } from '@angular/core';
@Injectable()
export class MockService {
constructor() { 
}
}

You can consume the declared service in your component as:

import { mock-service} from 'app/services/mock-service.service';
@NgModule({
declarations: [AppComponent]
imports: [BrowserModule],
providers: [MockService],
bootstrap: [AppComponent]
})

Though theoretically  you can use any logic in you service ,it is common to implement data access logic in service. Then you can inject service in your constructor class as:-

constructor (private http: HttpClient) {}
getStudents() : Observable<Student[]> {

return this.http.get(this.studentsUrl )
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

 

Follow on:

To make HTTP Requests in Angular we use the methods of HttpClient class which is defined in the @angular/common/http package. HttpClient uses XMLHttpRequest browser API behind the scenes.

HttpClient class provides the following methods each corresponding to the different HTTP verbs:

• get
• post
• put
• delete
• patch
• head
• jsonp

HttpClient provides several methods for making HTTP requests to the server.One of the methods is POST which is used for making POST requests to the server.All methods of the HttpClient class returns an object of Observable type.To execute the HTTP request subscribe to this Observable instance.

Before using the HttpClient class in your application define it as a dependency in the constructor of the component.

constructor(private http: HttpClient) {
}

HttpClient.POST method accepts URL, request body and optional http options as arguments.For example to make POST request to the URL http://www.employees.com
call the POST method as:

http.post<Employee>('http://www.employees.com',
{
employeeId:1,
Name:'FirstEmp'
}
);

Now define the above logic in a method called AddEmployee:

addEmpoyee(employee: Employee): Observable<Employee> {
return http.post<Employee>('http://www.employees.com',
{
employeeId:1,
Name:'FirstEmp'
}
);
}

finally to make the HTTP request to the server subscribe to the above method:

this.addEmpoyee(employee).subscribe(
employee=> {
console.log(employee);
}
);

 

Follow on: