Introduction and bootstrapping of Angular 2 application

Why Angular?

he main idea of angularjs is a separation of logic between HTML update and JavaScript logic in web pages. Also with angularjs, we can test our applications very easily.

Google team has made some changes to angular 2.x which are completely different in structural and coding concept than angular 1.x. Let us see what is the need for such drastic changes:

1. Angular 1.x was not a good choice when it comes to mobile development. So, Google comes up with Angular 2.x which completely focus on mobile development. It is also a necessary step because the world is moving towards mobile first driven technology.
2. Angular 2.x is focussed on ES6 concepts and supports all latest browsers.
3. Angular 1.x was slower as compared to new Angular 2.x. The main building block of angular 1.x is controllers and $scope which is removed and is replaced by components and directive.
4. Angular 2.x is basically based on TypeScript (Angular 2.x framework is itself written with TypeScript). So it helps to maintain coding standards.

Bootstrap angular 2 projects

There is command line tool available which can help us to get started and bootstrap Angular 2.x application very easily.

To install Angular CLI make sure that Node.js is installed if not please install node.js first, and then run below command in command prompt/ terminal:

npm install -g angular-cli

  Note: The above package should be installed as a global dependency. Don't miss -g flag.

 

Once installed run the below command to bootstrap angular 2.x project.

ng new 'app-name'

Replace 'app-name' with the name of the angular 2.x app that you would like to give.

So now our angular 2.x app is ready to serve. To serve the app go into the angular 2.x app directory and run the below command:

ng serve

This will serve the app and is ready for development. Open the URL in the browser and you will see the page shown below:

NOTE:

1. ng serve by default uses 4200 port to serve app. If the port is in use then you can specify port like: ng serve --port 3000.
2. As angular 2 CLI started using web pack, so to inject webpack.config.js file command is: ng eject

Link to angular-cli GitHub repository: https://github.com/angular/angular-cli.

Understanding Angular 2.x application bootstrapping

The work to run an application is done inside the hood by an angular-cli tool. But it is good to know, actually how our angular 2 application is working behind the scenes. So let's spend some time to understand angular application bootstrapping process. Refer the diagram as shown below:

So, all the files are loaded and is taken care by `webpack.config.js`. Once all files are loaded `main.js` is the first file from where the angular 2.x bootstrapping process starts.  

Step 1: ` Main.js` file is loaded and it bootstraps the module. In the diagram shown above the module name is 'AppModule', once it bootstraps the module  `app.module.ts`.

Step 2: `app.module.ts` file is loaded which bootstrap the component. In the diagram shown above 'AppComponent' is bootstrapped.

Step 3: Once the component is bootstrapped the selector is created in the component. In the diagram shown above 'app-root' selector is created which then looks for a tag name and render the template URL in place of the tag. 

In the diagram shown above 'app.component.html' template is rendered in `index.html` file in place of `<app-root>` tag.

This is how the bootstrapping works in the Angular 2.x app using angular-cli which uses web pack.

In upcoming blogs, we will dive deep into the concepts of the angular 2.x app and will see how its better than angular 1.x.