angularjs Carregando Controllers de outros arquivos js

[DanielAndrade 28]

Olá Pessoal.... seguinte...

 

estou iniciando os trabalhos com Angular e estou construindo uma app com PHP puro no back-end. Só falei para ilustrar minha estrutura de diretórios, que é esta:

 

app/

---control/ [only PHPs]
---model/
---view/

---view/js/ng
---view/pages/

 

 

Então, eu andei estudando e uma fiz uma SPA (Single Page Aplication) e em app.js tenho uma config router, somelike that:

/* app.js */
(function(){
    'use strict';
    
    angular.module('app', ['ngRoute'])
                                    
           .config(['$routeProvider', 
                function($routeProvider){       
                    $routeProvider
                    .when('/', {
                        templateUrl : 'app/view/pages/inicio.html',
                        controller  : 'inicioCtrl'
                     })
                    .when('/Pessoas/index', {
                        templateUrl : 'app/view/pages/Pessoas/index.html',
                        controller  : 'pessoaCtrl'
                     })
                    .when('/Pessoas/add', {
                        templateUrl : 'app/view/pages/Pessoas/formAddPessoa.html',
                        controller  : 'inserirPessoaCtrl'
                     })
                    .otherwise ({ redirectTo: '/' }
    }])
})();

Agora notem que o arquivo app.js não possui as controllers relacionadas no config. Porque?

Visando o crescimento responsável da aplicação, não posso inserir toda nova controller no arquivo geral do app, confere? Continuando...

 

Nos templates, a seguinte estrutura de codigo:

<!-- Arquivo formAddPessoa.html -->
<div ng-controller="inserirPessoaCtrl">
{{ algumAtributoDoScope }}
</div>
<!-- Arquivo de Controller apenas deste arquivo -->
<script src="app/view/js/ng/Pessoas/inserirPessoaCtrl.js"></script> 

É aqui, no arquivo html do template, que penso em inserir o código js referente a controller que foi carregada e definida lá no config. Penso que assim posso implementar de forma saudável e visualmente compreensível para todos os devs.

 

Por fim, o arquivo da Controller específica

(function(){
    'use strict';
    angular.module('app')
                .controller('inserirPessoaCtrl', ['$scope', function($scope) {
                    $scope.algumAtributoDoScope= ' valor do atrib ';
                }]);    
})();

Bom, isso não funciona.

 

...Então fui pesquisar sobre e achei discussões - e soluções - muitos interessantes. O requirejs (http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs) parece ser o mais interessante para essa situação.

 

Mas eu devo ser muito tapado mesmo, pois não consegui fazer funcionar... Então, voltei ao início e mantive a estrutura de diretórios da forma como postei aqui.

 

Alguem pode me dar um norte? Uma saída, uma luz?? Outra ideia, de repente...

 

Agradeço desde já a todos.. Abraços!

[William Bruno 1501]

Cara, eu fiz uma aplicação "grande" e que vai continuar crescendo, com a seguinte estrutura:

 

_directives   | diretivas
_filters      | filtros
_services     | services genéricos
_templates    | arquivos .html genéricos
access        | feature
products      | feature
profile       | feature

assim, cada feature, é em si um novo module:

angular.module('access', [])
angular.module('products', [])
angular.module('profile', [])

todas registradas como dependência do module app, e cada feature possui:

-> access.module.js

-> access.route.js

-> access.controller.js

-> access.service.js

[DanielAndrade 28]

Boa William Bruno! Só vc pra salvar os caras....

 

Deixa só eu te perguntar umas coisas... Tu usas o requirejs para fazer load das deps? Outra, nessa estrutura de dirs que vc me mostrou, o server vai continuar enviando para o cliente todo o JS antes de exibir, certo? Isso não seria um problema não ?

 

Desde já, obg por entrar na discussão.

[William Bruno 1501]

Não, não uso require.js não. Eu minifico tudo num arquivo só, e sirvo só o app.min.js.

 

O server envia para o cliente apenas o app.min.js, não vejo nenhum problema nisso.

[DanielAndrade 28]

Bruno... ainda sobre essa pauta..

 

Achei esse artigo de Ravi Kiran sobre a utilização de requirejs e Angular combinados que achei superinteressante.

 

Esse é o link: http://www.sitepoint.com/using-requirejs-angularjs-applications/

 

Estava testando ele, mas parece que deixa a desejar quando vc precisa carregar diretivas especificas asyncroamente, mas vale a leitura. Abc

[DanielAndrade 28]

E.... ainda outra solução para isso... que acabei de ver...

 

Dá para refazer as chamadas das controllers, registrando-as no param $controllerProvider repassado no .config e depois para carregar um script com jquery no DOM , como esse exemplo explica muito bem:

 

http://stackoverflow.com/questions/25168593/angularjs-lazy-loading-controllers-and-content

 

Acho que usarei esse model.