Angular 2 – Hello World Tutorial

Today i am going to write about Angular 2 in details. In this blog we will get to know, what are the advantage and disadvantage of Angular 2. In this blog we will do all the Configuration and Environmental setup and we also do a “hello world” example to get started with Angular 2.

 

You can download the Angular 2 – Hello World Project from below:

Angular 2 – Hello World

Assumptions:

  • You must have a basic knowledge of JavaScript.
  • You must have a good knowledge of HTML and CSS.
  • You must have a good knowledge of Text Editor(Notepad++).
  • Download node.js according to your system.

So lets get started with Angular 2:

Angular 2 is a open source JavaScript framework to build a web Application. This can be used for both Mobile and Desktop web applications.

Angular 2 make it very easy to create a complicated front-end for an web application. You can update the large data sets with minimum memory provided.

Advantage:

  • Angular 2 uses Typescript as a primary language for developing application using Angular 2. It has great support of ECMAScript 6 standard, which helps to resolve complex application design and maintain them.
    • Typescript is the super class of JavaScript. It has the class and Module support.
    • ECMAScript is widely used general purpose programming languages.
    • It is best known as the language embedded in web browsers but has also been widely adopted for server and embedded applications.
  • Angular 2 is fully UI responsive.
  • It uses dependency injection to maintain applications to avoid long code.
  • Angular 2 can be used for both Mobile and Desktop web applications.

Disadvantage:

  • Angular 2 is not very easy. It takes a bit of time to understand.
  • As its new there is not much content about Angular 2.

I hope till now you got a bit familiar with Angular 2. Now to clear more about Angular 2, we will do a “Hello World” example:

  • Now open you command prompt(Open the Run(Win+R) window and type cmd).
  • Now go to the location where you want to create the Angular Demo folder(for me the location is  d:\Abhinav Data\Hackpundit Demo.
  •  Now create the a folder using below command:
Angular 2

Angular 2 – Create New Folder

 

  • Now create tsconfig.json file in your project folder and open it in any text editor(I use Notepad ++). This file is a Typescript compiler configuration file. It guides the compiler to generate JavaScript files. Below i have shared the content of the file.

 

  • Now create the typings.json file in your project folder and open it in text editor.
  • In this file we add the famous JavaScript libraries, so that we can use their features in our project.
  • We add dependencies of those JavaScript libraries in typings.json file, So that it get recognized by the compiler.

Below i have shared the content of the file:

 

  • Now create the package.json file in your project folder and open it in text editor.
  • package.json file contains all the project dependencies.
  • Using reference of these packages in dependency section allows you to use module bundler like webpack, browserify etc.
  • Installing these packages again on lets say another machine requires only package.json and dependency section in it.

Below i have shared the content of the file:

 

  • Now create the systemjs.config.js file in your project folder and open it in text editor.
  • It helps you to configure SystemJS to load modules compiled using the Typescript compiler.
  • For anonymous modules, It allows to map the name of modules to JS files that actually contains the module JavaScript code.

Below i have shared the content of the file:

 

  • Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages. These packages are maintained and installed with the Node Package Manager(npm).
  • To install packages run the below command.
Angular 2 - npm install

npm install

  • It will take some time to install all the packages. If the command successfully executed you can see two new folder in your project Structure. I have attach the screenshot below:
npm install - Angular 2

Folder and Files after ‘npm install’ command

 

  • Now create a folder inside your project folder and give name as app.
  • Now create a file inside app folder and give name as app.component.ts . This is our root component.
  • Components: Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen.

Below is the content of app.component.ts

 

  • Now create a file inside app folder and give name as app.module.ts .
  • Defines AppModule, the root module that tells Angular how to assemble the application.

Below is the content of app.module.ts .

 

  • Now create the main.ts file in your app folder and open it in text editor.
  • The main.ts file tells Angular to load the component.
  • To launch the application, we need to import both Angular browser bootstrap function and root component of the application.
  • After importing, the bootstrap is called by passing the root component type i.e. AppComponent.

Below i have shared the content of the file:

Below i have shared the file structure for App folder:

Angular 2

App folder strucure

 

Now create the index.html file in your project folder and open it in text editor. Below i have shared the content of the file:

 

Now we are done with the folder structure and all the files that are needed for the configuration and environment setup for Angular 2 hello world.

Now we will start the server

npm start - Angular 2

npm start commnad

 

After that it will take some time to compile and execute. Once the compilation and execution is done without error you can see the result in your default browser.

Hello world - Angular 2

Output

 

Congratulations! If you reach this point means you have followed all the steps correctly and your  Angular 2 – Hello World running fine.

If I missed any point or you have any doubt regarding this blog just let me know in the comment section so that i can improve and solve your doubts. If you like my article please like our Facebook page and also follow us on Twitter so that you get regular updates. For regular updates you can also subscribe to www.hackpundit.com with your email.

Please also share on Facebook and Twitter to help other android developers. Thank You..!