Angular 2 High points

Been a while since I posted on here so I thought i'd document the high points of the latest thing im learning: Angular 2. Im not going to go over the step by step as that is covered in the docs at angular.io but rather I want to focus on some concepts that are interesting to Angular 2 (A2 for the remainder).

Edit: This post is 6mo old now. In the Angular world that's ancient haha. Ill update it soon. For now, you should check out cli.angular.io to start a new project.

Angular 2 First Impressions

Angular 2 is a major departure from previous styles of doing things in an MV* framework. ( Angular Included ). A lot of decisions are made for you but If they are good decisions I don't see that as a problem. For instance, Typescript is the lingua franca of choice and angular makes heavy use of composeable interfaces that are built out of classes, components, and annotated decorators. Don't worry if this seems a mile above the language you're used to. We're going to explore these terms and how they fit together as we go.

At first, my initial impression was that angular 2 was a bit scattered and not as unified of a solution as I would like. Out of the box the quick start didn't work for me, a book I was reading used different packages than the official quickstart and it struck me as weird that the framework blended together so many third party tools to make it actually function. You have this module loader here to load the modules, this library here to monitor the DOM for changes, that thing there to ensure browser compatibility. It feels like builing a strung together app for a business rather than just running through a streamlined quick start. I have to say though, once things are up and running, I think the way they advocate building applications in A2 feels like slipping on a comfortable glove. It just fits right, not like OJ's glove. :p

Angular 2's style of building applications with classes and components fit's like a familiar glove. Comfortable and just right.

The Mercurial Setup

If you have never built an SPA before this can be kind of tedious and a bit overwhelming. My initial thought was not to cover this but I changed my mind as it is important for to make sure you have a solid understanding of the basics before building. So to set this bad boy up you create an initial entry point for your app where you load your javascript files and your initial module.

The initial module, sometimes called your bootstrap file. Many times this file is called main.js or something to that effect. Since we're using TypeScript you will see files with a naming convention of main.js.ts. So to get things kicked off head over to the angular.io site and copy their setup files, package.json, typescript config files and so on into your app root. Then do an npm install. Next here is how your index.html should look:

<html>  
  <head>
    <title>Angular 2 Intro</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="packages/app/public/styles/css/styles.css">    

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

    <!-- 3. Display the application -->      
    <div class="container">
      <App></App> <!-- Our app loads here! -->
    </div>
  </body>
</html>  

I know it's a monitor full. Let's break it down.
1. Shim.js is a tool to ensure compatibility with older browsers.
2. Zone.js watches the dom for file changes
3. Reflect is what allows you to make annotations for your components
4. system.js is the chosen module loader for angular 2.

If you have a problem after doing npm start try doing a global install of system js and typescript.

So where is the script tag for our main app file though?

So your main app file is what bootstraps the application. It is pulled in via system.js and so is each subsequent module as well. Here is what a sample of that looks like:

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);  

If you're wondering how system.js knows what to do and how to do it, you can take a look at the systemjs config file that you copied from the angular.io quickstart.

Bootstrapping is only done once typically and then you just import the component class and the modules you are working with after that point.

Wading into the component pool

Angular's core strength is in teaching the browser how to build new elements. These elements are self contained building blocks that have their own behavior and personality. These self defined elements are called components.

So A2 builds things based on components, like any good app should be built. You start with a root component and just add on top of that. Each component is built out of a class, and annotations that describe / decorate that class.

Even the framework itself is composeable. You import the parts of it you need. As the quick start on the Angular site says, there is a general three part process that you follow to build components:

  1. You import the framework code / modules you will need to build your app.
  2. You describe how your component will behave through annotations that are called component decorators.
  3. You create a class that is responsible for appearance and behaviour of the view.

Optionally, many people like to also define models that the instances of the class will use, thereby separating the data from the view logic.

Let's take a look at an example below:

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `<h1>Hello World! I'm Angular 2</h1>`
})

export class AppComponent { }

The takeaway's of the code above are:
1. the selector is the tagname that we are creating.
2. Notice the template goes in the component annotation, also we are using backticks instead of single quites. This is a nifty ECMAScript6 feature that typescript allows us to utilize. It let's us do things like multiline strings, variable interpolation, and more.

You can also nest components, let's imagine we were writing a blog application. We can nest article components inside of parent components. Let's look at extending the previous example:

import { Component } from '@angular/core';  
import { ArticleComponent } from './article.component';

@Component({
  selector: 'app',
  directives: [ArticleComponent],
  template: `<h1>Hello World! I'm Angular 2</h1><Article></Article>`
})

export class AppComponent { }

In order to use a component in another component, you have to tell the parent component to expect the child component. The way to do that is to first import the component, then to register it by putting it in the directives array of your parent component.

Conclusion

As you can see, this is an interesting approach to building things with angular. It's a composable, class based approach that mitigates much of the former criticism associated with building JavaScript apps. People coming from other languages looking for more classical based paradigms or features such as strict typing should feel right at home learning angular 2.