Part 1 - How to setup AngularJS in MVC4 application

Sunday, December 07, 2014 Sourav Mondal AngularJS | MVC

Introduction

In this post, I would like to explain Part 1 - How to setup AngularJS in MVC4 application.
This is our First Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. In this part (Part 1) I am going to explain how to setup AngularJS in MVC4 application.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add AngularJS library to the project.

You can download AngularJS library files form here.
Go to Solution Explorer > Right Click on Scripts folder > Add > Existing item > Select js files required for AngularJS > Add.

Step-3: Add a bundle for render AngularJS library files in the view.

Go to Solution Explorer > BundleConfig.cs from App_Start folder > add a bundle with writing the below code.

            bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                    "~/Scripts/angular.js",
                    "~/Scripts/angular-route.js"));

Step-4: Modify _Layout.cshtml page for support AngularJS.

_Layout.cshtml

            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width" />
                <title>@ViewBag.Title</title>
                @Styles.Render("~/Content/css")
                @Scripts.Render("~/bundles/modernizr")
            </head>
                @* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner 
                of AngularJS application*@
            <body ng-app="MyApp">
                @RenderBody()
 
                @Scripts.Render("~/bundles/jquery")
                @* Add Angular Library Here *@
                @Scripts.Render("~/bundles/angular")
                <script src="~/Scripts/MyApp.js"></script>
                @RenderSection("scripts", required: false)
            </body>
            </html>

Here you can see I have used "ng-app" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner of AngularJS application.

Step-5: Add a new js File for add angularjs module, controller etc.

Go to Solution Explorer > Right Click on Script folder > Add > Select Javascript file > Enter name > Add.

Write following code in this file.

            (function () {
                //Create a Module 
                var app = angular.module('MyApp', ['ngRoute']);  // Will use ['ng-Route'] when we will implement routing
                //Create a Controller
                app.controller('HomeController', function ($scope) {  // here $scope is used for share data between view and controller
                    $scope.Message = "Yahoooo! we have successfully done our first part.";
                });
            })();

Here I have created an angular module and a controller with $scope object.

angular.module : An Angular module is simply a collection of controllers, services, filters, directives, etc. that are initialized when the application is booted. Moreover its same like Main function of other langulages like C, C++ etc which is the entry point of the application.

angular.Controller : Its contain business login behind the application same like MVC controller. Controllers are the entry-point into our front-end business logic, they contain all the methods and veriable that our view used. Controllers also allow us to initialize the scope, which will house both the data and the functions that we’ll want to run in the view.

$scope : Scope is nothing but an object that Glues the View with Controller. Scope uses Angular’s two-way data binding to bind model data to view. When AngularJS initialize this controller, it automatically creates and injects the $scope object to this function using dependency injection.

Step-6: Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-7: Add new action into your controller for Get View.

Here I have added "Index" Action into "Home" Controller. Please write this following code

            using System;
            using System.Collections.Generic;
            using System.Linq;
            using System.Web;
            using System.Web.Mvc;
 
            namespace MVCWithAngularJs.Controllers
            {
                public class HomeController : Controller
                {
                    //
                    // GET: /Home/        
                    public ActionResult Index()
                    {
                        return View();
                    }
 
                }
            }

Step-8: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
Complete View

            @{
                ViewBag.Title = "Index";
            }
 
            <h2>Index</h2>
            <div ng-controller="HomeController">
                {{Message}}
            </div>

The ng-controller directive defines which controller will be in charge of your view.
Here you can see I have specified the directive ng-controller="HomeController". This specifies what is the scope of the $scope object of AngularJS application.

ng-controller : The ng-controller directive attaches a controller class to the view. We can attach multiple controller to a single view. We can attach a controller object to a DOM element using the ng-controller directive on an object, like so:

 
            <div ng-controller="HomeController">
                {{Message}}
            </div>

When a controller attached its create a new $scope object for the DOM element.

Step-9: Run Application.

Download Live Demo

How to setup AngularJS in MVC4 application