Setup and implement simple angular.js program in MVC

Here I'm writing simple steps for how to  setup angular.js in ASP.NET MVC application and implement small program using angular.js.

1. Create a MVC web application using VisualStudio.

2. Add following Angular js references to _layout page(Master page) as per showing below

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-touch.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-resource.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-mocks.js"></script>

3. Create a folder under Scripts folder in application, here i created folder name as 'Angularjs', then create  app.js, controller.js, rest-services.js files and partials folder for implement html pages.

controller.js:

Here we created two controller in 'myApp.Controllers' one is MainCtrl controller, SimpleCtrl.
  MainCtrl use for root controller, this controller is call to every new page request (change URL).
SimpleCtrl for implement example simple page request


'use strict';
angular.module('myApp.controllers', [])
    .controller('MainCtrl', ['$scope', '$rootScope', '$window', '$location', function ($scope, $rootScope, $window, $location) {       
        $rootScope.back = function () {
            $scope.slide = 'slide-right';
            $window.history.back();
        }
        $rootScope.go = function (path) {
            $scope.slide = 'slide-left';
            $location.url(path);
        }
    }])
.controller('SimpleCtrl', ['$scope', '$rootScope', '$routeParams', '$cacheFactory', function ($scope, $rootScope, $routeParams, cacheFactory) {
    
    $scope.clkEnter = function () {
        alert("Entered name is " + $scope.name);
    }

}])

app.js:

 
    Here we create a sample route under route provider, this means when enter '/sample' url call SimpleCtrl controller and  /partials/simple.html page.

'use strict';

var app = angular.module('myApp', [
   'ngTouch',
    'ngRoute',
    'ngAnimate',
    'myApp.controllers',
    'myApp.restServices'
]).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/sample', { templateUrl: 'partials/simple.html', controller: 'SimpleCtrl' });
   
    $routeProvider.otherwise({ redirectTo: '/sample' });
}]);

Create partials folder then implement simple.html page as per shown below

simple.html

<div id="layout">

    <h1>This is simple Angular.js program with MVC </h1>
    <input type="text" ng-model="name" />
    <input type="button" value="Enter" ng-click="clkEnter();" />
</div>

Then add app.js,controllers.js references to _layout page look like below:

   <script src="/Scripts/AngularJs/app.js"></script>
    <script src="/Scripts/AngularJs/controllers.js"></script>
    <script src="/Scripts/AngularJs/rest-services.js?"></script>

Then run the application out put will be show like it

Here we used ng-model and ng-click angular pre-directive. ng-model use for bind the value and ng-click is use for call 'clkEnter' method when click on Enter button.

 If you have any question in the post drop your comments.

Download application through this link

Next demo we will discuss for how to consume data from backend using angular.js and how to implement grid through retrieved data.

Thanks...