CODEWITHSUNDEEP
angularjsviewmodelscope
Justin Tyme
Justin Tyme

Reputation: 163

How does the scope, view, controller and data interact in Angular?

I cannot find a good simple answer on this. So, I am hoping a expert on here can explain it in Layman's terms. As our good friend Albert Einstein said "If you can't explain it to a six year old, you don't understand it yourself.”

As I understand it from what I read....

Controller = Main Duty is to create $scope
View = Template + data
Model = data
Data = Database Data or API Data or User Input(View Data)

The controller builds an object called $scope. It add properties and Methods(Functions) to the $scope object. It can call functions getData() to grab data from DB or API and defines and populates $scope properties and methods. It also can attach functions to $scope that can be used to sync DB to the $scope it creates.

After $scope is created, the magic of two way data binding takes affect. If the user enter name: in text box... it autoMagically syncs with $scope. But, how does this connect to the DB? Does the DB autoMagically get updated too?

When we are talking about the MODEL(Data)... they say its NOT the $scope, but the $scope exposes the MODEL. The MODEL(Data) can be the DB or API or User Input.... Where is the MODEL? Where does it live? The DB or is the MODEL the combination of DB, API & USER Input?

If someone can please give a "six year old simple" overarching diagram or description of how all these tie together I would really appreciate it.

Upvotes: 0

Views: 388

Answers (1)

Michael Kang
Michael Kang

Reputation: 52847

In a Nutshell:

  1. View -> HTML -> Render View through directives (teach HTML new tricks). Interacts with the View Model and the Controller directly.
  2. Service -> Get Data, Persist Data, Call Web Services, Interact with backend
  3. View Model -> Scope + Scope Methods + Scope Variables. Changes to the View Model triggers changes to the View (through $watch handlers)
  4. Controller -> Interacts with the Service and updates the View Model

The HTML view contains directives which are just classes, elements, attributes, and comments. During the compile and link phases, the directives are 'rendered' meaning they are transformed, and given behavior through bindings.

The controller initializes the view model (which in-turn initializes the view). This is true if the controller is coming from a directive, or from ng-controller which is declared on an HTML element.

Services are called from the controller (never from the view directly), to retrieve and persist data. Services can be thought of as the Model (not to be confused with the View Model). After the controller interacts with the Model, the controller then updates the View Model by updating scope variables.

When scope variables are updated, they trigger watch handlers which in-turn update the View.

Hope that helps

Upvotes: 1

Related Questions