Step By Step Angular 2 Implementation In Visual Studio Update 3

When you save this file, Visual Studio automatically tries to fetch the important files through npm command, as per the configuration in package.json, which will be noticed by you at message bar at the bottom. After a few minutes, it will say this message - "Installing package Complete".

Step 4

Add a TypeScript JSON configuration file => Right click on Solution => Add New Item => TypeScript JSON Configuration File, i..e tsconfig.json file and add the code given below in it and save it.

Step 5

Now, to go to project location in File Explorer and delete node_module folder.

Step 6

In Visual Studio, right click on package.json file and hit Restore Packages.

In step 5, we delete node_module folder because at the time of creation of this folder; they don't have files regarding tsconfig.json file and in step 6 we recreate folder node_module which restore all files as per package.json configuration along with files as per tsconfig.json. Now we are ready to take our first step to implement angular application , till now we just configure project for Angular 2.

Step 7

Add JavaScript file in under project with name systemjs.config.js and add the code given below in it.

It is also a configuration file. Please notice the comments in the code and two important things are given below.

Step 8

As we configure the last step, add the folder with the name app and add main.ts i.e. TypeScript file in it.

TypeScript is a strict superset of JavaScript i.e. the code will convert into JavaScript. Angular 2 comes with TypeScript compulsorily. This means that our main.ts file will be converted into main.js file, as we mention in systemjs.config.js file.

Step 9

Add the code given below into main.ts file.

Please notice the code that here we are creating our module and name it as "AppModule".

platformBrowserDynamic - is nothing but a class export from @angular/platform-browser-dynamic file

we bootstrap our module into Angular 2 by passing Module to bootstrapModule function at line number 3.

Step 10

In the last step, we just defined our module, so create/declare our module in another file named as app.module.ts in an app folder and add the code given below in it.

In this file, we are declaring our AppModule with syntactical manner of an Angular 2. Please notice the line number 4. We are exposing our AppModule, using AppComponent, which is also a class, which is nothing but a declaration of UI design into it.

Step 11

As mentioned in step 10, we have to create/declare AppComponent. Thus, add TypeScript file named as app.component.ts and add the code given below into it.

In this file, when the my-app attribute in HTML is found, then render st.html file there and st.html's expecting model, so we are passing that model from AppComponent class. Here, we tried to pass Customer Model with the object name customerobj. (For two way binding)

Step 12

Add Customer Model in new TypeScript file with the name Customer.tsin app folder and add the code given below into it.

Add ts.html file in an app folder, as we mentioned add the code given below into it.

Step 13

Add one HTML page, make it as startup page and add the code given below into it.

This is our first landing page. We need to just declare the required file and starting point in Head section andd add <my-aap> tag into body section.

Save and run the Application.

This article is for the beginner, who wants to learn Angular 2 and get a clear idea about how it works.