Becoming a MEAN Stack Developer: Angular Advanced Concepts Part 2

Introduction

In this blog we will cover Decorators, Routing and CCS in AngularJS. 

Decorators

As its name implies, decorators in Angular are used to provide extra information to a class, function, or property. To notify Angular that you have a component with a certain configuration, you must provide metadata for that class. All decorators start with a predefined set of settings. The default settings are supplied to the decorator whenever it is built with the appropriate configurations

There are four types of decorators in Angular:

1. Class Decorators
2. Property Decorators
3. Method Decorators
4. Parameter Decorators

Class Decorators

Class Decorators are the highest-level decorators that are used to explain what the classes are for. They tell Angular that a certain class is a component, also called a module.
For example:

import { NgModule, Component } from ‘@angular/core’;  

@Component({  

  selector: ‘example-component’,  

  template: ‘<div>Hello There! A component!</div>’,  

})  

export class ExampleComponent {  

  constructor() {  

    console.log(‘Hey I am a component!’);  

  }  

}  

@NgModule({  

  imports: [],  

  declarations: [],  

})  

export class ExampleModule {  

  constructor() {  

    console.log(‘Hey I am a module!’);  

  }  

} 

Notice that both classes by themselves are effectively the same. No code is needed within the class to tell Angular that it is a component or a module.

Property Decorators

Decorators for properties are used to add a personal touch to the properties of classes. Suppose you wish to link an input value to a property of a class. Defining this property in your class so that TypeScript is aware of it and then telling Angular that you want this property to be an input would be necessary in the absence of decorators.

Quoted from TypeScript’s docs: At runtime, the property decorator expression will be invoked as a function with the parameters: Class prototype for static members; class function Object() { [native code] } for instance members. By placing the @Input() decorator on top of a property, the Angular compiler will generate an input binding based on the name of the property.

import { Component, Input } from ‘@angular/core’;  

@Component({  

  selector: ‘example-component’,  

  template: ‘<div>Woo a component!</div>’  

})  

export class ExampleComponent {  

  @Input()  

  exampleProperty: string;  

}  

Method Decorators

In your class, a Method Decorator adds functionality to select methods. Declaring this before defining a method.

Quoted from TypeScript’s docs: The decorator may be used to observe, alter, or replace a method definition by applying it on the method’s Property Descriptor. It is not possible to apply a decorator to a method in a declaration file, on an overload, or in any other non-strict setting.

At runtime, you’ll see these three parameters sent to the expression for the method decorator: Class prototype for static members; class function Object() { [native code] } for instance members.@HostListener is an excellent illustration of this. This instructs Angular to invoke the decorated method with the corresponding host event whenever the corresponding host event occurs.

import { Component, HostListener } from ‘@angular/core’;

@Component({

  selector: ‘event-thumbnail’,

  template: ‘<div>A component Thumbnail!</div>’

})

export class EventThumbnailComponent {

  @HostListener(‘click’, [‘$event’])

  onHostClick(event: Event) {

    // clicked, `event` available

  }

}

Parameter Decorators

It is common practice to utilize parameter decorators in class constructors to add a little flair to the arguments you pass in. Take @Inject as an example. You may use it to tell Angular how you want to initiate a parameter.

import { Component, Inject } from ‘@angular/core’;

import { MyService } from ‘./my-service’;

@Component({

  selector: ‘event-thumbnail’,

  template: ‘<div>Event Thumbnail Works!</div>’

})

export class EventThumbnailComponent {

 constructor(@Inject(MyService) myService) {

 console.log(myService); // MyService

  }

}

Quoted from TypeScript’s docs: At runtime, you’ll see these three parameters sent into the function implementation of the parameter decorator’s expression: Class prototype for static members; class function Object() { [native code] } for instance members. It’s important to remember that a parameter decorator may only be used to verify if a method’s parameters have been declared.

Routing

Web apps rely heavily on their navigation features. Moving from one view (cost list) to another is not a notion in a single-page application (SPA). The success or failure of an app often hinges on its navigational features. Angular’s array of navigational options makes it possible to handle even the simplest of use cases inside an otherwise complicated framework. In Angular, routing refers to the process of defining the nav element and its accompanying view. To configure the app’s navigation, developers may use Angular’s dedicated Router module(AppRoutingModule).

Creating Routes

To create Route: 

const routes: Routes = [  

  { path: ‘about’, component: NameComponent },  

];  

Here,

Routes are the variables in the AppRoutingModule.

When a user requests http://localhost:4200/about url, the Path matches the about rule, and then NameComponent will be called.

Accessing routes

<router-outlet></router-outlet>  

Use routerLink property in the required place.

<a routerLink=“/about” routerLinkActive=“active”>Name Component</a>  

The routerlink specifies the route to be called using Path in this case. Sets the CSS class that will be used while the route is active. Sometimes we need to access routing from inside the component rather than the template. Then, proceed as follows: inject the instance of Router and ActiveRoute into the corresponding component.

import { Router, ActivatedRoute } from ‘@angular/router’;   

constructor(private router: Router, private route: ActivatedRoute)  

Relative Path

The root path is analogous to the URL of a web page, and it also allows relative paths. To access the NameComponent from another component, such as the homepage component, just provide the web url or folder path.

<a routerLink=“../name”>Relative Route to about component</a>  

To access the relative path in the component –

import { NavigationExtras } from ‘@angular/router’;   

this.router.navigate([‘about’], { relativeTo: this.route });  

CSS classes used by AngularJS

ng-scope

Usage: AngularJS applies this class to any element for which a new scope is defined. 

ng-isolate-scope

Usage: AngularJS applies this class to any element for which a new isolate scope is defined.

ng-binding

Usage:This class is applied by AngularJS to any element that is connected to a data binding, such as ng-bind or curly braces. 

ng-invalid, ng-valid

Usage:If a form control widget element’s input fails validation, AngularJS assigns this class to that element.

ng-pristine, ng-dirty

Usage: The ngModel directive in AngularJS applies the ng-pristine class to a new form control widget with no user involvement. The class is updated to ng-dirty when the user interacts with the form control.

ng-touched, ng-untouched

Usage: The ngModel directive in AngularJS assigns the ng-untouched class to a new form control widget that has not been blurred. The class is updated to ng-touched when the user blurs the form control.

Summary

• Angular is a strong Javascript framework for building web apps. With simple, declarative templates, you can create functionality rapidly.
• This project has certain requirements. To install Angular-based dependencies, we need to have NodeJS installed on your PC. To write the code, we need an editor.
• The Angular CLI makes it simple to construct an application that works straight away. You may create components, modules, and so forth.
• The angular.json file provides all of the project’s information. With the aid of this fileURLToPath, you may set a variety of things.
• In Angular, everything is a component, and every component is a part of some module, which contains other modules.
• There are two methods to add styles. Styles may be added to the styles.css file to be applied worldwide.
• There are lifecycle hooks that are called at certain points throughout the component’s execution in Angular. Understanding them is critical since we utilize them at various stages to trigger our reasoning.
• Every programme has reusable functionality, such as calling APIs and interpreting the answer. In Angular, we employ services for this kind of reusable logic.
• In Angular, everything is a component, and you must understand how to interact across components and transfer data around, such as from one parent to child components, child to parent components, sibling components, and so on.

Conclusion 

Mastering Angular is challenging. Its characteristics enable for sophisticated, contemporary web applications. Being funded by Google, you can anticipate this framework to become better over time. HTML, CSS, and Javascript are required for learning Angular. Angular requires basic Node.js and npm expertise. You may use a source-code editor to start Angular development, although an IDE might be more advantageous. Follow online lessons to learn Angular. Be constant and committed to improving learning. Also, after you’ve grasped Angular’s basics and are ready to create code, start a few projects. A certification programme may help you be employed by a respected company as an Angular developer. An Angular certification proves your talents and convinces employers you’re suited for the job. Also, review typical Angular interview questions to help you get your ideal job. I hope you have the information and resources you need to grasp Angular. If you need help, post here!