Use AngularJS Without $scope In Mvc
Ask by Anonymous User
Updated 27 Jan 2016
We will discuss about one of the main features 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> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/angular.min.js"></script> <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; } }]); </script> </head> <body data-ng-app="angApp" data-ng-controller="Controller as model"> <div> Number#1: <input id="value1" type="text" ng-model="model.value1" /> Number#2: <input id="value2" type="text" ng-model="model.value2" /> Number#3: <input id="value3" type="text" ng-model="model.value3" /> </br> <input type="button" value="Calculate" data-ng-click="model.btnClick();" /> </div> </body> </html>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:
It communicate between the controller and view.
It sends or receives data between the controller and view.
Pass actions to the view from the controller.
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.