Introduction to Angular

-

Welcome to the Angular Tutorial. we will create an application at the end of this tutorial. we are writing this tutorial at the time of Angular 14 release.

What is Angular?

Angular is a UI Framework which is used to create Desktop and Mobile web Application. Angular is built using JavaScript. The Angular is an open-source and helps us build dynamic & single-page applications (SPAs). With Angular you can create client-side application using HTML, CSS and TypeScript.

Key differences between AngularJs & Angular

1. Controller and components
In AngularJs we have controllers but in Angular we have component in place of controller. In Angular, a component represents a UI element. You can have any number of components on a single web page. Each component is independent of each other and manages a section of the page. The components can have child components and parent components.

2. Directives
Syntax of Directive is different in Angular as compared to AngularJs. Angular has a * before the directive name indicating it as a structural directive.
Example
AngularJs : ng-if
Angular     : *ngIf

3. Angular data bindings is same with minor syntax changes.

Interpolation
AngularJS
<h3>{{controllerAlias.user.Name}}</h3>
Angular
<h3> {{user.Name}}</h3>
we used controller alias to specify the controller instance in AngularJS. In Angular, the context is implied.

One way Binding
AngularJS 
<h3> ng-bind=controllerAlias.user.name></h3>
Angular
<h3 [innerText]=”user.name” ></h3>

Event Binding
AngularJS
<button ng-click=”controllerAlias.save()”>Save<button> 
Angular
<button (click)=”save()”>Save<button>
The AngularJS uses the ngClick directive to bind to the event. In Angular ngClick Directive is removed. You can bind directly to the DOM events.

Two- way binding

AngularJS
<input ng-model=”controllerAlias.user.name”>
Angular
<input [(ng-model)]=”user.name”>

4. $scopes are not present in Angular

The Angular is using zone.js to detect changes.

5. Bootstrap

In AngularJs we use ng-app directive in our HTML file then the angular would bootstrap and attach the ng-app

<body ng-app=’test’> </html>

In Angular Bootstrap is done through code example below:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

6. ES6 Support

Angular is written in TypeScript and it meets ECMAScript 6 specification, it means it has support for ES6 class framework, modules etc.

You can refer Install NodeJs & Visual Studio to install NPM and Visual Studio.

For Angular CLI refer Install Angular CLI


                                                                                                                                                                                     Bootstrapping →



Comments

Post a Comment

Popular posts from this blog

Bootstrap in Angular

-
Image
Angular Components   In this topic we will look how Angular work internally and bootstrap application. When you create a new angular project using ng new 'project Name' it will generate many files like shown below: checkout  Angular Application with Angular CLI  for more...   What is Bootstrapping ? Bootstrapping is a technique of loading or initializing our angular application. Angular takes following steps to our first view. 1. Index.html gets loaded. 2. Libraries gets loaded. 3. Main.ts entry point for application. 4. Root Module. 5. Root Component. 6. Templates. Index.html Index.html is the first page to load, you can find index.html under src folder src → index.html.  you can see index.html does not contain any javascript or stylesheet file, it only contain html tag  <app-root></app-root> inside body. index.html will look as shown below: <!doctype html > <html lang = "en" > <head>   <meta charset = "u...
Read more

Angular Directives

-
Image
In this topic we will look into angular directives and you can check our previous topic on Data Binding in angular application . What are Angular Directives?  Angular Directives are the elements which are basically used to change the behavior's or appearance of DOM(Document Object Model) element, Or you can say that directives are basically use to extend the power of HTML attributes and to change the appearance and behavior of DOM element. Types of Directives ➤➤ There are three types of directives based on behavior: 1. Structural Directives   ⮚   Structural Directives will shape the HTML view by adding or removing the element from DOM. There are three structural directives available: i. NgFor (*ngFor) 🠞 ngFor is built-in directive and belongs to structural directives. It is similar to for loop used in many programing language like java. So ngFor directive is used to iterate over collection. The Syntax used for ngFor =  *ngFor=”let <value> of <collectio...
Read more