Getting Started with Angular 2 using TypeScript
All good things of Angular 1 are still available in Angular 2 and the framework is made simpler as well. Angular 2 is built with features of ES6 (and ES7), Web Components in mind and targeting evergreen browsers.
In this article, we’ll see how to use Angular 2 and TypeScript to build a simple application. As Angular 2 is still in alpha, syntax of the code snippets shown in this article may change before it reaches RTM.
Basics of Angular 2
As already mentioned, Angular 2 was built with simplicity in mind. The team removed a number of recipes of Angular 1 that made us think “Why are we doing this?” (if you want to know what has been removed, I suggest you to take a look at this video titled Angular 2.0 Core session by Igor and Tobias). Now the framework is comprised of a small set of building blocks and some conventions to be followed.
The building blocks which are present in Angular 2 are:
- Components: A component is similar to directives in Angular 1. It is built with features of HTML5 Web Components. Every component has a view and a piece of logic. It can interact with services to achieve its functionality. The services can be “Dependency Injected” into the component. Anything that has to be used in view of the component has to be a public member on the instance of the component. The components use property binding to check for changes in the values and act on the changes. The components can handle events and event handlers are the public methods defined in the component’s class.
- Services: A service is a simple ES6 class with some annotations for Dependency Injection.
As in Angular 1.x, Angular 2 uses Dependency Injection to get references of the objects. As
scope has been removed from the framework, we don’t have digest cycle running and hence we don’t need to keep calling
scope.$apply while working in non-Angular world. Angular 2 uses Zone.js to kick the changes and zones know when to act.
An Angular 2 application starts with a component and the rest of the application is divided into several components which are loaded inside the root component.
If you want to learn more about the basics of Angular 2, please check Victor Savkin’s blog post about Core Concepts in Angular 2.
Continue reading %Getting Started with Angular 2 using TypeScript%