Category: angular8

Angular 8 – Ivy Compiler ”; Previous Next Ivy Compiler is the latest compiler for Angular application released by Angular Team. Currently, Angular is using View Engine compiler to compile Angular application. In general, Angular compiler has two options to compile an application. Just In Time (JIT) Compiler In Just In Time (JIT) compilation, the compiler will be bundled along with the application and send to the browser. Angular application will be compiled in the browser and run just before the execution of application. Eventhough JIT provides certain advanced feature, JIT slows down the compilation and also the app bundle will be double the size produced by AOT compiler as it includes compiler as well. Ahead Of Time (AOT) Compiler In AOT compilation, the compiler will emit optimised code ready to run inside the browser without any addition step. It will reduce the size of the bundle as well as reduce the compilation time and startup time of the application. Advantages of Ivy Compiler Ivy Compiler is the optimised and advanced compiler for Angular. As of Angular 8, it is not yet complete even though it is useable at this stage. Angular Team is recommending the developer to use it in Angular 8. The main advantages of Ivy Compiler are as follows − Optimised code. Faster build time. Reduced bundle size. Better performance. How to use Ivy? Ivy Compiler can be used in Angular 8 application by changing the project setting as specified below − Open angular.json and set the aot option (projects -> -> architect -> build -> configurations -> production) of the project to true. { “projects”: { “my-existing-project”: { “architect”: { “build”: { “options”: { … “aot”: true, } } } } } } Open tsconfig.app.json and set enableIvy to true under angularCompilerOptions. { … “angularCompilerOptions”: { “enableIvy”: true } Compile and run the application and get benefited by Ivy Compiler. Print Page Previous Next Advertisements ”;

Angular 8 – CLI Commands ”; Previous Next Angular CLI helps developers to create projects easily and quickly. As we know already, Angular CLI tool is used for development and built on top of Node.js, installed from NPM.This chapter explains about Angular 8 CLI commands in detail. Verify CLI Before moving to Angular CLI commands, we have to ensure that Angular CLI is installed on your machine. If it is installed, you can verify it by using the below command − ng version You could see the below response − If CLI is not installed, then use the below command to install it. npm install -g @angular/cli@^8.0.0 Let’s understand the commands one by one in brief. New command To create an application in Angular, use the below syntax − ng new <project-name> Example If you want to create CustomerApp then, use the below code − ng new CustomerApp Generate Command It is used to generate or modify files based on a schematic. Type the below command inside your angular project − ng generate Or, you can simply type generate as g. You can also use the below syntax − ng g It will list out the available schematics − Let’s understand some of the repeatedly used ng generate schematics in next section. Create a component Components are building block of Angular. To create a component in angular use the below syntax − ng g c <component-name> For example, if user wants to create a Details component then use the below code − ng g c Details After using this command, you could see the below response − CREATE src/app/details/details.component.scss (0 bytes) CREATE src/app/details/details.component.html (22 bytes) CREATE src/app/details/details.component.spec.ts (635 bytes) CREATE src/app/details/details.component.ts (274 bytes) UPDATE src/app/app.module.ts (1201 bytes) Create a class It is used to create a new class in Angular. It is defined below− ng g class <class-name> If you want to create a customer class, then type the below command − ng g class Customer After using this command, you could see the below response − CREATE src/app/customer.spec.ts (162 bytes) CREATE src/app/customer.ts (26 bytes) Create a pipe Pipes are used for filtering the data. It is used to create a custom pipe in Angular. It is defined below − ng g pipe <pipe-name> If you want to create a custom digit counts in a pipe, then type the below command − ng g pipe DigitCount After using this command, you could see the below response − CREATE src/app/digit-count.pipe.spec.ts (204 bytes) CREATE src/app/digit-count.pipe.ts (213 bytes) UPDATE src/app/app.module.ts (1274 bytes) Create a directive It is used to create a new directive in Angular. It is defined below − ng g directive <directive-name> If you want to create a UnderlineText directive, then type the below command − ng g directive UnderlineText After using this command, you could see the below response − CREATE src/app/underline-text.directive.spec.ts (253 bytes) CREATE src/app/underline-text.directive.ts (155 bytes) UPDATE src/app/app.module.ts (1371 bytes) Create a module It is used to create a new module in Angular. It is defined below − ng g module <module-name> If you want to create a user information module, then type the below command − ng g module Userinfo After using this command, you could see the below response − CREATE src/app/userinfo/userinfo.module.ts (194 bytes) Create an interface It is used to create an interface in Angular. It is given below − ng g interface <interface-name> If you want to create a customer class, then type the below command − ng g interface CustomerData After using this command, you could see the below response − CREATE src/app/customer-data.ts (34 bytes) Create a web worker It is used to create a new web worker in Angular. It is stated below − ng g webWorker <webWorker-name> If you want to create a customer class, then type the below command − ng g webWorker CustomerWebWorker After using this command, you could see the below response − CREATE tsconfig.worker.json (212 bytes) CREATE src/app/customer-web-worker.worker.ts (157 bytes) UPDATE tsconfig.app.json (296 bytes) UPDATE angular.json (3863 bytes) Create a service It is used to create a service in Angular. It is given below − ng g service <service-name> If you want to create a customer class, then type the below command − ng g service CustomerService After using this command, you could see the below response − CREATE src/app/customer-service.service.spec.ts (379 bytes) CREATE src/app/customer-service.service.ts (144 bytes) Create an enum It is used to create an enum in Angular. It is given below − ng g enum <enum-name> If you want to create a customer class, then type the below command − ng g enum CustomerRecords After using this command, you could see the below response − CREATE src/app/customer-records.enum.ts (32 bytes) Add command It is used to add support for an external library to your project. It is specified by the below command − ng add [name] Build command It is used to compile or build your angular app. It is defined below − ng build After using this command, you could see the below response − Generating ES5 bundles for differential loading… ES5 bundle generation complete. Config command It is used to retrieve or set Angular configuration values in the angular.json file for the workspace. It is defined below

Angular 8 – Architecture ”; Previous Next Let us see the architecture of the Angular framework in this chapter. Angular framework is based on four core concepts and they are as follows − Components. Templates with Data binding and Directives. Modules. Services and dependency injection. Component The core of the Angular framework architecture is Angular Component. Angular Component is the building block of every Angular application. Every angular application is made up of one more Angular Component. It is basically a plain JavaScript / Typescript class along with a HTML template and an associated name. The HTML template can access the data from its corresponding JavaScript / Typescript class. Component’s HTML template may include other component using its selector’s value (name). The Angular Component may have an optional CSS Styles associated it and the HTML template may access the CSS Styles as well. Let us analyse the AppComponent component in our ExpenseManager application. The AppComponent code is as follows − // src/app/app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”Expense Manager”; } @Component is a decorator and it is used to convert a normal Typescript class to Angular Component. app-root is the selector / name of the component and it is specified using selector meta data of the component’s decorator. app-root can be used by application root document, src/index.html as specified below <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>ExpenseManager</title> <base href=”/”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”icon” type=”image/x-icon” href=”favicon.ico”> </head> <body> <app-root></app-root> </body> </html> app.component.html is the HTML template document associated with the component. The component template is specified using templateUrl meta data of the @Component decorator. app.component.css is the CSS style document associated with the component. The component style is specified using styleUrls meta data of the @Component decorator. AppComponent property (title) can be used in the HTML template as mentioned below − {{ title }} Template Template is basically a super set of HTML. Template includes all the features of HTML and provides additional functionality to bind the component data into the HTML and to dynamically generate HTML DOM elements. The core concept of the template can be categorised into two items and they are as follows − Data binding Used to bind the data from the component to the template. {{ title }} Here, title is a property in AppComponent and it is bind to template using Interpolation. Directives Used to include logic as well as enable creation of complex HTML DOM elements. <p *ngIf=”canShow”> This sectiom will be shown only when the *canShow* propery”s value in the corresponding component is *true* </p> <p [showToolTip]=”tips” /> Here, ngIf and showToolTip (just an example) are directives. ngIf create the paragraph DOM element only when canShow is true. Similarly, showToolTip is Attribute Directives, which adds the tooltip functionality to the paragraph element. When user mouse over the paragraph, a tooltip with be shown. The content of the tooltip comes from tips property of its corresponding component. Modules Angular Module is basically a collection of related features / functionality. Angular Module groups multiple components and services under a single context. For example, animations related functionality can be grouped into single module and Angular already provides a module for the animation related functionality, BrowserAnimationModule module. An Angular application can have any number of modules but only one module can be set as root module, which will bootstrap the application and then call other modules as and when necessary. A module can be configured to access functionality from other module as well. In short, components from any modules can access component and services from any other modules. Following diagram depicts the interaction between modules and its components. Let us check the root module of our Expense Manager application. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Here, NgModule decorator is used to convert a plain Typescript / JavaScript class into Angular module. declarations option is used to include components into the AppModulemodule. bootstrap option is used to set the root component of the AppModulemodule. providers option is used to include the services for the AppModulemodule. imports option is used to import other modules into the AppModulemodule. The following diagram depicts the relationship between Module, Component and Services Services Services are plain Typescript / JavaScript class providing a very specific functionality. Services will do a single task and do it best. The main purpose of the service is reusability. Instead of writing a functionality inside a component, separating it into a service will make it useable in other component as well. Also, Services enables the developer to organise the business logic of the application. Basically, component uses services to do its own job. Dependency Injection is used to properly initialise the service in the component so that the component can access the services as and when necessary without any setup. Workflow of Angular application We have learned the core concepts of Angular application. Let us see the complete flow of a typical Angular application. src/main.ts is the entry point of Angular application. src/main.ts bootstraps the AppModule (src/app.module.ts), which is the root module for every Angular application. platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); AppModule bootstraps the AppComponent