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

Author: Owais

Hello World, I'm Owais, a geek programmer, blogger, and occasional speaker on all topics related to technology and development process.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s