Angularjs Factory in another file

Asked

Viewed 353 times

0

Good morning

I’m wanting to create a separate file for each Factory that I have to declare in my project, but it’s not working:

App.js file

var GestaoGastos = angular.module('GestaoGastos', ['ngMaterial', 'ngRoute', 'ngMessages', 'ngResource']);

File cargo-service.js

var CargoService = function(q, http) {

    var self = {}

    self.salvar = function(cargo) {
        var deferred = q.defer()

        http.post('/services/cargo/salvar', cargo).then(function(response) {
            deferred.resolve(respoonse)
        }, function(response) {
            deferred.reject(response)
        })

        return deferred.promise
    }

    return self
}

CargoService.$inject = ['$q', '$http']

angular.module('GestaoGastos').factory('CargoService', CargoService)

And the post-registration-controller.js file

var CargoCadastroController = function(
        scope, http, cargoService, RetornoChamadoStatus) {

    scope.cargo = {
        codigo: '',
        descricao: ''
    }

    scope.salvar = function() {

        cargoService.salvar(scope.cargo).then(function(response) {

            var retorno = response.data

            if (retorno.status == RetornoChamadoStatus.OK) {
                alert(retorno.mensagem)
            } else {
                alert(retorno.mensagem)
            }
        }, function(response) {

        })
    }

}

CargoCadastroController.$inject = ['$scope', '$http', 'CargoService', 'RetornoChamadoStatus']

GestaoGastos.controller('CargoCadastroController', CargoCadastroController)

But the following error is presented:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr? P0=Cargoserviceprovider%20%3C-%20CargoService%20%3C-%20CargoCartiesController

If we access the link we can see:

Error: $injector:unpr Unknown Provider Unknown Provider: Cargoserviceprovider <- Cargoservice <- Cargocadastrocontroller

But if I take the cargo-service.js code and paste at the end of the app.js file, sure, but didn’t want to leave it there to not make the file too big, someone knows how to solve this problem ?

javascript angularjs angularjs-factorys

  • You imported the service on index ?

  • I wanted to import at the time I would use, for example in the html file with the piece of screen that will be displayed at that time, not to load too many things at the beginning, so I had not put import in index, test here and worked putting in index, cannot import the js file in partial ?

  • 1

    You can use Requirejs to avoid having to declare .js. files on the index. See more information on Github: https://github.com/jrburke/requirejs

  • @Cristianurbainski You must upload the file that will be used before calling it.

  • yes in the html that corresponds to the registration screen, the partial that is being injected, first import the file of Factory and then the controller but happens the error that I mentioned in the question

1 answer

2

First, in your files you are creating a new application all the time.

Use variable name with $ that Inject is automatic, no need to explain it

Separate the file that makes the inclusion in the application from the declaration files:

For example file-business.js

var app = angular.module('GestaoGastos', ['ngMaterial', 'ngRoute', 'ngMessages', 'ngResource']);

app.factory('CargoService', CargoService);
app.controller('CargoCadastroController', CargoCadastroController);

Browser other questions tagged javascript angularjs angularjs-factorys

You are not signed in. Login or sign up in order to post.