Why AngularJs MVC is Different

In the Asp.net MVC framework and in Sencha each layer is clearly defined.  In AngularJs the model is 'compiled' for lack of a better term.

In AngularJs the model definition can occur in many different places, this is why it is different.  Adding a new model item to a form is simple.  In an html form with an html input node, simply add an html attribute of ng-model="person.name".  When the page is compiled, AngularJs crawls the DOM, and automatically binds all of the ng-model directives to the $scope object.  $scope is where we find the M in MVC.  Scope also contains other things.

Reading from the model is also easy, simply wrap it in curly braces in the html.
<div>{{person.name}}</div>

When I was first learning AngularJS the examples confused me.  I often thought  "why I would want to see what the user was typing somewhere other than in the input box?"  You don't!  In your form you don't want to have {{person.name}} display on the input form.  It is redundant.  You will want {{person.name}} inside of ng-repeat for an index page that lists all the records on the page.


Generating the model from a form is not the only way.  Usually the model is populated from a service located in a controller.  Note, the $scope variable is passed in via the dependency injection framework in AngularJs.  $scope is a canned object that is injected into your method.  After a while your controllers start to have many things passed in.  This is just the simplest example.

var MyCtrl = function($scope){
  id = '';
 $scope.person = MySvc.getById(id);
}