Home > DeveloperSection > Forums > Use AngularJS Without $scope In Mvc
Ankit Singh

Total Post:341

Posted on    January-26-2016 10:16 PM

 ASP.NET MVC Angular JS  Mvc 

 1 Reply(s)
 319  View(s)
Rate this:
I want to use AngularJS Without $scope in mvc .please help me how will do this.

aditya kumar Patel

Total Post:250

Posted on    January-27-2016 3:17 AM

We will discuss about one of the main feature of AngularJS. AngularJS community wanted to remove the $scope objects completely. So before going further, let us discuss how we can use AngularJS without $scope objects.

<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
        var angApp = angular.module('angApp', []);
        angApp.controller('Controller', ['$http', function ($http) {
            var self = this;
            self.value1 = 10;
            self.value2 = 10;
            self.btnClick = function () {
                self.value3 = self.value1 * self.value2;
<body data-ng-app="angApp" data-ng-controller="Controller as model">
        <input id="value1" type="text" ng-model="model.value1" />
        <input id="value2" type="text" ng-model="model.value2" />
        <input id="value3" type="text" ng-model="model.value3" />
    <input type="button" value="Calculate" data-ng-click="model.btnClick();" />

Since, in AngularJS file, we didn't used $scope objects, that is why we use controller objects as model objects which directly initialize the controller. Because, like controller command angular already have controller as command. Actually in the above code, we defined the name of the controller instance as model. So any object or method within that controller can be accessed by the model keyword same as object oriented programming. This feature is already available in AngularJS from Angular 1.15. Here are the benefits or work task performance by the conventional $scope objects: 

  1. It communicate between the controller and view.

  2. It sends or receives data between the controller and view.

  3. Pass actions to the view from the controller.

  4. When the $scope object is modified, view automatically changes. Also when user make changes in the View, $scope objects automatically changes.

We define controller as name model. We can assign any name. When page is rendered, AngularJS create the $scope objects internally and assign the attribute and methods of variable so that it acts like $scope.

Modified On Jan-27-2016 04:45:44 AM

Don't want to miss updates? Please click the below button!

Follow MindStick