A MVVM (Model View ViewModel) workflow approach for AngularJS to guide developers into creating robust and reusable Web Components and free them from the ng-controller and $scope pitfalls.
Create a web component
(function () {
'use strict';
angular.module('myModule')
.component('myComponent', {
model: 'MyComponentModel',
view: 'components/my-component/my-component.html',
viewModel: viewModel,
bindToModel: {
data: '=?'
}
}
);
/**
* View Model
* @param {Object} element The DOM element linked to this component.
* @param {Object} attrs The attributes set on the DOM element.
* @param {Object} model The model of the component.
*/
function viewModel(element, attrs, model) {
// Presentation Logic (event handlers, dom manipulation, etc)
}
})();
Create a model
(function () {
'use strict';
angular.module('myModule')
.model('MyComponentModel', MyComponentModel);
// The model should not contain any presentation logic.
// You should see the model as an API that can be used without an user interface.
function MyComponentModel() {
// Determine what is public to the view.
angular.extend(this, {
data: data,
performSomeAction: performSomeAction
});
var data: [];
function performSomeAction(){
// ...
}
function _validateContext(){
// ...
}
}
})();
Create a decorator
(function () {
'use strict';
angular.module('myModule')
.decorator('myDecorator', {
// For decorators the priority should always be lower than the priority of the component.
priority: -1,
viewModel: viewModel,
model: 'MyDecoratorModel'
}
);
/**
* View Model
* @param {Object} element The DOM element linked to this decorator.
* @param {Object} attrs The attributes set on the DOM element.
* @param {Object} model The model of the decorator.
* @param {Object} hostModel The model of the host component.
*/
function viewModel(element, attrs, model, hostModel) {
// Presentation Logic (event handlers, dom manipulation, etc)
}
})();
Use a web component
<my-component data="{{specificData}}"></my-component>
Use a web component with decorator
<my-component my-decorator data="{{specificData}}"></my-component>