Getting Started with Angular 2 using TypeScript
The current stable version of Angular (i.e, Angular 1.x) was built using the features of ES5 and was meant to work on most of the browsers including some of the older versions of IE. The framework was designed based on the features available in JavaScript. So, it had to create a module system of its own, abstract away some of the language features and provide a highly abstracted and configuration based interface to work on.
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.
TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the Angular team at Google for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.
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%
LEAVE A REPLY
You must be logged in to post a comment.