A Complete Guide to Angular 2

Google’s new Angular 2 is entirely different from Angular1 series and there will be no migration from Angular 1.x to 2. This generation introduces a new syntax, new architecture and new development experience. It declared the death of various angular1 components like $scope, ng-model,controller, module, directives etc. It’s main features includes mobile first, loosely coupled, simplicity, metadata and performance.

What makes Angular2 standout from its predecessor?

• Mobile-first is accomplished using ng-conf.Angular 2 has ultra fast change detection because of unidirectional data flow popularized by flux, i.e. it does not have two way data binding. In Angular1, two way data-binding is implemented with ng-model.
• Routing is also modified to accomplish multiple, nested, siblings, stage based views. The new design holds URL resolver, location services, URL matcher,route resolver, route configuration etc.
• Dynamic loading- In this, while compiling a template, it actually takes the component definition which contains metadata, filters etc. So SS6 module spec will take all the necessary dependencies before loading a template. So by using ES6 modules we can accomplish dynamic loading.
• .service()- This is used instead of factory in angular2, which is basically a class. Service is just like a constructor in java but it can do all the functionality a .factory() does.And the reason for using is that while we migrate to ES6,since .service() is a constructor function ,it allows easy work with ES6 classes.
• Templating – Angular 2 templating syntax removes many directives and integrate better with Web components.
• Annotations – AngularJS uses metadata to boilerplate and hide Angular wireframe. Using Atscript, we can associate metadata with any functions and the declarative annotation helps readability. Directives- Basically there are 3 types of directives being used in Angular 2.
  Component Directive – Create custom component directive with views and controller.
  Decorative Directive – decorates an existing html element with additional behavior.
  Template Directive – Transforms HTML reusable and the author can define when and how the element is initiated and inserted into DOM.
• Purpose of component – In Angular 1.x version, we use controllers for pages and ng-model , $scope for the flow of data but here its all replaced with component concept.
• Grunt – Angular 2 is replaced with GulpJS

Let’s create a simple page in Angular2.

Installation and deployment of Angular2 Application

1. First create a file named app.ts and copy this

import {bootstrap, Component} from 'angular2/angular2'; @Component({ selector: 'my-app', template: 'Hello,Cubet' }) class AppComponent { } bootstrap(AppComponent);

In Angularjs2, there is no ng-app, everything is component, here we created our first component, app.ts. Here AppComponent does not posses any property, so we need to expand it.

Import statement imports two components bootstrap and Component.
In this program @Component tells the compiler that, this is a component module and the component posses two element selector to specify css here: our css file names ‘my-app’ and template field tells how to render its view, here it is single line “Hello,Cubet”.

2.  create index.html file

    loading...

3.  To run, install
npm install -g live-server
to run do this in terminal : live-server

if you are seeing the ‘loading…’,then you need to install another package
npm install es6-shim –save
add this in index.html file

You get the output Hello,Cubet
Happy coding!

Know More About This Topic from our Techies