Angular 2 is written in TypeScript, which is a superset of ES6. This means ES6 will work in TypeScript, but TypeScript has a lot of extra cool features such as types and annotations. Annotations from Java are the ability to add meta data to classes, methods, variables et al. They are essentially information for the compiler about the thing that is annotated (introspection). You don't have to use TypeScript with Angular though.
Transpilers and Abstract Syntax Trees
TypeScript is a transpiler (or transcompiler), which means it is a program that takes source code from one programming language and compiles it into another programming language. So TypeScript takes our ES6 code and exports it as ES5.
The reason we can use one language to write a program in a different language (which in turn could be used to write another language) is by the use of an Abstract Syntax Tree (AST). The AST is used in the compilation stage. An AST is just that, if we abstract what the software does, it will be broken down into a tree like structure. That tree like structure could implement loops, conditionals et al.
Overview of the Angular 2 workflow
- Split your app into components
- Create the views
- Define your models
- Display your models
- Add interaction
Components
Components teach browsers new tags. They could be thought of the new Angular 1 directives. An Angular 2 app is essentially a tree of components, the root of which is the application component. The application component boostraps the rest of the application.
Components are based on classes (obviously still based on prototypal inheritance), so they can be extendable and aggregated. Aggregated components and children are rendered recursively.
A component is made up of three things: a Component Decorator; a View; and a Controller.
@Component({
selector: 'my-title',
template: `<h1>{{title}}</h1>`
})
class MyTitle {
}
Component Decorator
The @Component is the Decorator. This is the annotation which adds meta data to the class that follows. The annotation specifies a selector (telling Angular what element to match) and a template (specifying the view).
The selector part means angular will look for <my-title></my-title>.
- View: this is what html we want to render
- Controller: he controller in the above case is the class of MyTitle.
- Models: Angular doesn't have a prescribed model library, so we have carte blanche. I highly recommend some sort of Functional Reactive library like RxJs or Bacon.js.
- Application: an Angular application is just a tree of components. The top level component is what you bootstrap.
Getting started
'Dude, before I start I have to install 20 things and have a package.json file that is 90 lines long and all I want to do is create a todo list'. Shhhyyeaaahh, sounds about right these days. Thats where the cli comes in.
npm i -g typings
npm i -g angular-cli
ng
ng help