Manual Annotating for Dependency Injection

ou Anotação Manual para Injeção de Dependência

UnSafe for Minification

ou Não seguro para Minificação

Evite usar o atalho de sintaxe de declarar dependências sem usar uma abordagem segura para minificação.

Por que? Os parâmetros do componente (por ex. controller, factory, etc) serão convertidos em variáveis encurtadas. Por exemplo, common e dataservice podem virar a ou b e não serem encontrados pelo AngularJS.
```
/* evite - não seguro para minificação*/
angular
    .module('app')
    .controller('Dashboard', Dashboard);

function Dashboard(common, dataservice) {
}
```
Este código pode produzir variáveis encurtadas quando minificado e, assim, causar erro em tempo de execução.
```
/* evite - não seguro para minificação*/
angular.module('app').controller('Dashboard', d);function d(a, b) { }
```

Manually Identify Dependencies

ou Identifique Dependências Manualmente

Use $inject para identificar manualmente suas dependências de componentes do AngularJS.

Por que? Esta técnica espelha a técnica usada por ng-annotate, a qual eu recomendo para automatizar a criação de dependências seguras para minificação. Se ng-annotate detectar que a injeção já foi feita, ela não será duplicada.

Por que? Isto salvaguarda suas dependências de serem vulneráveis a problemas de minificação quando parâmetros podem ser encurtados. Por exemplo, common e dataservice podem se tornar a ou b e não serem encontrados pelo AngularJS.

Por que? Evite criar dependências in-line pois listas longas podem ser difíceis de ler no array. Além disso, pode ser confuso o array ser uma série de strings enquanto o último item é a função do componente.

/* evite */
angular
    .module('app')
    .controller('Dashboard',
        ['$location', '$routeParams', 'common', 'dataservice',
            function Dashboard($location, $routeParams, common, dataservice) {}
        ]);

/* evite */
angular
  .module('app')
  .controller('Dashboard',
     ['$location', '$routeParams', 'common', 'dataservice', Dashboard]);

function Dashboard($location, $routeParams, common, dataservice) {
}

/* recomendado */
angular
    .module('app')
    .controller('Dashboard', Dashboard);

Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice'];

function Dashboard($location, $routeParams, common, dataservice) {
}

Nota: Quando sua função estiver abaixo de um return o $inject pode ficar inacessível (isso pode acontecer em uma diretiva). Você pode resolver isso movendo o $inject para acima do return ou usando a sintaxe alternativa de injeção de array.

Nota: ng-annotate 0.10.0 introduziu um comportamento em que ele move o $inject para onde ele possa ser acessado.

// dentro da definição de diretiva
function outer() {
    return {
        controller: DashboardPanel,
    };

    DashboardPanel.$inject = ['logger']; // inacessível
    function DashboardPanel(logger) {
    }
}

// dentro da definição de diretiva
function outer() {
    DashboardPanel.$inject = ['logger']; // acessível
    return {
        controller: DashboardPanel,
    };

    function DashboardPanel(logger) {
    }
}

Manually Identify Route Resolver Dependencies

ou Identifique Dependências do Resolvedor de Rotas Manualmente

Use $inject para identificar manualmente as dependências do seu resolvedor de rotas para componentes do AngularJS.

Por que? Esta técnica separa a função anônima do resolvedor de rota, tornando-a mais fácil de ler.

Por que? Uma chamada a $inject pode facilmente preceder o resolvedor para fazer qualquer dependência segura para minificação.

/* recomendado */
function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'Avengers',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: moviePrepService
            }
        });
}

moviePrepService.$inject =  ['movieService'];
function moviePrepService(movieService) {
    return movieService.getMovies();
}

De volta ao topo