MVC and Data Binding in AngularJS

Model View Controller and Data Binding concepts are explained below. Also refer the example below.

Model View Controller (MVC)

View is what the user can see and interact with. It gets data from the Model. Controller changes the data in the model whenever the user tries to interact with the view i.e.; controller responds to the user data.

In AngularJS, view is the user interface (UI) which is the Document Object Model (DOM). DOM is a tree representation of the HTML page so that the structure can be modified in style and content. The data view gets from the model is from the properties of the object. The JavaScript files are the controllers.

Such type of segregation is useful to split the work of designing, integrating the app. Also it is easy to understand the code with ease and also helpful to maintain and test the application.

Data Binding

Binding the data between the model and the view is called Data Binding. The UI that are mapped to their respective JavaScript properties. The data thus obtained is synced automatically. Thus any changes made in the UI is reflected in the model and vice-versa.

Example

Below is a simple AngularJS example displaying the array contents in a table.

Table displaying array contents

Any changes made in the model is reflected on the view and vice-versa.