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>  
Output
 
 
 
Hope this will help.
Ebook Download
View all
Learn
View all