How To Setup AngularJS In MVC Application

In this blog we will learn how to setup AngularJS in MVC Application.

In this blog we will learn how to setup AngularJS in MVC application.

 

Let’s work

 

You can always download the source code here.

 

Download Source

 

Start virtual studio, Click New Project

 

 

 

This window will appear on screen

 

 

 

New ASP.NET Project window will appear on screen

 

 

 

Solution creation is done with load all need file

 

 

 

Right button click on solution, and click Manage NuGet Packages for solution

 

 

 

Manage NuGet Packages window appear on screen.

 

 

 

Loading AngularJS files

 

 

 

Click Scripts folder, and we see angularJS files

 

 

Ok let ‘s go for create simple application with angularJS

 

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

var app;
(function () {
'use strict'; //Defines that JavaScript code should be executed in "strict mode"
app = angular.module('myapp', []);
})();

Create Controller named “DashboardCtrl” within Controller folder

app.controller('dashboardCtrl', ['$scope',
function ($scope) {
$scope.Message = 'Md.Shamim Uddin';
}]);

Create DashboardController class within mvc Controller folder

public class DashboardController : Controller
{
//
// GET: /Dashboard/
public ActionResult Index()
{
return View();
}
}

Create view

<div ng-app="myapp">
<div ng-controller="dashboardCtrl">
{{Message}}
</div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/ScriptsNg/Module/app.js"></script>
<script src="~/ScriptsNg/Controller/DashboardCtrl.js"></script>

Output

 

 

 

Hope this will help.