Angular Models and Data Binding

The MVC pattern creates, in effect, a miniature universe for the application, populated with three distinct kinds of objects. It also specifies roles and responsibilities for all three types of objects and specifies the way they’re supposed to interact with each other. To make things more concrete (that is, to keep your head from exploding), imagine a big, beautiful, 60-inch, flat-screen TV. Here’s the gist:

• Model objects: These objects together comprise the content “engine” of your app. They contain the app’s data and logic — making your app more than just a pretty face.

  You can think of the model (which may be one object or several that interact) as a particular television program, one that, quite frankly, doesn’t give a hoot about what TV set it’s shown on.

  In fact, the model shouldn’t give a hoot. Even though it owns its data, it should have no connection to the user interface and should be blissfully ignorant about what’s done with its data.

• View objects: These objects display things on the screen and respond to user actions. Pretty much anything you can see is a kind of view object — the window and all the controls, for example.

  Your views know how to display information they receive from the model object and how to get any input from the user the model may need. But the view itself should know nothing about the model. It may handle a request to display some events, but it doesn’t bother itself with what that request means.

  You can think of the view as a television screen that doesn’t care about what program it’s showing or what channel you just selected.

  The UIKit framework provides many different kinds of views, as you find out in the next section.

  If the view knows nothing about the model, and the model knows nothing about the view, how do you get data and other notifications to pass from one to the other? To get that conversation started (Model: “I’ve just updated my data.” View: “Hey, give me something to display,” for example), you need the third element in the MVC triumvirate, the controller.

• Controller objects: These objects connect the application’s view objects to its model objects. They supply the view objects with what they need to display (getting it from the model) and also provide the model with user input from the view.

  You can think of the controller as the circuitry that pulls the show off of the cable and then sends it to the screen or requests a particular pay-per-view show.

The basic application architecture looks like Figure 4-8.

AngularJS uses the MVC architecture.

The Scope function is where the data is set.

See the following 2 videos