What is Angular?

 

Angular is a development platform, built on TypeScript

As a platform, Angular includes:

  • A component-based framework for building scalable web applications
  • A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
  • A suite of developer tools to help you develop, build, test, and update your code

With Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

 

Building blocks of angular application

 

1.Modules

Module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application. @NgModuledecorator used for declaring module.

import { NgModule } from '@angular/core';
@NgModule({
 imports: [ ... ],
 declarations: [ ... ],
 bootstrap: [ ... ]
})
export class AppModule { }

 

2.Components 

Components are the building blocks that compose an application. A component includes a TypeScript class with a @Component decorator, an HTML template, and styles. The @Component decorator specifies the following Angular-specific information:

  • A CSS selector that defines how the component is used in a template. HTML elements in your template that match this selector become instances of the component.
  • An HTML template that instructs Angular how to render the component
  • An optional set of CSS styles that define the appearance of the template's HTML elements

 

The following is a minimal Angular component.

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

@Component({
 selector: 'hello-world',
 template: `
   <h2>Hello World</h2>
   <p>This is my first component!</p>
 `
})
export class HelloWorldComponent {
 // The code in this class drives the component's behavior.
}

 

3.Services 

Angular services are objects that get instantiated just once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e., data is available all the time. 

  • Services in Angular are simply typescript classes with the @injectible decorator. This decorator tells angular that the class is a service and can be injected into components that need that service. They can also inject other services as dependencies.
  • As mentioned earlier, these services are used to share a single piece of code across multiple components. These services are used to hold business logic.
  • Services are used to interact with the backend. For example, if you wish to make AJAX calls, you can have the methods to those calls in the service and use it as a dependency in files.
  • In angular, the components are singletons, meaning that only one instance of a service that gets created, and the same instance is used by every building block in the application.
  • A service can be registered as a part of the module, or as a part of the component. To register it as a part of the component, you’ll have to specify it in the providers’ array of the module.

 

4. Directives

Directives in Angular is a typescript class, which is declared as @directive. We have 3 directives in Angular. The directives are listed below −

  • Component Directives : These form the main class having details of how the component should be processed, instantiated and used at runtime.
  • Structural Directives : A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor.
  • Attribute Directives : Attribute directives deal with changing the look and behavior of the dom element. 

You can create your own directives as shown below.

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

 

5.Routing

Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page. This can be achieved using routing.

 You can create routes as shown below.

RouterModule.forRoot([
   {
      path: 'page1',
      component: Page1Component
   },
	{
      path: 'page2',
      component: Page2Component
   }
])

 

6.RouteGuards / AuthGuards

AuthGuard is used to protect the routes from unauthorized access in angular.

Auth guard provide lifecycle event called canActivate. The canActivate is like a constructor. It will be called before accessing the routes. The canActivate has to return true to access the page. If it returns false, we can not access the page. We can write our user authorization and authentication logic inside the canActivate function.


import { Injectable } from "@angular/core";
import {ActivatedRouteSnapshot,CanActivate,Router,RouterStateSnapshot,UrlTree} from "@angular/router";
import { AuthService } from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private authService: AuthService, private router: Router) { }

	canActivate(
 		route: ActivatedRouteSnapshot,
 		state: RouterStateSnapshot): boolean | Promise<boolean> {
 		var isAuthenticated = this.authService.getAuthStatus();
 		if (!isAuthenticated) {
  			this.router.navigate(['/login']);
 		}
 		return isAuthenticated;
	}

}

 

 

Next : Create your first angular application