sample: steps to build “5/8/15 Alex Eagle todo” using (8/18/15) alpha .34

Here is the demo: youtube video. It is based on this ngconf2015demo repo.

  • Create a folder named todo2.
  • If you haven’t done so, use npm to install ‘tsd’, the TypeScript Definition manager for DefinitelyTyped.
  • Get the angular2 type definitions – We will use tsd to create the tsd.json file (which can be checked into repo and used by team).
    • Go to the commandline in todo2 and enter: tsd init. This will create the following files: tsd.json, typings\tsd.d.ts.
    • Then enter tsd install angular2 –save (does same thing as  query angular2 –save  –action install) This will update the tsd.json file with a reference to a specific commit/version of the angular2 AND create a typings\angular2\angular2.d.ts file that contains the method signatures/type definitions for type-checking by the editor.
    • Also, as of alpha.34, Angular2 depends transitively on these libraries. If you don’t have them installed, run
      tsd query es6-promise rx rx-lite –action install –save

      • <reference path=”../es6-promise/es6-promise.d.ts”/>
      • <reference path=”../rx/rx.d.ts”/> As of 8.28.15 running ‘tsd install angular2 –save’ took car eof this automatically!
  • Configure the TypeScript compiler (tsc) by using a tsconfig.json file to spell out the various compiler (transpiler) options. See my tsconfig.json notes for details.
  • Create a todo.ts file.
  • Start tsc in watch mode from the command line: tsc -w and leave the command prompt open in the background so that it will produce the todo.js file based on changes we make to the todo.ts file.
  • At the top of the todo.ts file, reference the typings we’ve downloaded. For this project, that would be angular2 – which we installed using the tsd command tsd query angular2 –action install –save.
  • Below our reference(s), add import statements such as this one:
    • import {bootstrap, Component, View, For} from “angular2/angular2”;
    • The app uses firebase which is not released, so we ‘copy it over’. See demo video.
    • Create a firebase import statement and a dependency injection import statement.
  • Create todoApp class with the needed @Component and @View annotations.
  • Below the class definition, add a call to the angular2 boostrap function to tell angular2 about our class:
    • bootstrap(TodoApp);
  • Create the index.html and todo.html files. todo.html is our template file.
  • Start up the http-server to see that the app loads.
  • Fill in more component logic by configuring the dependency injection.
    • Add an ‘injectibles‘ section to the @Component annotation.
    • Create constructor on class and other logic in class. NOTE that the code is plain old JavaScript, not TypeScript.
  • Declare any directives we need to use inside our template. For this app, we type the following inside of our @View annotation:
    • directives [For];
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s