TU Tran

Technologies should serve for business purpose.


Angular2 - Overview

Note: In my series of angular2 article, I use free template at https://colorlib.com/polygon/gentelella

Hi TU, I want to learn Angular2, Where should I start from?

For learning Angular2, I think you should follow the list of articles as below (click on link to see detail page):

  • Overview: this will provide you an overview about Angular2 before writing your first code for your Angular2 application.
  • Routing: This will help us understanding how does Angular2 display the page and pass parameters between pages.
  • Data-binding: this will help us understand how to display data in UI and receive input data from user in angular app.
  • Component & Directives: this will help you understanding how about creating reusable component in angular2 and interaction between them.
  • Component life-cycle: this will help us understand how to handle events of component during its life-time.
  • Di & Injection: this help us understanding how to use DI & Inject that was provided in angular2.

What is Angular?

Angular is a nice framework for creating Single Page Application (SPA).

What is SPA?

It is a web application/ website started from a single HTML page and load appropriated resources dynamically.

Is SPA a static web site?

In some view, we can say "yes". SPA application contains html, js, css files and utilize the feature of Ajax for getting other resources/ sending request. For example: Information of user, or creating new record in database, ....

SPA also improves the interaction between the application and its user, performance.

Which version of Angular should I learn?

For now, we have 2 version of angular: 1.x and 2.x.

  • Angular 1.x version was old version and should not be used for new project, as it may be removed soon.
  • Angular 2.x is a new version, it uses typescript for handling the logic of application. we should learn this version.

Why should I learn angular for building a SPA?

For creating SPA, there are number of frameworks for us, such as: Angular, React, Durandal, ExtJs, Backbone.js, React, Ember.js, Meteor ...

Nowadays, Angular and React become a popular frameworks used for this purpose.

In this series of article, we will focus on Angular only. There will be another series talking about React later.

Angular is an open source framework supported by Google and easy to get support from community.

When should I use Angular?

This is a enterprise framework should be used for creating a complex web application.

In Angular2, it uses typescript for handling the logic of application. this also complement the power of Angular.

Do you have the sample code that I can use as reference?

Yes, Please download the code from https://github.com/techcoaching/angular2

How can I run this code?

Please follow steps below to run the sample code:

  • Checkout the code to your local folder on your PC.
  • Map this folder to you web-server (for example: http://localhost in IIS)
  • run "npm install" from above folder for installing npm packages used in the code
  • run "tsc", this will compile ts code  into js. You may see some warning in "node_modules/**", Please ignore it for now.
  • From you browser, access to "http://localhost", you will see below screenshot.

I think, this article gives me an overview about Angular and SPA, I'm ready for the next article?

Ok, Please continue with Routing part (the article may be under construction, please visit later if you can not see it)

Where can I find more articles in Angular2 series?

Please have a look below for the list of other articles:

  • Overview: Introduce about Angular2
  • Routing: Understand how Angular2 navigate between pages/ components
  • Component: Learn about components/ pages in Angular2.
  • Binding: Learn how Angular2 show data on UI and receive input data from user.
  • Directive: Learn how to create re-usable component/ control that can be re-used across the application.
  • Integrate together: using what we learn about Angular for building the sample demo. 
  • Append "angular 2" into current "Angular 1" application.


Thank for reading.

Note: Please like and share to your friends if you think this is usefull article, I really appreciate

Comments (1) -

As I internet site owner   I feel  the  topic material  here is  real   amazing,  appreciate it for your efforts.


Add comment