Angular 1 Vs Angular 2
AngularJS is a structural framework for dynamic web apps. It lets the user to use HTML as their template language and extends HTML’s syntax to express their application’s components clearly and concisely.
There are many conceptual and syntactical differences between Angular 1 and Angular 2. In this article, we are going to explain you the major differences between the above frameworks.
1) AngularJS 1 is easy to setup. All you need to do is to add a reference to the library and you are good to go. Whereas AngularJS 2 is dependent on other libraries and it requires some efforts to set up.
2) Angular 2 provides more choice for languages. The developer can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Whereas, Angular 1 supports only ES5, ES6, and Dart.
3) Angular does not have in-built with mobile support, whereas Angular 2 is mobile oriented.
4) In Angular 1 there is no usage of controllers and $scope, whereas in Angular 2 con-trollers has been replaced with components. Angular 2 is component based.
ANGULAR 2 COMPONENTS USING TYPESCRIPT
import { Component } from ‘angular2/core';
@Component({
selector: ‘prodsdata’,
template: `
<h3>{{prods.name}}</h3> `
})
export class ProductComponent {
prods = { name: ‘Prod1′, quantity: 1 };
}
* Angular 1 consists of two ways to bootstrap angular. One is using ng-app attribute and other through code.
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, [‘myApp’]);
});
</script>
SAY GOODBYE TO NG-APP
Angular 2 doesn’t support ng-app. Say goodbye to ng-app. The only way to support angular is through code.
import { bootstrap } from ‘angular2/platform/browser';
import { ProductComponent } from ‘./product.component';
bootstrap(ProductComponent);
The bootstrap is a function; it takes starting component which is also a parent component of the angular application.
* The Structural directives syntax is changed. ng-repeat is replaced with *ngFor in Angular 2.
ANGULAR 1 STRUCTURAL DIRECTIVES
<ul>
<li ng-repeat=”technology in technologies”>
{{technology.name}}
</li>
</ul>
<div *ngIf=”technologies.length”>
<h3>You have {{technologies.length}} technologies.</h3>
</div>
* In Angular .2 local variables are defined using a hash (#) prefix.
* In Angular 1, ng-model is used for two-way data binding, but in Angular 2 it is replaced with [(ngModel)].
* One of the major advantages of Angular is Dependency Injection. Angular 2 consists of DI but, there is a different way to inject dependencies. As everything is a class in Angular, so DI is achieved through a constructor.
THE VERDICT
Though the above two frameworks are similar, there are some essential differences in these two processes. Angular 2 is a really big step forward. And it certainly requires some efforts to migrate from Angular 1 to Angular 2. Both the tools have equal importance when compared with each other on the basis of functionality. The choice is always depends on the need and the requirements of the project.