I want to log the usage of different features in our Angularjs application. Current feature in use is usually identified by the current route/url in browser but there are some features which open in a modal/popup or with ngInclude without change in route/url.
Is there any central way to identify which feature is in use currently, i thought of getting the current top level controller in use but unfortunately don't know how to get it.
Any other idea for that purpose?
P.S. I am using ngRoute.
I see several way to log infos from/of the controller.
element.controller()From the docs of element.controller():
controller(name)- retrieves the controller of the current element or its parent. By default retrieves controller associated with the ngController directive. Ifnameis provided as camelCase directive name, then the controller for this directive will be retrieved (e.g.'ngModel').
You can this function on very element to get its parent controller. Here is an snippet example using a directive:
var app = angular.module('app', [])
app.controller('MainController', function MainController() {});
app.controller('directiveCtrl', function directiveCtrl() {});
app.directive('controllerName', function($timeout) {
return {
restrict: 'A',
template: '<div>My controller name is: {{cName}}</div>',
controller: 'directiveCtrl',
link: function($scope, elem, attrs) {
var name;
name = elem.controller().constructor.name;
$scope.cName = name;
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<div ng-app="app">
<div ng-controller="MainController">
<div controller-name></div>
</div>
***************************************************
<div ng-controller="MainController">
<div ng-controller="directiveCtrl">
<div controller-name></div>
</div>
</div>
<hr/>
</div>You can access to every Angular object from your web console. For example, typing angular.element($0).scope() will get the current scope.
See this answer, which is very complete about the use of the console.
You can add a console call in your controller at the beginning of the code, and log whatever you want. This way, you will know each time a controller is instanciated:
app.controller('MyCtrl', function($scope) {
$scope.greetings = 'Hello world';
console.log('MyCtrl instanciated!', $scope.greetings);
});
Here is an interesting and funny way of logging instantiated controllers
angular.module('yourModule')
.decorator('$controller', ['$delegate', function controllerDecorator($delegate) {
return function loggingController (expression, locals, later, ident) {
// Do all your logging here
if (typeof (expression) === 'function') {
console.log('Controller:' + expression.name);
} else if (locals.$$controller) {
console.log('Controller: ' + locals.$$controller);
} else if (expression instanceof Array) {
console.log('Controller:' + expression[expression.length - 1].name);
} else {
console.log('Controller:' + expression);
}
// fire regular controller function
return $delegate(expression, locals, later, ident);
};
}]);
What you are doing here is pretty much extending angulars controller function so you get certain functionality on all controllers, not only yours
Another way is injecting the $route service and calling:
$route.current.controller
