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.

OR

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.

Go to solution explorer => Right click on the Scripts => Add => New Item => select JavaScript File (Under Web folder) => enter the name (E.g. MyApp.js) => click Add button. It will add new MyApp.js file under the Scripts folder.

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.

angular.Controller: It controls the data of AngularJs application. It is the business logic behind the application. It contains all the methods and variable that we use in our view. Controllers are the regular javaScript objects.

$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.

Summary

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.

[download id=”1026″]

Share this: Facebook

LinkedIn

Reddit

Google

Pinterest

Twitter

Tumblr

Email

More

Telegram

WhatsApp



Skype

Pocket



Print

