In this article, I will show you how to setup AngularJs in ASP.NET MVC 5 Application. If you want to know about AngularJs overview then click here. I have already explained about ‘What is AngularJs’, ‘Why we use AngularJS’, and ‘What are the Core features of AngularJs’ in the previous article.
Set up AngularJs in ASP.NET MVC 5 Application
Now I will explain how to set up AngularJs in ASP.NET MVC 5 Application in step by step. So, follow the following steps.
Step # 1 – Create new Project.
Go to File => New => Project. It will show new Project popup.
Select ASP.NET Web application(from middle pane) => Enter the name of Application (E.g. AngularJsDemoSetup) => click Ok button. It will show a new ASP.NET Project popup.
Select MVC option => Check the checkbox under the “Add folder and core references for:” => then click Ok button.
Step # 2 – Add AngularJs library to the project.
Click here to get AngularJs library. You will see there two options
- View on GitHub: Click on this button to go to GitHub and get all the latest scripts.
- Download AngularJs 1: Click on this button to download AngularJs library.
Now go to solution explorer => Right click on the Scripts folder => Add => Existing Item => Select .Js files (from where you have downloaded AngularJs library ) => Add.
Note:- You can also add AngularJs library from NuGet Package manager console. Here I have added AngularJs library from NuGet Package Manger.
Step # 3 – Add Angular bundle to the project.
Go to solution explorer => click on App_Start folder => Double click on BundleConfig.cs file => Add the below code to this BundleConfig.cs file.
Step # 4 – Add New js file.
Now write the below code to MyApp.js file.
angular.module: It defines an application. It is the container of the different part of the application. Such as Controller, Filters, Services, Directives and etc.
$Scope: Scope is the binding part between the view and the AngularJs controller. It uses angular’s two-way binding to bind the data between View and controller. It is available for both View and the controller.
Step # 5 – Modify with _Layout.cshtml page.
Now we will modify _Layout.cshtml page to bind with AngularJS. Modify the _Layout.cshtml page with the below code.
ng-App: Here ng-app means the <Body> element is the owner of AngularJs application.
Step # 6 – Add controller
Now add a Controller to your project.
Go to solution explorer => right click on the Controller folder => Add => Controller. It will show a new “Add Scaffold” popup.
Select MVC 5 Controller – Empty => then click Add button.
Enter the name of controller (E.g. StudentController) => click Ok.
Step # 7 – Add view for StudentController Index action method.
Now right click on the Index action method => Add View … => Enter View name in the name field (Same as Action Method) => Click Add button.
Add the following code to Index View file.
Now run your application with this URL “http://localhost:55513/student/index” and you will get the following output page.
Congratulation you have successfully created your first AngularJs Application with ASP.NET MVC 5 Framework. I hope it will be helpful to you. Please like and share if you like.