Angular 1 and Angular 2 Integration

13 Best Advantages for Angular2 - [Angular2 vs. Angular1]

“What”? “Why”? and “Advantages of Angular2”?
Why should you use Angular2 ? What are the Advantages of Angular2 ?

Stayed Informed - 69 Best Angular 2 Interview Questions and Answers

The core differences and many more advantages on Angular2 vs. Angular 1 as following,
1.      Angular2 has better performance.
2.      Angular2 has more powerful template system.
3.      Angular2 provide simpler APIs, lazy loading and easier to application debugging.
4.      Angular2 much more testable
5.      Angular2 provides to nested level components.
6.      Angular2 execute run more than two programs at the same time.
7.      Angular1 is controllers and $scope based but Angular2 is component based.
8.      The Angular2 structural directives syntax is changed like ng-repeat is replaced with *ngFor etc.
9.      In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngFor loop Example.

There are more advantages over performance, template system, application debugging, testing, components and nested level components.




For Examples as,

Angular 1 Controller:-
var app = angular.module("userApp", []);
   app.controller("productController", function($scope) {
   $scope.users = [{ name: "Anil Singh", Age:30, department :"IT" },
  { name: "Aradhya Singh", Age:3, department :"MGMT" }];
}); 

Angular 2 Components using TypeScript:-

Here the @Component annotation is used to add the metadata to the class.

import { Component } from 'angular2/core';
@Component({
  selector: 'usersdata',
  template: `<h3>{{users.name}}</h3>`
})
 
export class UsersComponent {
  users = [{ name: "Anil Singh", Age:30, department :"IT" },
  { name: "Aradhya Singh", Age:3, department :"MGMT" }];
}

Bootstrapping in Angular 1 using ng-app,
angular.element(document).ready(function() {
   angular.bootstrap(document, ['userApp']);
});

Bootstrapping in Angular 2,
import { bootstrap } from 'angular2/platform/browser';
import { UsersComponent } from './product.component';

bootstrap(UserComponent);

The Angular2 structural directives syntax is changed like ng-repeat is replaced with *ngFor etc.

For example as,
//Angular 1,
<div ng-repeat="user in users">
     Name: {{user.name}}, Age : {{user.Age}}, Dept: {{user.Department}}
</div>

//Angular2,
<div *ngFor="let user of users">
     Name: {{user.name}}, Age : {{user.Age}}, Dept: {{user.Department}}
</div>

I hope you are enjoying with this post! Please share with you friends!! Thank you!!!

About blogger..

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

Post a Comment
www.code-sample.com/. Powered by Blogger.