AngularJs - angular.extend()
Published in:2015-05-16 | Category: Frontend
Words: 337 | Reading time: 2min

The angular.extend() function has very powerful to copy object to another object, including all of properties from the source object(s).

Usage

angular.extend(dst, src);

dst: destination object
src: source object(s)

return: refercen to dst object

Example

Let’s understand how to use it with example instance. Create a normal controller which contains user’s name, gender and age. And create a method to get the full description of the user.

1
2
3
4
5
6
7
8
9
10
11
angular.Module('app',[])

.app.controller('UserController', ['$scope', function ($scope) {
$scope.name = 'angular';
$scope.gender = 'male';
$scope.age = '2';

$scope.getDescription = function() {
return "My name is " + $scope.name + " and I am " + $scope.gender + " " + $scope.age + " years old";
}
}]);

We can use angular.extend function to do like above functionality, see below:

1
2
3
4
5
6
7
8
9
10
11
12
13
app.controller('UserController', ['$scope', function($scope) {
angular.extend($scope, {
name : 'angular',
gender : 'male',
age : '2'
});

angular.extend($scope, {
getDescription : function() {
return "My name is " + $scope.name + " and I am " + $scope.gender + " " + $scope.age + " years old";
}
});
}])

And also we can use angular.extend() function to implement mixins. Let’s consider the below contrived Logging class.

1
2
3
4
5
6
var debug = true;
var Logger = {
log: function (msg) {
console.log(debug ? msg : '');
}
};

If we set debug variable to true, so it will print message in the browser console window when we invoke the log function. Otherwise nothing will be printed.

Okay, now we create a controler called LoggerController, and “mixin” Logger class to it.

1
2
3
4
5
6
7
8
app.controller('LoggerController', ['$scope', function($scope) {
angular.extend($scope, Logger);

$scope.print = function (msg) {
this.log(msg);
}
}])

In LoggerController, we “mixin” the Logger class to the $scope, and this will inovke the log function of the Logger class when the print function was called.

Prev:
how to use jdbc in spring
Next:
Sublime Text - Keyboard Shortcuts For Mac