Saturday, 24 September 2016

Quick Start with AngularJS 2.0

AngularJS has become one of the most popular open source JavaScript frameworks in the world of web application development.The AngularJS you know and, hopefully, love will still be there with data-binding, extensible HTML, and a focus on testability.The new Angular version will be focused on the development of mobile apps and it is for desktop as well, but mobile is the hard bit that we will get right first.Various new modules are added and remove from the angularJS resulting for better performance.

AngularJS 2.0


Get a Copy Of angularJS 2 project using GIT.

git clone https://github.com/angular/quickstart.git firstapp

This will clone the quick start project to firstapp folder.


  • Your created firstapp project will contain the libraries.
  • Pre-built ES5 version of Angular 2 alpha-11
  • Pre-built ES5 version of rtts-assert alpha-6
  • The es6-shim, which includes Traceur, ES6 Module Loader, System, Zone, and Traceur options for meta-data annotations.
WorkFlow of angularJS 2 directory.

.
├── angular2
│   └── src
│       ├── change_detection
│       │   ├── parser
│       │   └── pipes
│       ├── core
│       │   ├── annotations
│       │   ├── compiler
│       │   │   ├── pipeline
│       │   │   ├── shadow_dom_emulation
│       │   │   └── xhr
│       │   ├── dom
│       │   ├── events
│       │   ├── life_cycle
│       │   └── zone
│       ├── di
│       ├── directives
│       ├── dom
│       ├── facade
│       ├── forms
│       ├── mock
│       ├── reflection
│       └── test_lib
├── dist
└── rtts_assert
└── src

At the root of the directory you have a Gulpfile that consist of simple build tasks to download Angular 2.0 and its dependencies using the ng2build.sh.You have to installed nodeJS and gulp should be installed .

npm install -g gulp

#For install all dependencies.
npm install

#Now to regenerate Angular and its dependencies, run
gulp

Before we go further, I would recommend having a knowledge of EcmaScript 6.This knowledge is quite essential as Angular 2.0 is written for ES6 and to support ES5.

Build your first App with angularJS.

This Angular tutorial create the project related files at the root of the directory.With so much going on at the root of the directory, I found it easy to maintain the files inside a folder named app.This situation is temporary till Angular 2.0 moves to a stable release.So, create a new folder named app at the root of the project. Create a file named index.html inside the app folder. And update it as below.

firstapp/app/index.html

<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>

Load up the es6-shim.js from the dist folder to work with ES6 in current browsers.
We created a new component named my-app. We will talk about components soon.
ES6 comes with Modules and Module Loaders.
Load a file named app.es6 it will be creating next. This file will consist the definition for  <my-app></my-app>.

create a new file named app.es6. The es6 extension indicates that you are loading a file with EcmaScript 6 syntax.

Update app.es6 file as below:
firstapp/app/app.es6JavaScript

import {Component, Template, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
constructor() {
this.name = 'World!';
}
}
bootstrap(MyAppComponent);


I was overwhelmed as well as confused when I first saw the code. Learning Angular 2.0 is a challenge in itself and adding ES6 touch to that makes this a bit tricky.

The first line will import the components from angular2.The “@” is an annotation. Angular 2.0 uses a library called AtScript (@ script).AtScript simplifies the syntax of ES6 in its own way. Taking an example from the primer.

ES6:
import * as rtts from 'rtts';
class MyClass {
constructor(name, list) { }
}
MyClass.parameters = [
{is: rtts.string}, 
{is: Array}
];


AtScript:
class MyClass {
constructor(name:string, list:Array) {}
}

Angular does not force the users to use AtScript but it definitely looks like an advantage working with it.Angular 2 works with a concept of components.The Annotation Section – This consist of the meta data (component selector, template) for that component.The Component Controller Section – This is a ES6 Class, from which the template would be reading the properties that are interpolated ({{…}}) inside it.

Launch and test the App:
firstapp folder or you can use a node module named http-server to do the same. You can install the same using the below command.

npm install http-server -g

And then you can launch the static server by running
http-server

from inside the firstapp folder. And then navigate to  http://localhost:8080/app/ you should see Hello World.You can also checkout the angular resources page here, which has a few but helpful links on Angular 2.0.

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts