AngularJS is one of the most famous frameworks for developing web applications based on JavaScript. It’s free and Open Source, created and maintained by Google.
When choosing a framework for a web application of type SPA, AngularJS became the first choice for almost everyone and one of the reasons is because of its stability and support.
Google announced the release of Angular 2, and this new version changed drastically compared to the previous one and there would be no migration path from 1.x. It defines a new programming language above JavaScript. Angular 2 is actually not a new version: it is actually a new framework built from scratch. The Angular team could not implement those changes without “breaking” the current implementation, so it was better to start writing a new framework.
AngularJS in version 1 has defined itself as a JavaScript framework for creating web applications, while Angular 2 defines itself as a platform for creating web applications and mobile applications. They have changed their philosophy a bit trying to bring Angular to a higher level since it allows input support TypeScript, Javascript, and Dart, meaning that in any of these three languages, it is possible to work with Angular similarly and transparently.
Some differences with Angular 1
Angular 2 does not have controllers or directives like Angular 1 has to reach the view. Instead, Angular 2 uses a concept called components. Within those components, there is a selector, meaning an element in the Document Object Model (DOM), which is the element to be handled by the component.
In Angular 1:
angular.module(‘example’)
.controller(‘ExampleCtrl’, function() {
});
In Angular 2:
var AppComponent = ng.Component({
selector: 'my-app',
template: '<h1>Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
Syntax events associated with the inputs: Now the applications made in Angular 2 allow us to write the trigger event in brackets, for example, in Angular 1:
<button ng-click="thing.submit(item)" type="submit">
In Angular 2:
<button (click)="submit(item)" type="submit">
The famous $scope we use in AngularJS 1 has been replaced by the Controller As. It was obvious that this would happen since version 1.2 of AngularJS recommended replacing it as good practice:
angular.module(‘example’).controller(‘ExampleCtrl’, function($scope) {
$scope.name = “HAT Blog”;
});
In Angular 2:
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>Angular 2 App</h1>'
})
.Class({
constructor: function () {
this.name = "HAT Blog";
}
})();
Better performance: This has been one of the biggest differences that have been announced. With Angular 2, there is a lot of talk around performance, and its new features associated as “ultra fast change detection” and “immutable structures”. This is because there is no longer a “two-way data binding” since, among other things, the concept of ng-model has disappeared.
Structure of an Application
Modules
Angular2 applications are modular, meaning that they consist of multiple files, and each one of them has a responsibility.
Most Angular 2 files exported something, such as a component or service.
export class AppComponent { }
Since the modules depend on other modules, when you need something that is provided for a specific module, it must be imported.
import {Component} from 'angular2/core';
Components
All Angular 2 applications are made up of components that form a tree of relationships with each other- meaning a component may be formed by another or a set of them. An application has a root component, which contains all the other components, usually called app.component.
Each component has associated a view- that is a page or a portion of a page. To set it up, it can be done in the same statement component through the tag template: ‘< html >’
@Component({
providers: [LoginService],
directives: [ListComponent],
template:`
<h2> Hello {{role}} {{userName}} </h2> <br>
<my-list (update)="onUpdate($event)></my-list>
`
})
or add the HTML in a separate file and then referenced it from templateUrl: (This already existed in Angular 1)
@Component({
providers: [LoginService],
directives: [ColorsListComponent],
templateUrl: '/app/welcome-page/welcome-page.component.html'
})
Dependency injection
Dependency injection is an important design pattern application. Angular has its own dependency injection framework, and you really can not build an Angular application without it. Thus we import a service to a component:
constructor( private _loginService: LoginService);
If the service must be instantiated:
@Component({
providers: [LoginService]
})
Within the service, both their properties as public and private methods are defined, and it is exported using the @injectable() decorator.
Routing
The Angular 2 routing component is an optional service. To make use of it, we should load the script into the index.html
<script src="node_modules/angular2/bundles/router.dev.js"></script>
Then, you must add a “starting point”, indicating how to compose different URL’s.
In this case, a < base > is added just after the < head >, also in the index.html
<base href="/">
Once the routes are configured and having a place to display them, you need to know how to navigate. The URL could be entered directly into the navigation bar of the browser, but it is generally preferable that the navigation occurs as a result of some user action.
To this end, it has the RouterLink directive which is added to an < a > tag and links it to an expression that returns an array of parameters (link parameter array).
Eventually, the router will solve this arrangement as a URL and a component view.
template: ‘
<h1>Component Router</h1>
<nav>
<a [routerLink]="['DashBoard']>Dash Board</a>
<a [routerLink]="['Items']">Items</a>
</nav>
‘
The different views of the route may be used to pass information to them. For this part of the route, a part of it remains constant and the other part will vary.
The definition of the route is indicated by a colon ‘:’ and the name of the variable will later be replaced by the explicit value in the URL.
{path: '/details/:id/:role', name: ‘Detail', component: DetailComponent}
Custom Events
In Angular 2, when a component includes another or makes use of any directive, the components and “children” directives can send messages or trigger events to interact with the component that contains them.
To launch an event, EventEmitter library, the @Output decorator and emit() function is used.
@Component({
selector: 'my-list',
templateUrl: '/app/list/list.component.html'
})
@Output() update = new EventEmitter();
onSelect(detail: Detail) {
this.update.emit(detail.id);
}
This article is a first approach to Angular2, and it briefly describes its main features. It is not a guide for creating an app.
Useful links
Angular 2 official documentation
Angular2 Tutorial
All About Angular2
Comments? Contact us for more information. We’ll quickly get back to you with the information you need.
