Welcome to my first post on Angular 2. In this post, we are going to make an Todo app with Angular 2. We will play with Component, Service, Form and Dependency Injection in Angular 2.

As the version 2 of Angular come out, many concepts from Angular 1 will be obsoleted and our experience on Angular 1 will be obsoleted soon.

The great thing about Angular 2 is almost everything is written from class, but Component become the core concepts to create view. This new change effectively replaces controller, $scope, directive, DDO. In Angular 1, we have to create controller, stick them around in template and assign data to $scope to make thing work, but this kind of paradigm does not effective for large app. Component in Angular 2 replaces them all, because we can splitter our component into smaller components so our code more cleaner and easy to maintain

Another great things is we have server-side rendering, it’s huge benefit for SEO. Performance of Angular 2 is increase from 3x to 5x in comparison with Angular 1. We should consider learning Angular 2.

The biggest drawback of Angular 2 is it doesn’t compatible with Angular 1, and but Angular team will release ng-upgrade module to help us use mix Angular 2 and Angular 1 components in an app.

Today we will make an Todo app by Angular 2. SystemJS is used to import our app. We don’t use Javascript but Typescript, It’s super set of Javascript and Angular team is built on it. You should visit Welcome to TypeScript to learn more about Typescript.

This tutorial is going to have 3 parts:

  • Part 1: Our todo list is very simple, it just displays a list of item. In this part we learn about Angular component, annotation.
  • Part 2: Now we can remove todo and mark a todo as completed. We make a service to handle these operations and inject the service into particular components.
  • Part 3: We add a todo form. Through this part, we learn about form handling in Angular 2.

Let’s get started.

This is our files structure. We have index.html to load our app and 3 components.

Here is the live demo of our app: http://davidtran.github.io/ng2-todo-part1/

Index.html

<html>
  <head>
    <title>Angular 2 Todo</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('src/app.ts');
    </script>
  </head>
  <body>
    <app>Loading</app>
  </body>
</html>

Here are 3 things you may notice in this file:

  1. We load SystemJS, AngularJS and Typescript from the web.
  2. SystemJS compiles our Typescript to Javascript and import our app into browser.
  3. We put tag <app> into the html body. This is the root component.

App.ts

Now we create the root component of our application in this app.ts

import {Component, bootstrap} from 'angular2/angular2';
import {TodoList} from './todoList.ts';
@Component({
  selector: 'app',
  directives: [TodoList],
  template: `
    <h1>Todo App</h1>
    <todo-list></todo-list>
  `
})
class AppComponent {
  constructor() {
  }
}
bootstrap(AppComponent);

 

At the first line, we import Component and bootstrap from angular 2 packages.
What’s interesting about Component ? Well, it’s a annotation, and this is a specific feature of Typescript. By using @Component, Angular 2 recognizes the class below is a Angular Component. This contains metadata like `template`, `directives`, `selector`. When Typescript see an annotation, it compiles that annotation data into a decorator. Angular in his turn reads metadata from decorator and compile our component. You can learn more about @Component as well as annotation in this post: The difference between Annotations and Decorators

In @Component, we define `selector`, it’s the tag name of the component when we use in the HTML Document.

The `directives` property tell Angular which directives/components is going to use in our template. In Angular 1 all directives is registered at global scope. But in Angular 2, if we want to use any directive, we need to declare in `directives` property. In a large app, this kind of declaration helps us avoid name conflict between different packages.

About the component itself, it’s just a ES6 class. We don’t need to use $scope service anymore, any property/method of class can be read by template. More cleaner, right ?

At the end, we use bootstrap to bring our app into life. We will also use it to inject services in part 2.

TodoList.ts

This component display the list of todo item

import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
import {TodoItem} from './todoItem.ts';
@Component({
  selector: 'todo-list',
  template: `
    <ul>
      <todo-item *ng-for="#todo of todos" [todo]="todo"></todo-item>
    </ul>
  `,
  directives: [CORE_DIRECTIVES, TodoItem]
})
export class TodoList {
  public todos: Array<any>;
  constructor() {
    this.todos = TODOS;
  }
}
var TODOS = [
  {
    content: 'Discuss new feature',
    isCompleted: false
  },
  {
    content: 'Fix issue',
    isCompleted: false
  }
]

Again, we start importing Component, and this time, we also import NgForOf. Similar to ng-repeat, this directive helps us repeat a template once per item in arrays. In order to use it, we need to import it from Angular, declare it in `directives` property. In the template, we need to put an alterrisk in front of the directive, it’s required when we want to modify DOM.

TodoList is responsible for show a list of todo item so in TodoList class. We prepare “todos” property with data from TODOS and use NgForOf to loop through and display todo item.

In the `template` we use another component, it’s TodoItem component. We assign todo item to “todo” attribute of TodoItem.

TodoItem.ts

This component displays the actual content of a todo

import {Component} from 'angular2/angular2';
@Component({
  selector: 'todo-item',
  properties: ['todo'],
  template: `
    <li class="todo-item">
      {{todo.content}}
    </li>
  `
})
export class TodoItem {
}

This time, there is `properties` in the @Component. Similar to scope in Angular 1 directive, we have to defined `properties` to transfer data from outside to inside component. We can access this data as class properties.

So our first app is almost ready. You can load our website and see result. It’s almost 100 lines of code just for display a list of todo item. But in the next part, we will add more functionalities into our app and make it a real app.

What would you like to know more about this first tutorial, let’s me know in the comment section.