Angular 1 implements a variation of the classic MVC, which is known by the name Model View ViewModel (MVVM). This pattern describes different roles and communication between the parts:
The following diagram describes the relationships between those parts with the terminology of Angular 1:
The ViewModel in Angular 1 is an object named: '$scope
' that is constructed by an Angular controller. We do not always interact with this object directly. It's binding to the view is two-way (In Angular, we refer to the view as a 'Template'). The ViewModel can read and alter the data on the model and update itself when necessary. The view will reflect those changes immediately. Angular doesn't include any predefined model type. Instead, we code our models as plain JavaScript and register it as an Angular service. The following code snippet shows the structure of a custom model service Model.js
:
class Product { constructor(){ this.color = "red"; } }
The following code snippet shows the structure of ViewModel.js
:
class ProductController { constructor(Product) { this.product = Product } }
The following code snippet shows the structure of View.html
:
<p>{{ product.color }}</p>