Hello Angular 2.0

TejasDesai.NET

5.00/5 (2 votes)

May 12, 2015

CPOL

2 min read

10071

Hello World with Angular 2.0

Introduction

Recently Angular 2.0 has created lot of buzz and why not. After the success of Angular 1.x, AngularJS team is working towards the next big thing and changing the way we build future web. While I am writing this blog, Angular 2.0 is still in alpha release and we can expect it to change/evolve a lot in the coming months. Having said that, this would be a good time to get your hands dirty with new Angular 2.0 and get a head start.

Background

While Angular 2.0 is developed keeping ECMA Script 6 and TypeScript in mind and that would be the way going forward, for the sake of simplicity, we will write this Hello World application using ES 5. Maybe in the next post, we’ll rewrite this Hello World app using TypeScript and ES 6.

Alright, let’s get started with our first Angular 2.0 application…

Writing First Angular 2.0 App

Index.html

Create an Index.html file and add reference to Angular 2.0 JavaScript file.

<script src="http://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js"></script>

Add the following custom element inside the body of your index.html.

<hello-angular></hello-angular>

We will go over what this custom element is in a short while.

Add a script tag at the bottom of your body tag and add this code inside the script tag.

angular.bootstrap(HelloAngular);

angular.bootstrap would instantiate and render the HelloAngular component which we’ll be creating soon.

Add App.js file reference to the HTML file.

<script src="scripts/app.js"></script>

We’ll create this file in the next step.

Your final HTML page should look like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello Angular 2.0</title>
    <script src="http://code.angularjs.org/2.0.0-alpha.22/angular2.sfx.dev.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body>
    <hello-angular></hello-angular>
    <script type="text/javascript">
        angular.bootstrap(HelloAngular);
    </script>
</body>
</html>

App.js

It’s time to create an Angular 2.0 component for the custom hello-angular element we added in index.html.

Create an app.js file in the scripts folder.

Add an empty function named HelloAngular to app.js file. This function will act as a controller for the Angular component.

var HelloAngular = function () {
};

Now, add a name property to HelloAngular function.

this.name = 'Angular 2.0'

Next, we’ll add annotations to HelloAngular component.

HelloAngular.annotations = [
new angular.ComponentAnnotation({
selector: 'hello-angular'
}),
new angular.ViewAnnotation({
template: '<H1>Hello {{name}}!</H1>You are awesome...'
})

Remember the custom tag we added to index.html? The selector in ComponentAnnotation tells angular to bind this component to hello-angular element in our DOM.

The ViewAnnotation defines the template for our angular component.

Here is how the final App.js looks like:

var HelloAngular = function () {
  this.name = 'Angular 2.0';
};
HelloAngular.annotations = [
  new angular.ComponentAnnotation({
      selector: 'hello-angular'
  }),
  new angular.ViewAnnotation({
      template: '<H1>Hello {{name}}!</H1>You are awesome...'
  })
];

Done! We just wrote our first application in Angular 2.0.
Don’t believe it yet? Open up index.html in your browser and see it for yourself.

Follow my blog Angular2x.com for more on Angular 2.0.