Getting Started with Angular 2.0

Tweet about this on TwitterShare on LinkedIn0Share on Google+20Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Recently Angularjs team has launched a 5 mins quick start tutorial on getting started with Angular 2.0. I have taken the same tutorial (with minor changes) and explained it below. There are a lot of blanks to be filled, but this is my first attempt at Angular 2.0.

You can find the source code for the Hello World app built in this post here.

So, let us get started with NG2.0.

What is Angular 2.0?

AngularJS 2 is a framework for mobile apps.  It is for desktop as well, but mobile is the hard bit that we will get right first.  The AngularJS you know and, hopefully, love will still be there with data-binding, extensible HTML, and a focus on testability.

You can read more about Angular 2.0 and its proposed features from here.

5min Tutorial by Angular Team

Angular team has released a tutorial on how to get started, where they explain how to setup the project and run a simple Hello World example.

We will follow the same here. The tutorial they have provided is quite self explanatory with some “Googling”.

To get started, create a new folder named ng2 and open a new terminal/prompt here.

Make sure you have Git installed, and run

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

This will clone the quick start project to hello2ng2 folder.

The project consists of the following libs (as of today)

  • 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.

Do notice the directory structure

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.

To try this out, you need to have Nodejs installed. And Gulp should be installed globally. To install Gulp globally, run

npm install -g gulp

And then, We will install the dependencies for this project. Run

npm install

Now to regenerate Angular and its dependencies, run

gulp

And you can see the dependencies being removed and added again. This is incase you have messed up anything while going through the source code of Angular2.

EcmaScript 6

Before we go further, I would recommend having a knowledge of EcmaScript 6. One of the resource that helped me get started was es6features repo. Simple and lucid explanations of ES6 features.

This knowledge is quite essential as Angular 2.0 is written for ES6 and to support ES5. When we build the Hello World Example, I will point you to the required resources.

Build the App

The Angular tutorial suggests to 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

Things to notice

Line 5 : We load up the es6-shim.js from the dist folder to work with ES6 in current browsers.

Line 10 : We created a new component named my-app. We will talk about components soon.

Line 13 : ES6 comes with Modules and Module Loaders. This makes on demand importing very easy. If you have used Requirejs or the Commonjs module system while working with Nodejs, this will look very familiar.

Line 14 : We refer Angular 2.0

Line 15 : We refer Runtime assertions library

Line 16 : We load a file named app.es6 that we will be creating next. This file will consist the definition for  <my-app></my-app>.

Line 20 : We kick off the app.

Next, create a new file named app.es6. The es6 extension indicates that you are loading a file with EcmaScript 6 syntax. (This is more for your text editor to show syntax highlighting. You can js extension as well if you feel that too much is changing).

Update app.es6 file as below

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.

Let’s see what we have in this file

Line 1 : If you have already gone through the modules feature, you should understand this syntax. All we are doing here is importing the required components from angular2 to be used in the current file.

Line 4 : The “@” is an annotation. Angular 2.0 uses a library called AtScript (@ script). 

AtScript

JavaScript, the de facto language of the browser, has a large, thriving community. However, it is missing some features which would make it much more manageable for large-scale application development. The goal of AtScript is to enhance the language with these missing features without infringing upon its current capabilities.

You can read more about it : AtScript Primer. As far as I have understood (I could be totally wrong here), AtScript simplifies the syntax of ES6 in its own way. Taking an example from the primer

ES6

AtScript

You can read more about ES6 classes for better clarity.

Though Angular team does not force the users to use AtScript, but it definitely looks like an advantage working with it.

Getting back, As per the docs, Angular 2 works with a concept of components. And a component consist of 2 parts

  1. The Annotation Section – This consist of the meta data (component selector, template) for that component
  2. The Component Controller Section – This is a ES6 Class, from which the template would be reading the properties that are interpolated ({{…}}) inside it .

So, (referring to app.es6)

Line 5 : Identify the selector on page that would be the base for our component

Line 8 : The template to be injected. Notice  {{ name }}

Line 14 : Declare the values to be used in the template. In our case it is World!

And finally on line 19, we bootstrap the component. As per my understanding, this is similar to exporting the main object from this file (analogous to module.exports) but instantiating it before exporting.

That is all we need to build a Hello World app using Angular 2.0.

Launch and test the App

You can use any static server to launch the app. If you have python already installed, you can run

Windows *nix
python -m http.server    python -m SimpleHTTPServer

from inside the hello2ng2 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 hello2ng2 folder. And then navigate to  http://localhost:8080/app/ you should see

Screen Shot 2015-03-23 at 11.37.56

Next Steps

There are quite a lot of things going on with Angular 2.0 and I think it would take another 3 – 4 months to get a fair idea on where Angular 2.0 is headed to.

You can track the progress here and Angular 2.0 milestones here.

You can also checkout the resources page, which has a few but helpful links on Angular 2.0.


Thanks for reading! Do comment.
@arvindr21

 

Tweet about this on TwitterShare on LinkedIn0Share on Google+20Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Mack

    first problem with this tutorial is after git clone the directory structure looks nothing like what is shown here. 2nd problem maybe related to the first is the install of gulp doesn’t work either.
    That’s all the time I’m gonna waste on this.
    Not sure why you created this tutorial as it only serves as a time waster.
    Either get it right or don’t post it. Sheesh.

  • razorree

    a big mess….. AngularJS2 mixed with JS (JS on a server side ??? )… where is the backend ? how to use AngularJS2 with a backend stuff (like Java) ?

  • bradykelly

    Your directory structure cloned by Git looks nothing like your diagram, and, more importantly, it contains no gulpfile.

  • Code Self Study

    I think that these commands are the same on Windows, Linux, and Mac. The difference is in Python versions.

    Python 3:
    python -m http.server

    Python 2:
    python -m SimpleHTTPServer

  • Andrei

    Gulp fails – error in plugin run-sequence

  • Rachit Bhasin

    I’m getting error ‘cannot find module “gulp-traceur” ‘ when I run the gulp command. So I ran ‘npm install –save gulp-traceur’. Now i’m getting ‘cannot find module “gulp-sourcemaps” ‘. Is there something that I’m missing? Or i’ll have to install each module one at a time.

  • Ramachandran

    on top of that how come there is NO MATERIAL AVAILABLE ON THE SYSTEM UNDEFINED ERROR issue that comes up? There is no information in the net and it is strange most of them who actually try this code get this error but the poeple who write this article dont get this error? I tried 3 different variations of the same code but it just does not work in any browser at all. What we need is an answer for the RefernceError: System is not defined – how to take care of that

  • Ramachandran

    There is something wrong really however i do it i keep getting the system error.. i even went and downloaded es6-shim,js and put it in the folder still get the same error

  • Jadoti

    I did a fresh pull of the quickstart repository, and when I run gulp it fails on the whole rebuilding of angular2 and such.. It’s throwing errors out of angular2.map and es5build.map… Repulled the repo to make sure it wasn’t anything I did and sure enough it’s the same error… Has something changed since you wrote this article?

  • Ajay

    I am familiar with AngularJS http://www.techstrikers.com , part-2 is new for me it’s really good..

  • Stevo

    Does not work in Safari 8. Javascript console says “SyntaxError: Cannot use initialiser syntax in a strict mode enumeration.” in es6-shim.js line 4941

  • http://www.syntaxsuccess.com/ Torgeir

    I have added some Angular 2.0 sample components here as well if you are interested: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks for sharing. The components look good.

  • Nicky Lenaers

    Great article really! I think it’s a lot clearer than the 5min tutorial on the angular website. What I’m not getting: what is the purpose of runtime assertion? And what is actually happening behind the scenes at runtime? How does it perform compared to static loading? I would really like to know! Thanks man!

  • Akshay Pingle

    I found Error “Uncaught ReferenceError: System is not defined” in index.html

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Is es6-shim js file loaded in your page?

  • http://www.tablokar.ir tablokar.ir

    nice post – im trying to translate this and share on my own web site at http://tablokar.ir

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Sure. Don’t forget to share a link here when done. I will update the post as well. Thanks.

  • Rune Jeppesen

    I think you should call it Typescript! Your own Atscript primer link, links to http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx
    From http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx:
    ‘Engineering Director Brad Green yesterday told the community “we’re happy to announce that we’re going to retire the term AtScript and we’re just going to call it TypeScript from here on out.”’

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Ah! Good to know! Thanks. Did not follow that news.

  • Lars Jeppesen

    Another great article – thanks. I’m really looking forward to the Angular2 progress – looks like it’s going to be amazing!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Lars. Yes, indeed. Can’t comment anything on it though till will see a beta version of it.