8

I have this interest in automate/simplify angular project with a compiler tool, which might work on everything else, but angular inject and namespacing is awkward enough to escape compiler knowledge. What is the best/professional method for doing this?

thanks, just one last thing, 

app.controller('ctrl',['$rootScope',function($rootScope){
    ...
}]);

works when minified, but how do I minify

app.config(['$routeProvider', function($routeProvider){

}]);

and does it work when I minify successive actions?

app.controller(...).directive(...).run(...)
Improve this question
7
  • These should all work fine. Check out my build scripts: github.com/joshdmiller/ng-boilerplate. But I'm not sure what you're specifically asking here. What's the problem you are encountering? Commented Mar 29, 2013 at 20:10
  • app.config(['$routeProvider', function($routeProvider){$routeProvider.something()...}]); turns into app.config(['$routeProvider', function(e){e.f=function()...} when minified, and causes e->eProvider errors. so am I missing something in this process? should I be using $injector or $inject somewhere in the app? Commented Mar 29, 2013 at 20:24
  • The code you provided works for me just fine - again, check out that link. Can you post the body of the function too? Commented Mar 29, 2013 at 20:27
  • ok, i will try it, is there anything else I need to be ware of after I've placed the line format of injection? Commented Mar 31, 2013 at 21:14
  • Not that I am aware of. I've never had any issue with config minification. Commented Apr 1, 2013 at 4:02

6 Answers 6

Reset to default
11

In Angular, you need to annotate functions for the injector to know which dependencies you want to inject in your function. There are basically three ways to inject dependencies in your function which are being described on official angular website. The three ways are:

1.Use the inline array annotation

 yourModule.controller('yourController', ['$scope', function($scope) {}]);

2.Use the $inject property annotation

var yourController = function($scope) {};

yourController.$inject = ['$scope'];

yourModule.controller('yourController', yourController);

3.Implictly from the function parameter names

yourModule.controller('yourController', function($scope) {});

Now when you minify your project, your dependencies names will get renamed. In first case your code will be like

yourModule.controller('yourController', ['$scope', function(e) {}]);

In third case your code will be like

yourModule.controller('yourController',  function(e) {});

It will break your app because angular has no way to recognize your dependency name. So it is advised never to use implicit dependency injection in your project. From the above two inline array annotation is the most popular way amongst programmers.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

I would recommend using https://github.com/olov/ng-annotate. It will allow you to write your code like follows.

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
});

and then ngAnnotate turns it into the following which is safe for minification.

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout",   function($scope, $timeout) {
}]);
Improve this answer

Comments

1

The minifyer leaves strings untouched, that's why we use the array notation. Chaining methods wont change the way the minifyer keeps strings intact.

var app=module(myapp);
app.config(['$routeProvider', function($routeProvider){
 $routeProvider.dosomestuffs()
}]);

will be minified in something like 

var a=module(myapp);
a.config(['$routeProvider', function(b){
      b.dosomestuffs()
}]);

but angular will still find its way around thanks to the '$routeProvider' string.

Improve this answer

Comments

0

If you always use annotations there should not be problems minifying angular scripts.

app.controller(['$scope', function(mrScope) {
    mrScope.yourProperty = 'it does not matter the dependency variable names if you use annotations'; 
}]);
Improve this answer

Comments

0

As long as you use the array notation for the dependencies you are injecting, no minification trouble is expected. The minification tool you are using should handle any of your examples without trouble (on my project we're using uglify to accomplish that).

In fact, for oddly named injections (named with dots and chars that result in invalid function names like ABC.CDE), the array notation is the best way to inject them.

Improve this answer

Comments

0

I had the same problem when minifying, and like you, it only failed for the $routeProvider config elements.. The answer for me was to use the $inject method like Himanshu says for my configs, even though the syntax you show for your first example works for my controllers. So I'll post my .config() code here since I don't see it specifically listed in the answers above:

var app = angular.module('myApp');
var RouteProviderConfig = function ($routeProvider) {
        $routeProvider
            .when(...)
            .otherwise(...);
    };
RouteProviderConfig.$inject = ['$routeProvider'];
app.config(RouteProviderConfig);

This fixed my error for configs, but my controllers work the way your first example is written:

app.controller('ctrl',['$rootScope',function($rootScope){
    ...
}]);

The Angular Documentation seems to suggest that both ways should work, so I think it's possible there is a bug with configs, or $routeProvider, or something else entirely...

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.