This article was peer reviewed by Stephan Max, Jeff Smith and Ravi Kiran. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!
As the year draws to a close, the Angular team is closer than ever to releasing a stable version of Angular 2.0. This will reshape the way Angular applications are developed, but for the better. Throughout this article, I am going to show you some of the core concepts in Angular 2.0, and how they can be used. Specifically, I am going to take you through the process of building a component in Angular 2 from start to finish. First, we will take a detailed look at how this is done using TypeScript, then we will then migrate our Angular component, so that it works using plain ES5.
The code for this tutorial can be found on our GitHub repo. The repo has two branches, one for the TypeScript version and one for the ES5 version. If you want to clone a specific branch, use git clone <url> --branch <branch>.
What Is a Component?
[author_more]
The use of components in JavaScript has increased a tremendous amount over the past months. They are used in projects such as React, Knockout, Ember, and more, so it is no surprise that Angular has incorporated them into version 2.0. Code modularity has always been something that the Angular team has placed a focus on, and the use of components underlines this, as they allow us to break up our code into encapsulated pieces.
But what is a component? Well, it’s essentially a bit of code that can be re-used throughout an application. It consists of two things: a view, and some logic. By leveraging the focus that the Angular development team has placed on components, we can harness some pretty powerful functionality. Angular 2 makes it incredibly easy to create dynamic applications made up of different components, which have taken over from directives as the head-honcho of the framework. In Angular 2, directives are lightweight components, and they are simply used to append some functionality to the DOM. Now, Angular developers do not have to worry about messing up an application due to conflicting problems regarding isolate $scope. Instead, the use of components is a way of ensuring that our code from one section of an application will not interfere with that from another.
TypeScript
Angular 2.0 has been created to use TypeScript, which is a superset of JavaScript. The developers of Angular have spent a tremendous amount of time working towards this release. They have worked to optimize performance regarding both page speed, as well as work flow automation. TypeScript is similar to other code transpilers and allows developers to write code that can be easily converted to valid JavaScript. That being said, it has become increasingly popular, especially throughout the past year, so the Angular team decided to create the framework using it.
One of the benefits that comes from using TypeScript is its type system, which allows developers to annotate their JavaScript with type information. This annotated code is run through a compiler which helps catch errors, that would otherwise have lain dormant in the code base, waiting for a user to discover them. Let’s now take a look at TypeScript in action.
Below, we see an example which I pulled from TJ Van Toll’s article The Rise of TypeScript. Inside this function, we see both the height, and width parameters are expected to be of type number. The : number before the body of the function specifies the return type, which is also of type number. As a result of this, anything passed into this function that is not a number will cause the compiler to throw an error at compile time.
function calculateArea( height: number, width: number ) : number {
return height * width;
}
console.log(calculateArea(2,3));
//Will work just fine
console.log(calculateArea("Ten", "Eleven"));
//Argument of type 'string' is not assignable to parameter of type 'number'.
Type declarations help us document our APIs and make our code more maintainable over time.
Installation
The process of compiling TypeScript to JavaScript is extremely easy. First grab the TypeScript package from npm:
npm install -g typescript
Continue reading %Creating Components in Angular 2 with Typescript and ES5%
by Thomas Greco via SitePoint
