April 2, 2015
  • All
  • angularjs
  • Ionic
  • Open Source
  • Top Posts

Angular 2 Series: Introduction

Max Lynch

CEO

README: Angular 2 has changed significantly since this post was written. As such, please do not use this code verbatim. Instead, focus on the concepts below and then map them to the new syntax and API of Angular 2.0.0.

By now, the cat’s out of the bag on both Angular 2 and Ionic 2. We have a great team working hard on the next big version of Ionic and helping shape Angular 2 in the process. I’m incredibly excited about the progress we’ve made in a short amount of time, and I know the Ionic community is just going to love it.

For many, Angular 2 represents a massive change to the framework they love (or love to hate). Everyone spent so much time learning the odd language of v1 (directive, anyone?), understanding how scopes and digest cycles work, spending time debugging ngModel issues, and trying to figure out the perfect folder structure, and now almost all of that is changing.

Trust me, it’s for the best.

Angular 2 Series

The Ionic team is one of the earliest adopters of Angular 2 for a large project. Because of that, we are learning a lot about the intricacies, limitations, and power of Angular 2. We know that in order to get the community to embrace Angular 2, we need to start sharing our experiences and educating frontend developers on Angular 2.

Starting this week, we are going to do a series of short posts on Angular 2. These posts will cover various parts of the framework, how to use it, and where to get help.

Today, we will start with an intro to the framework, getting everything installed, and trying out the samples.

Getting started

Let’s follow the quickstart guide on the official Angular 2 docs, but with some added color and commentary.

First, create a project folder, and clone the quickstart repo into it:

mkdir myApp
cd myApp
git clone git@github.com:angular/quickstart.git

HTML

Create a new index.html file with this:

<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="/quickstart/dist/es6-shim.js"></script>
  </head>
  <body>

    <!-- The app component created in app.es6 -->
    <my-app></my-app>

    <script>
      // Rewrite the paths to load the files
      System.paths = {
        'angular2/*':'/quickstart/angular2/*.js', // Angular
        'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
        'app': 'app.js' // The my-app component
      };

      // Kick off the application
      System.import('app');
    </script>    
  </body>
</html>

Your first response should be, “What’s with all these weird System.* things?” System just adds es6 module loading support to the browser. It’s worth noting, like many of the boilerplate in Angular 2 right now, this is going to be going away (or at least we will abstract it out in Ionic 2, so you don’t ever have to see this). Learned, and promptly forgotten.

Everything else should look pretty familiar, minus the fact that we don’t have an ng-app anywhere.

Javascript

Next, we need to write some ES6!

So, create a file called app.js with this code in it. (the docs use .es6, but I don’t recommend that extension, and it doesn’t seem to be catching on).

import {Component, View, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@View({
  inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'Alice'
  }
}
bootstrap(MyAppComponent)

The interesting thing about this is how we specify the app component. The bootstrap(MyAppComponent) call tells the app to start, much like ng-app did. Except, in this case, we provided the actual component that starts the app.

Let’s test this!

If you don’t have a local HTTP server installed, we can use npm install -g http-server or python -m SimpleHTTPServer. It’s up to you, but I recommend getting one and learning how to use it.

http-server

Open http://localhost:8080 in your browser, and you should see this:

server

That’s it!

TypeScript?

For the sake of simplicity, the starter project uses a pre-built version of Angular 2 from Traceur.

However, the project is moving to TypeScript right as we speak, which will make the whole toolchain a lot simpler. Suffice to say, you don’t need to learn Traceur or even remember the name for much longer.

Next up: Components

In the file above, we created our first Component. Components are the core of Angular 2, and replace the delicate mess of Controllers, Scopes, and Directives as we knew them from v1.

See the next post in the series, Intro to Angular 2 Components to learn more about the new component system!


Max Lynch

CEO