My Angular2 Hello World

Any project we do it is very important for us to establish right design patterns. In JS world one of the most used and appreciated pattern is "Module pattern". It is also important that we don't re-invent wheel. There are plenty of seed applications for Angular2 for us to start with. I have tried a few and found below 2 to be the nice. In the sense they are not overtly intrusive to our ways of work. Off the 2, first one is more basic and better suited for our application. Later one is more useful for production grade applications. I'll have a separate post for that in coming days. Please take sometime to go over github links. There's not much as setup for both, except for download and init, followed by start. Since we seed this from github, you may need to understand what other components have been added namely - yomen, gulp, jasmine etc. If you are not interested in these frameworks, knock them off and continue.

I have tried a couple of seeds
1. https://github.com/mgechev/angular2-seed
2. https://github.com/mschwarzmueller/angular-2-beta-boilerplate

Here are your next steps
1. Download angular-2-beta-boilerplate-master.zip file from Github
2. Move zip file to a location of your choice
3. Unzip angular-2-beta-boilerplate-master.zip,
4. Open terminal, browse into root directory of unzipped file (which I persume would be angular-2-beta-boilerplate-master)
5. Do "npm install".
6. When all done and complete, execute "npm start"

This will open your browser and show HelloWorld Angular2 application.

If you see that, congratulations!!!. Welcome to the beautiful world of Angular2

What we embark on in this BLOG is incrementally build on a contacts application, in the process touch upon all new concepts in Angular2. I have gone very light and picked up "Contacts" project for a couple of reasons. There are so many "To Do" application that I had a brain dump on "To Do". And of course, I did not want much focus to go into domain. We want to touch upon as many Angular2 concepts. We'll make exceptions to "Contacts" application sample for few Angular2 blogs, but that will be way later

As mentioned in my earlier article, please take some time to go over Typescript before you join me in Angular2 journey.....choo, choooo and the train has hooted to signal that, it's leaving the station

Before we get started, please keep the zip file for bootstrap safely. We may need it a number of times. Each time you expand on the zip file, its a good practice to rename root directory to something that's more meaningful for your project.

Unzip angular-2-beta-boilerplate-master.zip and rename root directory to say "MyFirstApp" or anything of your choice. Let's bring up our first contacts page/component.

Open up app.component.ts and make the following changes. We change hello world template to display contact information.

app.component.ts

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `
        <div><b>{{contact.firstName}} {{contact.lastName}}</b></div>
        {{contact.designation}}<br />
        <input type="text" [(ngModel)]="contact.designation" />
        <ul>
            <li>Phone Number: {{contact.phoneNumber}}</li>
            <li>EMail Id: {{contact.emailId}}</li>
        </ul>
    `,
})
export class AppComponent {
    contact = new Contact("Roger", "Fedrer", "Ace tennis star", "508 002 1324", "fed.express@outlook.com");
}

class Contact {
    firstName: string;
    lastName: string;
    designation: string;
    phoneNumber: string;
    emailId: string;

    constructor(fname, lname, dsgn, phone, email) {
        this.firstName = fname;
        this.lastName = lname;
        this.designation = dsgn;
        this.phoneNumber = phone;
        this.emailId = email;
    }
}

What we have done above with the selector is, display first name and last name in bold. Followed by designation. Load the same designation in a text field to show two-way binding is still an integral part of Angular. We loved it in Angular1. Our affair can continue in Angular2 too. Type in a different designation and see it show up in the display above. We follow that information with Phone number and email ID. There is a reason we have email and phone number in a separate DIV. You'll see that in a little bit.

Then comes our class "AppComponent", we create a new instance of contact. This instance is what is used in template. This is not an elegant way to either create a component or feed values into it. Definition of Contact class is right below, defined in Typescript

Now that's it. If you were using npm start, then the changes would already show up in the browser. If you had stopped it, you may have to re-run it. That's it for this BLOG. Will see you seeon with some events in the next one