how to inject a value in an angular controller

Question

I can't seem to get a defined value injected into a controller. I have gone through the angular docs and many other blogs too - but obviously I have messed up something critical here.

myapp = angular.module('MYAPP', ['ngRoute'])
.run(function () {
    console.info("Hello MYAPP");
});
myapp.value("vx1", "placeholder for vx1");

and in controller

myapp.controller("MainCtlr", ["vx1", "ovEnv", function($scope, $timeout, vx1, ovEnv){
    console.info("ctor MainCtlr env=", ovEnv, "; vx1=", vx1);
    ...

But I always get undefined for vx1.

Answer 1

["vx1", "ovEnv", function($scope, $timeout, vx1, ovEnv){

These two sequences need to be equal. What happens if you remove the ["..] array part and just leave function(...) {?

Like this: myapp.controller("MainCtlr", function($scope, $timeout, vx1, ovEnv) { ... })

or ["$scope", "$timeout", "vx1", "ovEnv", function($scope, $timeout, vx1, ovEnv) (see comment)

More info here.

Inline Array Annotation

This is the preferred way to annotate application components. This is how the examples in the documentation are written.

For example:

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) { // ... }]);