Learning basics of Angular 2

Not a long time ago, building complex client side applications was quite an effort. We need to find and build our own framework to do all the functions like state management, validation, http calls and what not. But now we have a lot of client-side frameworks to take care of orchestration to build client side applications. Angular is one of those frameworks and in this post I will try to introduce you to all the basic concepts and to build a client-side application using latest version of Angular.

Angular has component architecture inspired by web components so when your web app has common UI element and elements with complex functionality, you can write them in Angular and reuse different modules along with achieving modularity.

You can use following 3 languages to use Angular,

• ES5: ECMA Script 5, old version of Javascript
• Dart: a language from Google
• Typescript: a language from Microsoft, its a superset of ES6 so that means you can use all the features of ES6 and also use the other features which Typescript provides. Since AngularJS 2 is built using Typescript then it means we will have some advantage if we know how to work with Typescript. Also a lot of documentation written for AngularJS2 is written in Typescript as well.

We are going to use Typescript for our examples.

TypeScript

It adds two features to angular,

• Types: It will assign types to the variable you are using (optional). It helps in debugging the code.
• Annotations: It helps to extend the components and handles a lot of how you set them up.

GulpJS

Since a lot of browser currently don't support Typescript and ES6 so we need to convert out code to ES5 so that we can make it run on all the browser for which we need Gulpjs. Gulpjs helps to automate the build process, whether you want to convert your code, or you want to minify your HTML/javascript or you want to use Sass or PostCSS.
GulpJS uses a series of plug-ins that lets you access features in your build process.

• gulp: importing the gulp plugin itself
• gulp-webserver: lets us run the webserver
• gulp-typescript: in order to convert typescript into javascript
• gulp-sourcemaps: its good to use sourcemaps when you use a code that has to be converted something else so that when we use our browsers it will map the error to the typescript and not the javascript code.

To load the typescript configuration from a file, we import it from a file names as tsconfig.json as shown below which is the general setup. It sets the rules for how our typescript will be converted to javascript. if you want to learn more about tsconfig file then please refer to tsconfig website.

Please see gulpjs file below to understand the rest of the code.

Angular 2 Structure

Since Angular 2 revolves around the concept of components, their are 3 parts of a components which we have to take care. 

• Decorator: it has information about controllers
• View: it is just a template that we want to show
• Controller: it is the javascript that is going to add functionality to the view

In order to add any functionality to angularjs we need to import the library that we want to work with into our application. You can find the complete listing of all the api for angularjs at https://angular.io/docs/ts/latest/api/. 

The most common one is the module angular2/common module. Also, there is another one called angular2/core.

Lets create a component

In order to make our component we need to first import the Component definition from angular2/core. We also need a module to start the application so we need a Boostrap module which is under angular2/platform/browser, it has a function that starts the application.

So we will import the components from angular2/core and boostrap from angular2/platform/browser like shown in the file angularImportComponent.js below. Now we create a decorator which starts with '@' sign and then the word Component.The definition inside this decorator it helps us to setup a lot of different types of information about our Components. When angularjs creates a Component, it creates a shadow DOM element for the Component and then it loads up the template into that DOM element. This gives us ability to create our own HTML tags and then we can define that what the tag is going to do through javascript. So first thing we need to add to this Component is the name of the HTML tag that we want to create called as Selector. One important thing, Decorators are just Typescript addition and in that language they are expressions that return a function (Javascript 7 feature) so please don't add any semi colon after the definition which will throw an error and often hard to debug.
So now we need to create a Controller for our module. This is going to be a class that's going to define the functionality of our application. Right now we are not adding any functionality to keep it simple, we will just try to boostrap our application.

So now we have all the components ready all we need to do is initialize or load our application using function called as Bootstrap which we loaded by importing angular2/platform/browser. So we will just call this function and pass our AppComponent as an argument. Now bootstrap is going to look for the Selector which we defined in the HTML and then it is going to bind our information from our module to it. So now we have to just add this HTML tag(in our case, ) to our index.html wherever we want our message to show up like shown in the index.html file.
Now you will see "Welcome to the world of AnguarJS 2 " message on the page.