Angularjs minimiza as melhores práticas

103

Estou lendo http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html e descobri que a injeção de dependência angularjs tem problemas se você minimizar seu javascript, então eu estou me perguntando se em vez de

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

você deveria usar

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

Resumindo, pensei que o segundo fragmento fosse para a versão antiga do angularjs, mas ....

Devo usar sempre a via injetável (a segunda)?

javascript angularjs dependency-injection Whisher
fonte

Respostas:

102

Sim , sempre! Assim, mesmo que seu minifer converta $ scope para a variável a e $ http para a variável b, sua identidade ainda será preservada nas strings.

Veja esta página de documentos do AngularJS, role para baixo até Uma Nota sobre Minificação .

ATUALIZAR

Alternativamente, você pode usar o pacote npm ng-annotate em seu processo de construção para evitar esse detalhamento.

Selvam Palanimalai
fonte
Este e alguns outros problemas são muito bem explicados em egghead.io. JFYI
Wottensprels
@Sprottenwels: Sim! Muitos recursos úteis lá.
Selvam Palanimalai
8
Em vez de usar essa sintaxe mais detalhada, você pode usar o ngmin e uma ferramenta de construção (como o Grunt) antes de executar a minificação. Dessa forma, você pode reduzir adequadamente, mas também usar qualquer sintaxe de injeção de dependência.
jkjustjoshing
4
Uma nota sobre a minimização foi movida aqui docs.angularjs.org/tutorial/step_07
Razvan.432
Consulte também AngularJS Developer Guide - Implicit Annotation .
georgeawg
36

É mais seguro usar a segunda variante, mas também é possível usar a primeira variante com segurança com o ngmin .

ATUALIZAÇÃO:
Agora o ng-annotate se torna uma nova ferramenta padrão para resolver esse problema.

OZ_
fonte
7

Sim, você precisa usar injeção de dependência explícita (segunda variante). Mas, como o Angular 1.3.1 você pode desligar a injeção de dependência implícita , é realmente útil resolver problemas em potencial com renomeação de uma vez (antes da minificação).

Desligando o DI implícito, usando a strictDipropriedade config:

angular.bootstrap(document, ['myApp'], {
    strictDi: true
});

Desligando o DI implícito, usando a ng-strict-didiretiva:

<html ng-app="myApp" ng-strict-di>
dizel3d
fonte
7

Apenas para apontar que se você usar

Yeoman

não há necessidade de fazer gosto

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}]

porque o grunhido durante o minify leva em consideração como gerenciar o DI.

Whisher
fonte
0

Você pode querer usar $injectcomo mencionado aqui :

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .then(function(response) {
      $scope.commits = response.data
    })
}
sem id
fonte
0

Use injeção de dependência estrita para diagnosticar problemas

Com a anotação implícita , o código será interrompido quando reduzido.

Do Docs:

Anotação implícita

Cuidado: se você planeja reduzir seu código, os nomes dos serviços serão renomeados e danificarão seu aplicativo.

Você pode adicionar uma ng-strict-didiretiva no mesmo elemento ng-apppara optar pelo modo DI estrito.

<body ng-app="myApp" ng-strict-di>

O modo estrito gera um erro sempre que um serviço tenta usar anotações implícitas.

Isso pode ser útil para determinar a localização de problemas.

Para mais informações, veja

georgeawg
fonte