Modules

ou Módulos

Avoid Naming Collisions

ou Evitando Colisão de Nomes

• Use uma única convenção de nomes com separadores para sub-módulos.

  Por que? Nomes únicos ajudam a evitar colisão de nomes no módulo. Separadores ajudam a definir a hierarquia de módulos e submódulos. Por exemplo, app pode ser seu módulo raiz, enquanto app.dashboard e app.users podem ser módulos que são usados como dependências de app.

Definições (aka Setters)

ps: aka é o acrônimo de Also Known As, de forma traduzida, também conhecido como**.

• Declare os módulos sem uma variável usando a sintaxe setter.

  Por que? Com 1 componente por arquivo, raramente será necessário criar uma variável para o módulo.

  /* evite */
  var app = angular.module('app', [
    'ngAnimate',
    'ngRoute',
    'app.shared',
    'app.dashboard'
  ]);
  

  Ao invés, use a simples sintaxe setter.

  /* recomendado */
  angular
      .module('app', [
        'ngAnimate',
        'ngRoute',
        'app.shared',
        'app.dashboard'
    ]);
  

Getters

• Ao usar um módulo, evite usar uma variável. Em vez disso, use encadeamento com a sintaxe getter.

  Por que? Isso produz um código mais legível e evita colisão de variáveis ou vazamentos.

  /* evite */
  var app = angular.module('app');
  app.controller('SomeController' , SomeController);
  
  function SomeController() { }
  

  /* recomendado */
  angular
    .module('app')
    .controller('SomeController' , SomeController);
  
  function SomeController() { }
  

Setting vs Getting

ou Definindo vs Obtendo

• Apenas set (configure) uma vez e get (receba) em todas as outras instâncias.

  Por que? Um módulo deve ser criado somente uma vez, então recupere-o deste ponto em diante.

  • Use angular.module('app', []); para definir (set) um módulo.
  • Use angular.module('app'); para pegar (get) este módulo.

Named vs Anonymous Functions

ou Funções Nomeadas vs Funções Anônimas

• Use funções nomeadas ao invés de passar uma função anônima como um callback.

  Por que? Isso produz um código mais legível, é muito fácil de debugar, e reduz a quantidade de callbacks aninhados no código.

  /* evite */
  angular
    .module('app')
    .controller('Dashboard', function() { });
    .factory('logger', function() { });
  

  /* recomendado */
  
  // dashboard.js
  angular
    .module('app')
    .controller('Dashboard', Dashboard);
  
  function Dashboard() { }
  

  // logger.js
  angular
    .module('app')
    .factory('logger', logger);
  
  function logger() { }
  

De volta ao topo