In Focus

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.
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
  1. var app;  
  2. (function () {  
  3. 'use strict'//Defines that JavaScript code should be executed in "strict mode"  
  4. app = angular.module('myapp', []);  
  5. })();  
Create Controller named “DashboardCtrl” within Controller folder
  1. app.controller('dashboardCtrl', ['$scope',  
  2. function ($scope) {  
  3. $scope.Message = 'Md.Shamim Uddin';  
  4. }]);  
Create DashboardController class within mvc Controller folder
  1. public class DashboardController : Controller  
  2. {  
  3. //  
  4. // GET: /Dashboard/  
  5. public ActionResult Index()  
  6. {  
  7. return View();  
  8. }  
  9. }  
Create view
  1. <div ng-app="myapp">  
  2. <div ng-controller="dashboardCtrl">  
  3. {{Message}}  
  4. </div>  
  5. </div>  
  6. <script src="~/Scripts/angular.min.js"></script>  
  7. <script src="~/ScriptsNg/Module/app.js"></script>  
  8. <script src="~/ScriptsNg/Controller/DashboardCtrl.js"></script>  
Hope this will help.