Angular integration with MVC

Nowadays it’s a hot topic that how to use Angular with MVC architecture. Today my topic is how to integrate Angular with MVC. So for  integration of MVC  with AngularJS , you need the following tools.

  1. Install Node JS (Latest Version)
  2. TypeScript
  3. Visual Studio (2015 min) 2017 will be the best.

After installing the above tools and technologies you need to run the following command on CMD

npm install -g @angular/cli

After that open the installed visual studio and Create a new project and give any name.

MVC with AngularJS
MVC with AngularJS

Now we need to create Angular Client for our project.  i.e

ng new ClientApp” in case ClientApp will be the project name (Client Side)

This command will take some time because it will download Node Modules depend upon your internet speed. After that, we have to move some files into the main folder i.e Node Modules.

Open the project folder “ClientApp” and cut the folder Node Module and go one step back and paste it.

Remember: Do not copy paste the folder always cut and paste the folder.

Now move the following files into root directory as well.

  • tslint
  • tsconfig
  • angular

and finally, move the “src” folder to root directory as well which is one step back from it.

All Done.

Finally, open visual studio once again and click on the icon “show all files” and select the following files and add into the project.

  1. tslint
  2. tsconfig
  3. angular

Remember: Do not include the “Node Module”  folder.

All done now execute the application.