Forward Advance Learning

Component Based Hello World

Angular applications are built out of components. A component works like a brand new type of DOM node which we invent. It can have behaviour, it can emit events, it can have custom attributes, it holds its own state.

In this section we'll build the simplest possible "Hello World" component using regular ol' JavaScript and plain script tags. We won't use a module packer or any tooling (though we will get to those things later). The goal is just to produce the simplest possible working Angular so we can see Angular gives us.

The JavaScripts

First up we need some JavaScript. We currently need four files to make our simple app work. These are:

  • shim.js
  • zone.js
  • reflect.js
  • Rx.js
  • app.js

shim.js

Angular uses edge JavaScript. If you're only targeting Chrome you can leave this file off, but if you want support for older browsers like IE9, you need this polyfill.

zone.js

Angular change detection works by polyfilling all built in asynchronous code. Things like setTimeout, setInterval, and AJAX, so that they give us an Observable which Angular can listen to. ZoneJS is a third party project that enables this.

reflect.js

Reflect is a JavaScript API that allows you to inspect other objects. Angular uses Reflect.metadata to store metadata about an object, without storing it as an attribute of that object. Angular uses Reflect metadata to store information about the types of objects.

Rx.umd.js

Angular uses Observables all over the place, for example for AJAX. Observables are like Promises, but with a much fuller API. They are objects that can emit streams of events.

@angular2 *.umd.js

Angular 2 UMD - the Universal Module Definition version of Angular exposes the Angular internals on a global variable called ng. This means we don't need a module loader for our hello world which simplifies things a lot.

Module loaders are cool, and we will get to them, but not in a hello world.

app.js

Your code.

What is UMD?

UMD (as in angular-all.umd.js) stands for Universal Module Definition. It is a common specification for exposing variables. In this case, it creates the ng global for us. This is great for initial playing around, because we can just include Angular with a script tag and make everything global, but eventually you will want to start using a module packer like WebPack to avoid globals.

More on this later.

HTML5 Skeleton

An HTML skeleton includes the necessary JavaScripts, then declares an app component.

Here's a skeleton HTML page for you to copy.

<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Hello World Demo</title>
<script src="lib/corejs/shim.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/reflect-metadata/reflect.js"></script>
<script src="lib/Rx.umd.js"></script>
<script src='lib/@angular-2.1.0/core.umd.js'></script>
<script src='lib/@angular-2.1.0/common.umd.js'></script>
<script src='lib/@angular-2.1.0/compiler.umd.js'></script>
<script src='lib/@angular-2.1.0/platform-browser.umd.js'></script>
<script src='lib/@angular-2.1.0/platform-browser-dynamic.umd.js'></script>
</head>
<body>
<app></app>
<script src='app/app.js'></script>
</body>
</html>

You can find this code in the resources repository here:

Why so many JavaScripts?

That's ten JavaScript files for a simple hello world, which may seem like a lot.

Angular 2 works best when it's integrated into a toolchain like Webpack. These dependencies are meant to be provided by your tooling. Here, because this is a hello world, we are using simple script tags, so we can see everything explicitly. This is different to most other current frameworks where tooling is optional but nice.

What is that <app> tag?

The <app> tag is going to be a component. We will create a component that matches that tag, and add behaviour and a template to it. Notice how we include the app.js file afterwards. This is so we don't run the JavaScript until after the app tag has been loaded into the DOM.

The Component

An Angular app is built out of tree of components, one inside the other. We first need to create a root component, which is typically called app. I am using a global variable here for simplicity, because this is a hello world. Later we will use proper modules.

// First define the component. I'm just whopping it in a global variable here.
var AppComponent = ng.core
.Component({
selector: "app",
template: `
<p>
Hello
<em>Angular!</em>
</p>
`
})
.Class({
constructor: function() {}
});

Notice the selector attribute. This component will match the <app> element. We also have a template. This will be inserted into the <app> element.

The .Class object is there to help us pretent that JavaScript has classes, and to make it look more like TypeScript. LAter, when we start writing TypeScript, we will use actual classes.

The Module

All Angular 2 code exists in an Angular 2 module. Modules are used to manage imports and dependencies. Each app will have a root module that will declare a root (bootstrap) component. We will use this module to start up the app. A typical app may have dozens or hundreds of modules.

Angular 2 runs in multiple environments, not only the browser, so here we declare the BrowserModule as a dependency. We included this using a script tag in the head of our page.

var AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
.Class({
constructor: function() {}
});

Bootstrapping

In Angular 1 we could bootstrap an application automatically using the ng-app directive. In Angular 2 we must manually bootstrap our app.

We wait till the DOM is loaded, then we call bootstrapModule to initialise the application.

ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(AppModule);

Here's that in context:

See the Pen Angular Hello World by Nicholas Johnson (@superluminary) on CodePen.

Convert this into a

Exercise - Make your own

The goal of this exercise is just to get something working for real.

Download the exercise start point from the Github Repo.

Save it in a folder and view it in a browser by double clicking the index.html file. You don't need to have a server running or anything special, just open the HTML file in the browser as a file.

If you run into errors, open the console, view them and fix them.

Change the app into a goodbye world app.