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().
- @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.”
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.
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.