How to build a web application with Angular 2?

Hello friend, in this tutorial we will see “How to build a web application with Angular 2”. Before going on Angular 2 we are discussing on Angular 1. The Angular 1 was released in October 2010 and it is a JavaScript framework. An AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. Angular 2 does not only upgrade the angular 1, it is completely rewritten and it has lots of improvement better than angular1. An Angular 2 released in September 2016 and it has the more features. Let’s see the few of improvements in Angular 2.

Angular 2 Improvements

• Perfomance : Angular 2 is faster compared to Angular 1.
• Mobile support : Web application work across mobile and desktop devices.
• Component base : In Angular 2, application is develop in component based and components are the building blocks of an angularjs application.
• TypeScript : Typescript is an open-source programming language developed and maintained by Microsoft.

For creating a web application with Angular 2 we must use the Node.Js and npm. A node.js is an open source environment and it’s free of cost, its run on various platforms and uses javascript on the server. Npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. you can download the packages from Npm site. We should to download the Node.js version of 4.6.x or greater. When you open the site for download, there are two options are available with 32 bits or 64 bits Operating system. You can download the node.js in which operating system you work.

After downloading the node.js, install the node.js by installing instruction. For developing the site Npm version 3.x.x or greater. If you don’t know which version of Node.js and Npm installed then open the command prompt and type the node –v command for checking the node.js version and npm –v command for checking the Npm version. If node.js and npm is not installed in your device and you fire the command then you get the message of ‘node’ is not recognized as an internal or external command.

We will create the angular 2 application using Visual Studio editor. For creating angular 2 application visual studio 2015 update is better and if you don’t know which visual studio version installed then open visual studio and open the Help menu and select About Microsoft Visual Studio and you can see their display which version you have. Now we configure the environment settings for node and Npm so open the visual studio and click on Tools menu and select Options and then expand the Projects and Solutions and select the External Web Tools and select the PATH option and click on the Up arrow and then finally click on OK button.

Now we need to download the TypeScript for the Visual Studio. For Developing the angular applications TypeScript Version 2.2.0 or greater is required. To check the TypeScript Version click on Help menu in Visual Studio and select the About Microsoft Visual Studio. To get the latest version of TypeScript for Visual Studio 2015 click here TypeScript. After download, the TypeScript Right click on the executable file and select the Run as Administrator and follow the installing instruction.

We have set up the all the requirements, let’s create a new empty project in visual studio. Now we download the “Quick Start Files” from an angular website for creating our angular 2 application. Because we will use some files from “Quick Start Files” project like a package.json file. After download, the files extract the downloaded files. There we need some files and folders copy in our empty project that’s why we need copy src folder, bs-config.json, package.json and tslint.json file and paste it in our project so open our project in File Explorer and paste the copied files. For showing all the copied files in a project, select the project and click on Show All files option in solution explorer. Select the all copied files then right click and select the Include in project option. All copied files are included in the project.

The next step is to restore the required packages in a project, to do this Right click package.json file select the Restore packages. It restores the all the required packages if you want to see which packages are restoring then open the Output window from View Menu. When required packages are restored then finally printed the message of “npm command completed with exit code 0”. node_modules folder does not exist before restoring the packages. After successfully restored the packages select the project and click on the Show all files option. We should not include this node_modules folder in the project.

The final thing that we need to do is run the project, for the run the project open the command prompt so press the Ctrl + r to open run window and type the cmd and press Ok. In the command prompt navigate to project root directory and type the “npm start” command. First going to launch typescript compiler and then compile application code and after few second launch light server which is going launch Browser. In the Browser, you can see the output of “Hello Angular”. this message is print from an app.component.ts file so open that file and change your message and save the changes and then few second the changes are available on Browser without press F5 or Ctrl + F5. If you want to create a new page then create your page and component in the component folder.