2

Estou criando uma aplicação que utiliza o angularJS e sou novo com essa biblioteca. O meu problema é que, quando vejo a forma que ele faz o $router eu entendo que ali falta alguma forma de eu também poder rotear outros elementos do angular como controllers, services, factories, etc. Por acaso alguém tem alguma solução para eu fazer algo do tipo:

angular.module("app", ["app.controllers"])
    .config(function($stateProvider) {
        $stateProvider
            .state("contato", {
                url : "/contato",
                templateUrl: "templates/contato.html",

                //isso daqui que precisava
                controller: "contatoCtrl",
                controllerUrl : "controllers/contatoCtrl.js",

                factory: "contatoFtry",
                factoryUrl : "factories/contatoFtry.js",

                service: "contatoSrv",
                serviceUrl : "service/contatoSrv.js"

            });
    });

1 Resposta 1

1

Na verdade AngularJS ja oferece isso. E voce ja esta bem perto da solucao.

Como voce esta usando o ui-router, dentro do objeto de definicao das rotas do ui-roter ($stateProvider) para cada state voce pode definir a url, templateUrl e o controller.

Ai voce vai me falar:

"Certo! Isso eu ja sei. Mas e as services e factories?!"

A forma de voce "rotear" ou associar essas outras dependencias para cada rota eh atraves do Controller "contatoCtrl" que voce ja definiu.

Nesse caso voce tem que injetar as suas dependencias (services/ factories) dentro do seu controller "contatoCtrl".

Em outras palavras a primeira associacao que voce deve fazer eh definir o controller para a rota (state).

Depois voce injeta os services e factories dentro do controller que voce definiu previamente para aquela rota especifica.

Eu alterei seu codigo. Veja abaixo:

angular.module("app", ["app.controllers"])
.config(function($stateProvider) {
    $stateProvider
        .state("contato", {
            url : "/contato",
            templateUrl: "templates/contato.html",
            controller: "contatoCtrl"
        });
});


// veja que eu injetei as dependencias contatoFtry e contatoSrv
angular.controller('contatoCtrl', function($scope, contatoFtry, contatoSrv) {
  $scope.mensagem= 'Oi Mundo!';

 // aqui voce pode usar as dependencias injetadas
 // contatoFtry e contatoSrv

});

Existe ainda recursos mais poderosos em termos de injecao de dependencias por rotas. Da uma olhada no topico RESOLVE dessa pagina aqui https://github.com/angular-ui/ui-router/wiki#resolve

Espero que tenha ajudado :)

1
  • começei a procurar sobre isso e acabei achando o RequireJS, foi só ai que eu entendi essa questão de dependência que o angular faz rs, mesmo assim obrigado amigo, essa foi a conclusão que eu encontrei também ;D Commented 26/06/2015 às 18:50

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 .