Angular 2.0: Chapter 1 ‘New Horizon’

Time for some ‘Hello World’. This is by far the most effective way of learning a new tool or technology. Let’s do this a bit differently. We will call our first app ‘New Horizon’. It is a hello world on steroids (or steroids of mild potency). The basic idea is taken from https://angular.io/docs/ts/latest/quickstart.html.

1: Install Node

We will use Node Package Manager (NPM) to setup the project. In order to use NPM, install Node. Note: This is not mandatory. I choose it because its simple and scalable. Feel free to use anything that you like. Alternate way is to go for non-installation path by using CDN hosted libraries (out of the scope of the current tutorial).

2: Setup Project and Modules

Create a folder for the project (mkdir is a handy command to do that). From command prompt, go to the newly created folder and run the following commands

  • npm init (this command will ask all sort of questions, if you want the default settings, go for npm init -y).
  • npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 –save –save-exact (this command will install the latest alpha of angular and systemJS library. This is the latest alpha at the time of writing this blog. Do check angular.io to ensure the latest one).
  • npm i typescript live-server –save-dev

Q: Hmm, I can understand the fact that we have to install Angular 2, but what’s up with all the other stuff?

Good Catch. Lets break things down

SystemJS – It is the universal dynamic module loader. This will be a useful tool when creating multi-module application.

Typescript – It is a super set of ECMA-Script 6 with support of data types. As most of you know, Javascript is a weak type language. With Typescript, this is not a weakness anymore. Plus, Angular 2 is written in TypeScript. Having said that, this is not mandatory as ES5 version angularJS is also available (along with the one for Dart). So, long story short, we will be writing the code in Typescript (with extension of ‘ts’). Since, Browser can only understand ES5 (and some ES6), the code is trans-piled to ES5 before going to the browser.

LiveServer – A quick way to create a web server to publish and see your work.

After running these commands, check ‘package.json’ file in the project folder. This file now contains the details of the installed packages. npm package file can be used to write rudimentary scripts to help manage the application. Add the following script to the script tag in the package.json file.

“tsc”: “tsc -p src -w”,
“start”: “live-server –open=src”

We will run these commands later. Note: If you want to go further, you can setup Grunt or Curl to manage your application. They have more functionality.

3: Finalize directory structure.

Following is the folder structure, I am using for the demo application. You can do the same.

Tutorial_1_1 (1)

 

4: Entry point to the application: Create Index.html

Index.html is the entry point of the application.

Tutorial_1_2

This is a very simple setup for an application with angular2 and systemJS libraries included. SystemJS is used to import the application modules.Note: System is a global object created by SystemJS.

As an alternate, you can to the following:

System.import(‘scripts/app.js’); // No need to add config.

OR

If you are not interested in SystemJS all together, then you have to relay on DOMContentLoaded event to manually bootstrap your root component. Checkout this nice article: http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html

5: Root Component: App.ts

The first step will be to import required modules. Unlike Angular 1, not every component or module is available in the context. We need to import the ones needed. For the root app component, we need the basic stuff (Component, View & Bootstrap).

import {
  Component,
  View,
  bootstrap
} from "angular2/angular2";

Import statement defines the modules we want to use to write our code.

Second step is to create a root component. Consider root component like an ‘np-app’ directive. There are three main aspects of the new component of Angular.

Component Annotation: The annotation that provides basic information about the directive and how it will interact with the outside world (DOM).

View Annotation: The annotation that provides the basic template of the component along with the information of the directives that can be used in the template.

Definition class: provides meaning to the component. The properties of the class can be used in the template.

@Component({
    selector:'my-app'
})
@View({
    template: `Hello World on Steroids`
})
class AppComponent {}

Last part is to tie everything together. Bootstrap the new component to the root level of the application:

// Use this function to Bootstrap or Loading a new component at the root level of the application.
bootstrap(AppComponent);

					
Advertisements

Gear up for Angular 2.0

Angular 2.0 is the next major version of Angular JS. Like any major version transition, there is no backward compatibility. When this version was announced, the buzz was not about the lack of backward compatibility but was about how different it is from the current version of the product. It feels like a totally different framework!!

learning a new way starts with unlearning of an old way

So, are you ready to learn something new? Sure you are. That is way you are here. Let’s start with the clean ground. Please shed all your angular assumptions like Directives, Digest cycle, Scopes etc. (Don’t worry some of these things are still there but in a slightly spiced up manner). I will be helping you out in every step of the way :). I have planned to write a series of blogs about Angular 2.0 (hopefully this will be a monthly affair). I will share my learning and try to provide all the supplementary information (code and hmm mostly code i guess). Following are some of my main sources of knowledge:

  • Official Angular website and blogs
  • Some Angular JS published / unpublished books
  • Forums
  • Talking to Angular JS folks (annoyed the hell out of them with all crazy questions :D).

The idea is to start with the basic stuff and build towards more complex concepts. If you have any questions, comments or feedback, feel free to talk to me or post on my blog.

Next Stop -> It is the new Horizon. Time to paint the picture again. This time with Angular 2.0. Chapter 1: New Horizon coming soon.

Stay Tuned

Note: The image associated with this blog post is taken from angular.io site.