How to setup AngularJs in MVC5 Application

In this Article we will learn how to setup Angular JS in MVC5 Application.

Let’s work

You can always download the source code here.

dicon Download Source

Start virtual studio, Click New Project

AFirstPic

This  window will appear on screen

ASecondPic

New ASP.NET Project window will appear on screen

AThirdPic

Solution creation is done with load all need file

AfourthPic

Right button click on solution, and click Manage NuGet Packages For Solution

1NuGet

Manage NuGet Packeges Window appear on screen.

2

Loading Angular Js Files

3

Click Scripts Folder, and we see angular JS Files

4

Ok let ‘s go for Create simple application with angular JS

Create ScriptsNg folder in solution, we will create 4 folder within  ScriptsNg

  1. Controller
  2. Directive
  3. Module
  4. Service

Why use those folder:

Controller: Angular JS Controller Control Data between model and view in application, keep all Controller Script files within Controller folder.

Directive: Angular JS Directive Extend html with new attribute, keep all Directive files within Directive Folder.

Module: Modules are used to separate logics say services, controllers, application etc. and keep the code clean, keep all module files in module folder.

Service: service is function, keep all customize service files within Service Folder  

Create Script file named “app.js” within module folder

Create Controller named “DashboardCtrl” within Controller folder

Create DashboardController class within mvc Conteroller folder

Create view

Output:

6

Hope this will help

 

One thought on “How to setup AngularJs in MVC5 Application

Leave a Reply

Your email address will not be published. Required fields are marked *