{"id":17330,"date":"2015-02-17T13:25:29","date_gmt":"2015-02-17T07:55:29","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=17330"},"modified":"2017-08-03T14:15:18","modified_gmt":"2017-08-03T08:45:18","slug":"minification-safe-angular-js","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/minification-safe-angular-js\/","title":{"rendered":"Minification safe Angular.js"},"content":{"rendered":"

Recently, I wanted\u00a0to upgrade my Grails\u00a0application to 2.4.3<\/a> and also switched from resource plugin to assets-pipeline plugin. As everything was going\u00a0good in the development, so I pushed it to QA after which I was bombarded with JavaScript errors and missing providers.<\/p>\n

What has happened?? So here, Angular.js<\/a> internal dependency injection was broken\u2026 \ud83d\ude41<\/p>\n

Since Angular infers the controller’s dependencies<\/a> from the names of arguments to the controller’s constructor function, if you were to minify the JavaScript code for controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.<\/p>\n

Solution for the problem, \u00a0‘annotations’ \u2013 an array that contains the names of the dependency a function needs, and the function itself.<\/p>\n

By annotating the function with the names of the dependencies, provided as strings, which will not get minified.<\/p>\n

There are two ways to provide these injection annotations:<\/p>\n

1. Create a $inject property on the controller function which holds an array of strings. Each string in the array is the name of the service to inject for the corresponding parameter. we would write:<\/p>\n

[code]
\nvar myController = function ($scope, $http) {\/\/your code}
\nmyController.$inject = [‘$scope’, ‘$http’];
\n[\/code]<\/p>\n

2. Use an inline annotation where, instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself.<\/p>\n

[code]
\nfunction myController ($scope, $http) {\/\/your code}
\nmyApp.controller(‘myController’, [‘$scope’, ‘$http’, myController]);
\n[\/code]<\/p>\n

Second method is a\u00a0common one if you want to provide anonymous function like:<\/p>\n

[code]
\nmyApp.controller(‘myController’, [‘$scope’, ‘$http’, function ($scope, $http){
\n\/\/your controller code
\n}]);
\n[\/code]<\/p>\n

What about services, directives and factories.\u00a0Let us see the examples below:<\/p>\n

For modules:<\/p>\n

[code]
\nvar myModule = angular.module(‘myModule’,
\n[ ‘$scope’, ‘$http’ \/*Dependencies as an array of strings.*\/])
\n[\/code]<\/p>\n

For services:<\/p>\n

[code]<\/p>\n

myModule.service(‘serviceName’, [‘$scope’, ‘$http’, function($scope, $http) {
\n\/\/your code
\n}])
\n[\/code]<\/p>\n

For directives:<\/p>\n

[code]
\nmyModule.directive(‘myDirective’, [‘$scope’, ‘$http’, function($scope, $http) {
\n\/\/your code
\n}])
\n[\/code]<\/p>\n

For factories:<\/p>\n

[code]
\nmyModule.factory(‘myFactory’, [‘$scope’, ‘$http’, function($scope, $http) {
\n\/\/your code
\n}])
\n[\/code]<\/p>\n

Using\u00a0inline annotation is preferred and\u00a0mentioned in angular dependency injection<\/a> docs as well. By simply following above code convention you’ll never have to worry about minification surprises.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n