The main difference in architecture is the unidirectional data stream, as described above. I would also like to add a few points:
Component Based User Interface
Angular uses a component interface, a concept that may be familiar to React developers. In a sense, Angular 1.x controllers and directives are blurred in the new Angular 2 component.
This means that in Angular 2 there are no controllers and no directives. Instead, the component has a selector that matches the html tag that the component will represent, and @View to specify the HTML template to populate the component.
The following examples use TypeScript, a superset of the javascript ES6 standards. Angular 2 is currently under development in TypeScript, but will be compatible with javascript standards of both ES5 and ES6.
Angular 1.x:
angular.module('example') .controller('ExampleCtrl', function() { });
Angular 2.0:
import {Component} from 'angular2/core'; @Component({ selector: 'example', templateUrl: './components/example/example.html' }) export class App {}
User input with event syntax
Applications
Angular now responds to user input using event syntax. The syntax of an event is indicated by an action surrounded by a bracket (event).
You can also make element references available to other parts of the template as a local variable using the #var syntax.
Angular 1.x:
<input ng-model="thing.item" type="text"> <button ng-click="thing.submit(item)" type="submit">
Angular 2.0:
<input #item type="text"> <button (click)="submit(item)" type="submit">
space $ scope
Although '$ scope has been replaced with' controller as' as the best example with Angular 1.2, it still lingers in many tutorials. Angular 2 finally kills it, as properties are bound to components.
Angular 1.x:
angular.module('example') .controller('ExampleCtrl', function($scope) { $scope.name = "John Smith"; });
Angular 2.0:
@Component({ selector: 'example', templateUrl: './components/example/example.html' }) export class App{ constructor() { this.name = "John Smith"; } }
Best performance
With ultra-fast change detection and immutable data structures, Angular 2 promises will work both faster and more efficiently. In addition, the introduction of unidirectional data flow, popularized by Flux, helps alleviate some of the problems in debugging performance issues with the Angular application.
It also means the lack of two-way data binding, which was a popular feature in Angular 1.x. Do not worry, although the ng-model no longer exists, the same concept can be solved similarly with Angular 2.