7

Tenho vários módulos com AngularJS

angular.module('modulo1', ['ngTable']);
angular.module('modulo2', ['ngTable']);
angular.module('modulo3', ['ngTable']);


window.app = angular.module("app", ['ngRoute','modulo1','modulo2','modulo3']);

E dentro de cada um dos modulos, tenho vários controllers/filtros/services...

Bom, fica muitos arquivos, exemplo:

<!-- Load app main script -->
<script src="app/app.js"></script>

<!-- Load services -->
<script src="app/services/placesExplorerService.js"></script>
<script src="app/services/placesPhotosService.js"></script>
<script src="app/services/placesDataService.js"></script>


<!-- Load controllers -->
<script src="app/controllers/placesPhotosController.js"></script>
<script src="app/controllers/placesExplorerController.js"></script>
<script src="app/controllers/userContextController.js"></script>
<script src="app/controllers/myPlacesController.js"></script>
<script src="app/controllers/navigationController.js"></script>
<script src="app/controllers/aboutController.js"></script>

<!-- Load custom filters -->
<script src="app/filters/placeNameCategoryFilter.js"></script>

<!-- Load custom directives -->
<script src="app/directives/fsUnique.js"></script>

Pois bem, aí tenho alguns só, e se tivesse 10 módulos e com 20 controllers, são 200 arquivos para se colocar para carregar....

Como eu poderia resolver esse problema? O angularJS tem algo para resolver esse problema? PS: Sem usar RequireJS, opto por qualquer outro fw, menos requirejs

2 Respostas 2

5

Você também pode usar o browserify + Grunt ou Gulp para criar um bundle. http://dontkry.com/posts/code/angular-browserify-grunt.html

2
  • 2
    um recurso bem interessante. Até mais que o AMD, mas será que você poderia transcrever pelo menos parte do funcionamento da solução para, se caso algum dia o link esteja indisponível, a resposta não estará perdida. Só não se esqueça de citar a fonte.
    – Caputo
    Commented 14/08/2014 às 14:56
  • 1
    Você pode colocar o CDN do AngularJS global e utilizar o Browserify apenas para sua solução.
    – ralfting
    Commented 29/09/2015 às 13:40
4

Uma das melhores maneiras de organizar o código que já utilizei para trabalhar com esses frameworks foi o carregamento assíncrono de módulos (AMD - Asynchronous Module Loader). Neste link tem um exemplo bem completo utilizando o AngularAMD

Com ele você vai definindo as dependências de cada arquivo que devem ser carregadas antes daquele arquivo e no html vc só insere o arquivo de definição principal

Transcrevendo aqui um exemplo de utilização do site

Passo 1:

Defina os componentes e dependências no arquivo main.js:

require.config({
    baseUrl: "js",    
    paths: {
        'angular': '.../angular.min',
        'angular-route': '.../angular-route.min',
        'angularAMD': '.../angularAMD.min'
    },
    shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
    deps: ['app']
});

E carregue o RequireJS, e somente o RequireJS, no seu arquivo index.html:

<head>
    <script data-main="js/main.js" src=".../require.js"></script>
</head>

Passo 2:

Crie o arquivo app.js usando a função define do RequireJS:

define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("webapp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider.when("/home", angularAMD.route({
            templateUrl: 'views/home.html', controller: 'HomeCtrl',
            controllerUrl: 'ctrl/home'
        }))
    });
    return angularAMD.bootstrap(app);
});

Passo 3:

Crie o controller utilizando o método app.register:

define(['app'], function (app) {
    app.controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    });
});

Dessa forma, basta você ir definindo os as dependências utilizando o define e registrando no main que, quando o site carregar ele irá carregar os módulos respeitando suas dependências.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .