Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://2.bp.blogspot.com/-TYKVJzEI3nc/TrqvYP9ZrAI/AAAAAAAAAm8/PqHCTwqQfJQ/s400/ohgodwhy.png&key=9070928d6958ed3a3df0e90d88106fb8535457c1959bad27fce81078c7777342" alt="ohgodwhy.png" />
...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!
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.
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.
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
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.
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