Angular Cheat Sheet for Web Development

Angular Cheat Sheet for Web Development

Angular Cheat Sheet for Web Development

Angular is defined as a front-end web development framework that is specifically used to build single-page web applications, which are also called SPAs. This platform uses TypeScript as the main programming language. The angular framework itself is coded in the TypeScript language. Angular is considered as a dogmatic framework. While developing apps with Angular, you must bear it in mind that it specifies a certain style and lays down a specific set of rules that development professionals need to learn, follow, and stick to. Hence, you need to learn Angular and its different modules, components, and tools which are necessary to make an app while using Angular.

As a beginner, you may hear about different versions of Angular, which is more likely to confuse you. Some versions include AngularJS, Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8, and recently in February 2020, and Angular 9 was introduced. There are only two different frameworks of Angular, which are; AngularJS and Angular.

This article will let you explore the Angular Cheat Sheet, which can be used as a quick reference guide while learning the language. Let’s go through the main concepts, commands, utilities, and other basics of Angular.

Angular CLI

The angular command-line interface, also called Angular CLI, is a very powerful and useful tool that enables developers to perform a variety of actions in an Angular project through the use of simple commands. The CLI takes care of everything, ranging from supporting a brand-new Angular project to building the project for production. 

Furthermore, CLI also allows developers to debug the application during development. It’s done through locally using a development server which overlooks the source files for changes. Once the change is made in any of the files, by default, it automatically recompiles the source code files and refreshes the app in the browser.

The CLI tool can be used directly in a command shell, or indirectly via an interactive UI, such as Angular Console.

Here are some ways to use the Angular CLI:

Command

Description

ng help

This command gives you options to get help about any utility command.

ng version

The command prints the version info of the currently running CLI.

ng new   

This command generates a new Angular project with the given name.

ng serve

This command Spins up the local development server and launches the web app locally in the browser. Moreover, this command also considers more parameters, like port and open. The server automatically rebuilds the app and reloads the page when any of the source files are changed.

ng build

Complies and builds the Angular app into a directory that can be deployed on the webserver.

ng generate

It is used to generate modules, services, components, classes, providers, pipes, etc.

 

            Setup

Command

Description

npm install -g @angular/CLI

Globally Install Angular CLI

 

            New Application

Command

Description

ng new best-practices --dry-run

just simulate ng new

ng new best-practices --skip-install

skip install means don't run npm install

ng new best-practices --prefix best

set prefix to best

ng new --help

check available command list

Lint

Lint enables you to check and make sure that code is free of code smells or bad formatting.

 

Command

Description

ng lint my-app --help

Checks available command list

ng lint my-app --format stylish

Formats code

ng lint my-app --fix

Fixes code bad formatting

ng lint my-app

Shows warnings

 

Blue Prints

Command

Description

ng g c my-component --flat true

Don't create a new folder for this component

--inline-template (-t)

Will the template be in .ts file?

--inline-style (-s)

Will the style be in .ts file?

--spec

Generates spec or not?

--prefix

Assigns own prefix

ng g d directive-name

Directive creation

ng g s service-name

Service creation

ng g cl models/customer

Customer class creation in the model's folder

ng g I models/person

Create interface creation in the model's folder

ng g e models/gender

Create ENUM gender creation in the model's folder

ng g p init-caps

Create pipe creation

 

Building & Serving

Command

Description

ng build

Build apps to dist. folder

ng build --aot

Builds app without a code which is not needed

ng build --prod

Builds for production

ng serve -o

Serves with browser opening

ng serve --live-reload

Reloads as per changes

ng serve -ssl

Serving while using SSL

 

Adding New Capabilities

Command

Description

ng add @angular/material

Adds Angular material into the project

ng g @angular/material:material-nav --name nav

Creates material navigation module

 

Components and Templates

Components are considered as the most basic UI building blocks of any Angular app. An app built in Angular contains a chain of elements.

Example

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

 

@Component({

            // component attributes

            selector: 'app-root',

            templateUrl: './app.component.html',

            styleUrls: ['./app.component.less']

})

 

export class AppComponent {

            title = 'my-cats-training';

}

 

Component Attributes

Attribute

Description

changeDetection

The change detection plan to use for this component.

viewProviders

Defines the set of injectable entities which are visible to its view DOM children

module

The module ID of the element which contains the component

encapsulation

An encapsulation rule used for the template and CSS styles

interpolation

Overrules the built-in encapsulation start and end delimiters

entryComponents

A collection of components which must be compiled along with this component.

preserveWhitespaces

If True, then preserve, or if False then removes, potentially redundant whitespace characters from the compiled template.

Previous Post Next Post
Hit button to validate captcha