Angular is a front-end web development framework for JavaScript, designed to create single-page web applications or SPAs with reusable UI components and a modular architecture. Google has developed and now maintains the Angular framework.
It was first released in 2010 as AngularJS, which was a JavaScript-based web development framework, but later in the year 2016, Angular 2 was announced to be launched, which started using TypeScript (a superset of JavaScript) rather than the native JavaScript language.
There are many versions of angular, with new versions continuously released. These new versions make the angular framework seem much more difficult for a beginner to learn this language and comprehend the new changes.
In this article, we will provide you with a cheat sheet to use as a quick reference guide to the basics of Angular. It can be used by beginners to learn/remember different concepts, functions, and tools of the angular language.
Create & Run an Angular Project
Before you can create an angular project, you first need to install the NODE.JS into your computer machine. Angular possesses an full-fledged official CLI tool which manages projects, and is also required to install into your working environment. You can use the yarn & NPM to install the Angular CLI.
# Yarn
yarn global add @angular/cli
# NPM
npm install -g @angular/cli
After installing the Node.Js and angular CLI into the system, let’s make another angular project by using the following commands:
# for new project creation
ng new myNewProject
Once created, we can configure and run the angular application with either command –
# for developing
ng serve
# For Production
ng build –prod
Installing a Library or Libraries
The 3rd-party libraries from other developers make the development of the angular application much easier. Nowadays, almost all the developers use the installed external libraries to assist the development workflow of the angular application. There are mainly two ways of installing a library into angular. These two ways are as follows:
# Installing + configuring material library for Angular
ng add @angular/material
# Installing
npm install @angular/material
The first method is the recommended one, as it will not only install the library but will also configure it for you. But this special command will only work with packages optimized for Angular and unfortunately, not all library packages are optimized for angular. Hence, you need to use the other method to install the library packages.
Component in Angular
Components are the basic building blocks of a web application powered by angular architecture. One can consider the angular components as user-defined HTML tags, having a user-defined behavior. By default, the angular applications use the main component named app, which is located in the src/app and is rendered when the application is executed.
All other components are harbored in this main component, the app. Other components can also have many more components inside them, called their children’s components.
Angular CLI can be used to create various angular components. The CLI command for creating a component is as follows:
# to create a component
ng generate component myComponent
Angular developers can also use shorthand commands to achieve the exact same functions but more efficiently.
# Shorthand command to create a component
ng g c MyComponent
The above commands will not only create the component but will also generate the associated components files for HTML, CSS, and TypeScript in the folder by similar naming. The files created alongside the component class are as follows:
- /src/app/my-component/.component.html
- **.component.css
- **.component.spec.js
- **.component.js
Angular Component Lifecycle event HOOK
Components are a crucial part of any angular application and each component has a life cycle of its own, managed by the angular program. This lifecycle begins the moment Angular instantiates the component when the component is rendered and inserted into the DOM, with or without its child components. The lifecycle of the components ends only when they get destroyed and removed from the DOM.
The component emits various significant events during this lifecycle. You can hook into these events by defining a set of methods in the class of the given component. Here is a quick list of some of the hooks available to use in the angular language with a little brief:
ngOnInit: It is used to initialize data into a component.
ngAfterContentChecked: This lifecycle hook is executed after every check of a component’s content.
ngDoCheck: It is used when a change detection run is done.
ngOnChanges: This is executed when the input and output properties of the component change.
ngAfterContentInit: This hook is called upon after the content of a component has been initialized.
ngOnDestroy: The hook is used once to destroy the component and remove it from the DOM
ngAfterViewChecked: After every check of a component’s view, this hook is called.
ngAfterViewInit: Runs after the initialization of the view of a component.
Services
In angular, the services refer to an object designed to fetch the data and logic from the backend that can be shared with the angular components.
Services are also typescript classes just like components, but unlike components, services only have a Typescript file.
All the tasks performed by using services can also be done by using the components. But it is recommended to leverage services for all the complex tasks, to make the component as simple as possible.
We can create services by using the following command:
# Shorthand method
ng g s MyService
# Common method of creating services
Ng generate service MyService
Services generally are embedded or included into other places of the application. In most cases, it is injected into the components. Here is the line of the command used to inject service into the components.
import { Injectable } from ‘@angular/core’;
@Injectable()
export class MyService {
constructor() { }
}
Other than the @Injectable () decorator, there are @NgModule and @Component class decorators for injecting services anywhere in the application.
Conclusion
Angular is a huge programming technology, with many developers actively working to make it better. Hence, there is just no way we can cover all the things the angular has to offer.
We do hope this angular cheat sheet has helped you in creating a better understanding of the Angular framework without getting overwhelmed by it.
Read Also: viralmagazinenews
