angular2 notes

Starting an Angular 2 project by Yakov Fain – Updated for 2.0 Final Release  (September, 2016)

Angular2 5 Min Quickstart – Good simple reference for non-CLI scaffolding’/configuration that utilizes tsc, node, npm, commonjs,


  • Each Angular2 component requires a single @Component annotation and at least one @View annotation.
  • The @Component annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
  • The @View` annotation specifies the HTML template to use, and lists the directives that are active within the template.
  • A component annotation describes details about the component. An annotation can be identified by its at-sign (@).
    • @Component – The @Component annotation defines the HTML tag for the component by specifying the component’s CSS selector. It “tells angular that this class is a component.” @Component() takes (one or more?) parameters, a _ComponentArg interface. All of the _ComponentArg properties are optional – which means you can pass in just one of them on @Component().
    • In 5MinuteQuickstart app this app we will pass in a selector JavaScript object:
      • @Component({selector:’todo-app’})
    • @View – This annotation defines the HTML that represents the component. The View will present the UI. The View can be an inline template, or, more likley an external template. To use an external template, specify a templateUrl property and give it the path to the HTML file.

Alex Eagle (Google angular2 team) – Getting started video quote

“@Component is an object that has properties like selector.”

From Pascal Precht – Dependency Injection (Updated 8.17.2015):

The DI in Angular 2 basically consists of three things:

  • Injector – The injector object that exposes APIs to us to create instances of dependencies.
  • Binding – A binding is like a recipe that tells the injector how to create an instance of a depedency. A binding needs a token that maps to a factory function that creates an object.
  • Dependency – A dependency is the type of which an object should be created.

Angular2 npm package (from angular2 git repo)

From Announcing TypeScript 1.5 – Jonathan Turner

Decorators allow you to attach metadata to classes and members, as well as update the functionality of what is being decorated.  As you can see above, Angular 2 uses Decorators to define the HTML selector and template on a class directly. We’re excited to see what else developers do with this feature.

Note: to use decorators in your projects, you’ll need to pass the –experimentalDecorators flag to the compiler.


tsd.json Notes

The tsd.json file refers to a specific commit of angular2:

“installed”: {
“angular2/angular2.d.ts”: {
“commit”: “a9c59f8166b4d7f1e8c4309a506987c2e6d78b5e”

This is useful as it ‘locks down’ the dependency during development – everyone on a team is working against the same definitions.

tsd commands notes

Here are a few commands, but go to Automating retrieval of TypeScript definition files with TSD to see a bit more.

tsd init Per DefinitelyTyped  “Creates a new tsd.json and tsd.d.ts. This is not required but useful to init valid project references before starting to add (external) code, or if you want to edit the config.”

tsd query angular2 This query will return ‘zero results’ if the angular2 d.ts is not found or will return the path to the d.ts file if it is found.

tsd query mongoose –action install This query will install the d.ts. file at .\typings\mongoose\mongoose.d.ts.

tsd update -so Note that ‘-so’ stands for overwrite and save. – from Automating retrieval of TypeScript definition files with TSD, updatea all installed DefinitelyType definitions.

To verify that this worked, I checked and saw that the header in the angular2.d.ts file changed from after I ran the above
from: Type definitions for Angular v2.0.0-alpha.28 to: Type definitions for Angular v2.0.0-alpha.34