Angular - Yash-777/MyWorld GitHub Wiki

By default, angular builds and serves the application using JIT compiler:

ng build
ng serve

What are Single Page Applications (SPA)?

Single page applications are web based applications that only need to be loaded once, with new functionality consisting of only minor changes to the user interface. It does not load new HTML pages to display the content of the new page, but rather generates it dynamically. This is made feasible by JavaScript's ability to alter DOM components on the current page. A Single Page Application method is speedier, resulting in a more consistent user experience.

import { Component } from "@angular/core";
 
@Component({
  selector: "app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  data = "This is an example component of two way data binding.";
}

<input [(ngModel)]="data"  type="text">
  <br> <br>
  <h2> You entered the data:  {{data}}</h2>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
 
import { AppComponent } from "./app.component";
 
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Explain string interpolation and property binding in Angular.

String interpolation and property binding are parts of data-binding in Angular.
Data-binding is a feature in angular, which provides a way to communicate between the component(Model) and its view(HTML template).
Data-binding can be done in two ways, one-way binding and two-way binding.
In Angular, data from the component can be inserted inside the HTML template. In one-way binding, any changes in the component will directly reflect inside the HTML template but, vice-versa is not possible. Whereas, it is possible in two-way binding.
String interpolation and property binding allow only one-way data binding.
String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template. Using property binding, we can bind the DOM properties of an HTML element to a component's property. Property binding uses the square brackets [ ] syntax

What the use of Angular?

Angaulr is a javascript UI binding framework which helps you to bind view(HTML UI) with the model(Javascript Model). It helps you to build SPA by suing the concept of routing. It also has lot of other features like HTTP, DI, Input output because of which you do not need other frameworks.

It helps to implement MVC/MVVM patter inside your Webapplication/browser

Differentiate between AngularJS vs Angular ?

Language: AJS using Javascript, A is Typescript login.ts later complied to login.js Architecture: Controller, Component based

What are directives in Angular? What different types of direcives?

Directives helps you to attach behaviour to your HTML DOM. Angular syntax which you write in HTML.

Tree types of Directives (SAC)

1. Structureal : Changes the DOM layout by adding and removing elements <tr *ngFor="let temp of users">...
2. Attibute : Changes the appearance and behaviour of HTML elements. <div [hidden]="hide()">Hello, changing the color
3. Component : Directives with templates. Its like a user control ex: <ecportToCSV ... />, <my-grid [grid-data]="emplyeesObj" [drid-columns]="[{'colName':'ename'},{'colName':'id'}]" />

Explain the importance of NPM and Node_Modules folder ?

NPM is a pacakage manager which makes installation of javascript framework/libraries easyly.

"node_modules" is a folder where all the pacakages are installed. (in java similar to lib folder)

$npm install jquery
Downloads the JQery from github and places in node_modules folder.

$npm install @angular/cli

Explain the importance of package.json file in Angular ?

pacakage.json is file where all the references of javascript frameworks/libraries listed are listed down with their versions. (In java similar to pom.xml file) All the dependencies files.

What is typescript and why do we need it ?

Typescript is superset of javascript. It adds types to javascript language.

Test.js          Test_TS.ts  --> compile $tsv Test_TS.ts
----------       -------
var x = 0;       var x:number=0;
x++;             x++;
x = "shiva";     x = "shiva"; //not allow leads to error


$tsv Test_TS.ts
It generates Test_TS.js

It gives a nice object-oriented programming environment which transfers/converts to javascript. Speed up the develpment as it is object-oriented.

• Difference between funciton and class in javascript
• hoisting, funciton vs variable funciton
• ES6 calling static methods from the instance
• Funciton vs closures: closure's copies are function with preserved data.

  function closureFun( args ) {
      // Local variable that ends up within closure
      var num = args;
      num++;
      return function() { console.log(num); }
  }
  var closure1 = closureFun( 5 );
  var closure2 = closureFun( 777 );
  closure1(); // 5
  closure2(); // 777
  closure2(); // 778
  closure1(); // 6

Explain importance of Angular CLI ?

CLI is command line interface which helps you to create readymade code for angular template.

$npm install @angular/cli

$ng new myappp
-- Creates project template with all the required files [Like spring starter io] which increase the productivity.

Explain the importance of Component and Modules ?

Component is where you write your binding code of view and model. Module logically is a group of components.

What is docorator/MetaData/Annotations in Angular?

Decorator defines what kind of Angular class is it. For example

• if you decorate "@Component" then it says its an Angular component.
• if you put "NgModule" it become a Angular Module.

What is a template?

Template is an HTML view of Angular in which we can write directives. Their are two ways of defining Template on is inline [template:"html cdoe"] and other is aseperate HTML file [templateUrl: './user.component.html'].

Whar are different Data bindings in Angular?

Data Binding in angular defines how view and component communicate with each other.

• Expression/Interpolation Binding {{...}}: Data flow form component(userid) to view(<p>{{userObj.userid}}</p>).
• property binding [...]: Data flwo form component(userid) to view(<input [userid] />).
• Event binding(): when we want to send event from View to component
• Two-way binding [(...)]: Data flows from component to the view and vice versa.

Explain architecture/diffent-block of Angular?

Template view Component Module Data Binding Directives Service Dependency Injection

What is SPA and how to implement SPA in angular?

Single page applicaiton are applicaitons where the main UI gets loaded once(side view, header, footer) and the needed UI is loaded on demand.

To implement SPA we need to use routing.

What is Routing in angular and you implement it.

Routing is a simple colleciton which has two things URL and when this URL is called which component to load.

So routing helps you to define the navigation for your angular applicaiton. So if you wnat to move from once screen to other screen and you wnat to respect SPA that means not loading and refresing the whole part of UI, for this routing is needed.

Homeapp.Routing.ts
export class HomeRoutes = [
	{path: '',  componet: HomeComponent },
	{path: 'Login', component: LoginComponent},
	...
];


1. HomeGmailView.html

<!-- side view -->
<a [routerLink]="['Home']">Home</div>

<!-- contentview -->
<router-outlet></router-outlet> <!-- Part of UI laded here -->

2. RoutingForm component on success REST API response

success(res) {
  this.route.naviagte(['/Home']);
}

Explain Lazy Loading in Angular?

Lazy loading means on demand loading. Loading only the necessary HTML, css and javascript files so that you have better performance.

Divide your project into modules

In rouitng

{ path: 'customer', loadChildern: '../clidmodule/  '}

Define services?

Services helps you to share common logic across Angular projects. HTTP service, Log service

What is Dependency Injection, how it is implemented, what is the benefits?

Dependency Injection is an application design pattern where rather than creating object instance from with in the component, Angular injects it via the constructor.

Inoder to implement DI in angualar we need to use providers propertiy which belongs to @NgModule decorator/metadata.

@NgModule( {
declarations: [  // Components

],
imports: [ // Modules

],
providers: [  // List all the DI services that need to constructor injected into the components
  AuthGaurd,
  {provide: BaseLogger, useClass: HttpLoger}

],
bootstrap: []
})
export class myApp {

}


@component({
  selector: 'app-root',
  templateUrl: './MasterPage.html'
})
export class MasterPageComponent{
  constructor(public logger: BaseLogger){
    this.logger.log();
  }
}

Depedency injection helps to deouple class dependencies, so that when you add new dependencies you do not have to change everywhere.

• loose coupling: only one instance is created and that object is share accross the project.

Differentiate between ng serve and ng build?

ng serve serves the code inmemory used for Dev purpose. ng build serves the code in harddisck used for production purpose. myAngularApp > dist\myAngularApp\build js fils

Explain the --prod parameter in ng build?

$ng build --prod

Ng build --prod flag compresses/minifes your JS file,removes comments, creates GUIDs of your js files and make your applicaiton ready for production. ^youtube