Angular JS 1.X
- Introduction
Angular JS 1.X is the most popular JavaScript framework to build web applications. It was released by Google on October 20, 2010. Angular 1 is developed using TypeScript and JavaScript and uses traditional HTML. Angular 1 uses Controllers and Scope object.
- Prerequisites - to learn Angular 1 – JavaScript, HTML only
- Binding
- One-Way binding – you are required to use ng-bind for one way data binding in Angular 1
For Ex. <div ng-bind=”message”></div>
- Two-Way Binding – you are required to use {{ message }} for two way data binding in Angular 1
For Ex. <div ng-model=”message”> </div>
- Bootstrapping
There are two ways to bootstrap Angular app in Angular 1.
Via ng-app
For Ex. <html ng-app=”myAngularApp”></html>
Via code
For Ex.
- <script>
- angular.element(document).ready(function() {
- angular.bootstrap(document, ['smyAngularApp']);
- });
- </script>
- Performance
Angular 1 is slow if you have used too many watchers in your angular 1 app. You need to reduce watchers to make it faster.
For more information about Watchers & Digest Cycle in AngularJS, Read the below article -
- Mobile Support
Angular1 is responsive but, does not have mobile support. It was not built for mobile devices. It is possible to run Angular 1 on mobile, but using 3rd party frameworks.
- Services
There are various ways to create services in Angular 1 like Service, Factory, Provider etc.
- Filters
Filters are used to filter a result set in Angular 1.
Angular 2
- Introduction
Angular 2 is not an upgraded version of Angular JS 1. It is completely rewritten with a lot of improvements also by Google and released in September 2016. It has been designed for implementing big and complicated applications in a feasible way.
Angular 2 is following a component-based UI and there is no longer controllers and scope in Angular 2. Controllers are replaced by Components here.
Angular 2 is currently being developed in Typescript but will be compatible with both ES5 & ES6 JavaScript standards.
- Prerequisites - to learn Angular 2 – ES6, Typescript etc.
- Binding
- One-Way Binding
There are two techniques for one way data binding in angular 2,
- Using Interpolation
For Ex. <div> {{ message }} </div>
- Using Property Binding
For Ex. <img [src]=’imagePath’ />
There is an alternate syntax of property binding, which is known as canonical form.
For Ex. <img bind-src=’imagePath’ />
- Two-Way Binding
[( message )] you are required to use parenthesis inside of brackets for two way data binding in Angular 2
For Ex. <div [(ngModel)]=”message” ></div>
This is a combination of Property binding & Event binding.
- Bootstrapping
This process has been changed in Angular 2. Here we connect angular components to view, not modules.
- \import {bootstrap} from '@angular/platform-browser-dynamic';
- import {AppComponent} from './app.component';
-
- bootstrap(AppComponent);
- Performance
Angular 2 is 5 times faster than Angular 1. It is using hierarchical DI system which is major performance booster.
- Mobile Support
Angular 2 is mobile oriented. It is designed from ground up with mobile support.
- Services
There in the only way to use Service in Angular 2.
- Filters
Filters have now been renamed pipes is Angular 2.