Lets say I have become comfortable with developing client-side SPA's with angular 1 but now I want to make the change to Angular 2.
Who would be some of the important paradigms to take into consideration when making the change?
Here are some questions that may help frame your answers:
Main difference in architectural design is probably the unidirectional data flow and the focus on components.
Start using controllerAs with Typescript classes as your controllers if you want a more easy transition. Start learning the basics of RxJS, Ng2 is built on it.
Main difference in architecture is the unidirectional data flow as said above I would also Like to add Few Points:
Component-based UI
Angular is adopting a component-based UI, a concept that might be familiar to React developers. In a sense, the Angular 1.x controllers and directives blur into the new Angular 2 Component.
This means that in Angular 2 there are no controllers and no directives. Instead, a component has a selector which corresponds to the html tag that the component will represent and a @View to specify an HTML template for the component to populate.
The following examples utilize TypeScript, a superset of the ES6 javascript standards. Angular 2 is currently being developed in TypeScript, but will be compatible with both ES5 and ES6 javascript standards.
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 the Event Syntax
Angular applications now respond to user input by using the event syntax. The event syntax is denoted by an action surrounded by parenthesis (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”>
Goodbye $scope
Even though ‘$scope’ has been replaced by “controller as” as a best practice since Angular 1.2, it still lingers in many tutorials. Angular 2 finally kills it off, 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”;
}
}
Better Performance
With ultra fast change detection and immutable data structures, Angular 2 promises to be both faster and more memory efficient. Also, the introduction of uni-directional data flow, popularized by Flux, helps to ease some of the concern in debugging performance issues with an Angular app.
This also means no more two-way data binding which was a popular feature in Angular 1.x. Not to worry, even though ng-model is no more, the same concept can be solved in a similar way with Angular 2.
