Learn to Build an App from Scratch Using Angular 2 Program

1
9792
angular-2-program

angular-2-program
In this article, we are going to set up the Angular 2 development environment and run our first Angular 2 Application.

The following is the prerequisite in order for the program to work on the Angular 2 framework.

  • Installation of the Node.js: Node.js installer for Windows or Macintosh can be downloaded from the following link.

https://nodejs.org/en/download/

Once the windows installer is downloaded, then do the following steps.

  1. Double Click on the installer (node-v4.4.7-x64.msi), you will notice the following dialogue box.
    install-nodejs
  2. Click on the next button, installer will display the following dialogue box asking you to accept the End-user License Agreement. Check the checkbox at the bottom and click on the Next button.
    end-user-license
  3. You will find the following dialogue box, asking you choose the destination folder to install the Node.js files. Choose the default destination folder path and click on the Next button as shown below.
    install-the-node-js-files
  4. You will notice this dialogue box that will ask you to select the custom setup. Keep the default settings and click on the Next button.
    custom-setup
  5. You will then be prompted with this dialogue box, click on the install button to initiate the installation of the Node.js.
    installation-of-the-node-js
  6. Once the installation is completed successfullyclick on the Finish button to complete the installation of Node.js on your machine.
    complete-nodejs-setup
    Once installation of Node.js is completed, then we will create the following required package files in order to configure the project.

Creation of the project folders: Create the following folders on your C drive (angular2-tutorials / angular2-first-program). Inside this folder add the following four files as shown below.

  1. File package.json : It has the list of all packages that are required to kick Start the app. It defines the handful of useful scripts as shown below.

2. File tsconfig.json: It has the Typescript compiler configuration. The following are the contents of the file.

3. File typings.json: It identifies the Typescript definition files. The following are the contents of the file.

4. File systemjs.config.js: It is the SystemJS configuration file. The following are the contents of the file.

At this, we are all set to install angular2 files and packages after executing the following command on the command line.

npm-install
It takes a moment to complete the installation of the angular2 framework setup.

Creation of the first Angular 2 App root components: The following are the files and the folder structure for the first Angular 2 App root components.

1. Create a folder app and inside this folder place the following three Typescript files as shown below.

  • File main.ts: It is a Typescript file with the following content. It should be created under the app folder.

  • File Component.ts: It is a Typescript file with the following content. It should be created under the app folder.

  • File Module.ts: It is a Typescript file with the following content. It should be created under the app folder.

2. Create a folder ‘assets’ under the folder angular2- angular2-first-program. Place the style.css file inside this folder. The following are the contents of this file.

3. Create an index.html file inside the folder angular2- angular2-first-program which has the following content.

Once we have the above structure of the files and packages, we can build our first Angular 2 after opening the command line and execute the following command.

angular2-start

Output
After executing the above command, the Typescript (extension as .ts) files will automatically be compiled to javascript (extension as .js) files and the app will automatically start on the default web browser as shown below.
output

Source code to build first appusing Angular 2 program

Conclusion
In this article, we have learnt about the setting up of the angular 2 development environment and built our first Angular 2 app.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here