CODEWITHSUNDEEP
javascriptasp.netangularjsasp.net-mvc
Lost
Lost

Reputation: 13575

Why is concept of Model and Controller intermingled in Angular.JS?

I am very new to Angular world and I have mostly worked with .NET MVC architecture where there is a clear delineation between entities like Model and Controller.

It is as clear as following in my opinion:

They are two separate files and two separate types. There is no way someone can confuse between a asp.net view and asp.net Controller

However, in Angular world(which is apparently a MVC architecture), a controller looks like something described at following link:

https://scotch.io/tutorials/making-skinny-angularjs-controllers

To me, by .NET standards, this is a hybrid of Model and Controller because it not only carries data (like model) but also carries functions**(Just like Controller)**. Not only that, model is actually part of Controller.

My question is that if a model in Angular looks like the one described in the link above, what does a model look like by itself?

Upvotes: 2

Views: 97

Answers (3)

Michael Kang
Michael Kang

Reputation: 52847

There is a separation between the model ($scope) and the view (HTML).

Yes, there are methods on $scope that are called from the view, but these are essentially controller actions - they are executed from the controller function's closure.

 app.controller('ctrl', function($scope) {
       $scope.data = 'hello';
       $scope.onclick = function(arg) {
             $scope.data = 'hello world!';
        }
 });

Microsoft ASPNET MVC is strikingly similar to Angular MVC:

 MVC Controller = ngController
 ViewData/ViewBag = $scope
 Controller DI = Angular DI in controller function
 Razor View Engine = ngRepeat, ngShow, ngModel, etc
 RenderActions = Data-driven service-injected directives
 RenderPartials = Read-only directives (data retrieved by another controller)
 Click triggers controller action = ngClick triggers $scope handler in controller's function closure
 Model Data Binding = AngularJS Data Binding
 ModelState validation = ngModel validation
 HTTP handlers/modules = HTTP interceptors

It makes me wonder if ASPNET MVC inspired Angular...

Note: ViewData and $scope are similar, but of course, $scopes resolve $scope properties through $scope inheritance, but in ASPNET MVC, child ViewData do not inherit from parent VIewData. Hmm... Microsoft, that would be a useful feature:)

Upvotes: 3

Vivek
Vivek

Reputation: 13238

Model

In AngularJS, the term model refers to the data stored inside the scope to using be used inside view. It can be the hard-coded value/object or the response received on the service call stored inside scope.

enter image description here

The above image gives a clear picture of how model is used on on the view. AngularJS also supports 2-way data binding. i.e. updating view (which is bound to a specific model) also updates the model value.

Controller

The purpose of controllers is to expose variables and functionality to expressions and directives.

enter image description here

As shown above, a controller is associated with a scope and all the models defined inside scope can be accessed on the view associated with the respective controller. Controller can be used to define business logic and handling events etc.

Upvotes: 3

Renuka CE
Renuka CE

Reputation: 686

The scope is a very important component in Angular applications. The scope is the object that represents the "model" of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button. For mOre infor please Go throgh the link https://docs.angularjs.org/api/ng/directive/ngModel

Upvotes: 0

Related Questions