KO.Computed equivalent in Angular / Breeze Initializer KO.Computed equivalent in Angular / Breeze Initializer angularjs angularjs

KO.Computed equivalent in Angular / Breeze Initializer


You are correct to simply make it a function. If your entity as shown is added to the $scope, then you would access the property like so:

<span class="fullname">{{ user.fullName() }}</span>

Whenever Angular runs a $digest cycle, it will check for a change to the bound property. In this instance, it means it will call the fullName() function and check to see if the result has changed. If it has, anything that has a $watch attached to that item — including simple binding — will be notified of the change.

One caveat of this technique, however, is to make sure that the operations being performed within your function are relatively fast, and also have no side effects. Bound functions like this will be called many times throughout the application.

If you need to have a more complex function, it would be better to handle that within the controller, and update a property on the object manually when it changes.


I found the answer on the following website. If you don't do something similar, what you will find is that all functions are ran during the digest phase and are not triggered by the change of a dependent observable or property. The solution below allows you to only trigger the function when a value it uses is changed.

http://www.jomendez.com/2015/02/06/knockoutjs-computed-equivalent-angularjs/

Explains how to duplicate the subscribe and computed feature in knockoutjs

var myViewModel = {    personName: ko.observable('Bob')};myViewModel.personName.subscribe(function(oldValue) {    alert("The person's previous name is " + oldValue);}, null, "beforeChange");

This is what I found as result of my research (this is the AngularJs equivalent) Using the $scope.$watch method see the AngularJs life cycle https://docs.angularjs.org/guide/scope

$scope.myViewModel = {    personName: 'Bob'};$scope.$watch(‘myViewModel.personName’, function(newValue, oldValue){    //we are able to have both the old and the new value    alert("The person's previous name is " + oldValue);});//knockout computedvar isVendorLoading = ko.observable(),isCustomerLoading = ko.observable(),isProgramLoading = ko.observable(),isWaiting = ko.observable();var isDataLoading = ko.computed(function () {    return isVendorLoading() || isCustomerLoading() || isProgramLoading() || isPositionLoading() || isWaiting();     });

This is the AngularJs Equivalent for KnockoutJs computed:

$scope.isDataLoading = false;$scope.$watch(    function (scope) {        //those are the variables to watch        return { isVendorLoading: scope.isVendorLoading, isCustomerLoading: scope.isCustomerLoading, isProgramLoading: scope.isProgramLoading, isWaiting: scope.isWaiting };    },    function (obj, oldObj) {         $timeout(function () {              //$timeout used to safely include the asignation inside the angular digest processs              $scope.isDataLoading = obj.isVendorLoading || obj.isCustomerLoading || obj.isProgramLoading || obj.isPositionLoading || obj.isWaiting;         });    },    true);