How to inject a dependency of a service itself, in a certain syntax?

Question

How to inject a dependency of a service itself, in a certain syntax?

Navigation

#1 by (2 votes)

0

Imagine a traditional service injection in an angular applicationJS

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><body><divng-app="meuApp" ng-controller="meuCrontrole">
            <p>Dados providos do service "meuControle"</p>
            <h1>{{recebeDados}}</h1>
            <h1>{{dados}}</h1>
        </div>
        <script>
            var app = angular.module('meuApp', []);

            app.service('meuServico1', function() {
                this.myFunc = function (x) {
                    return x.toString(16);
                   }
                });
            app.controller('meuCrontrole', function($scope, meuServico1) {
              $scope.recebeDados = meuServico1.myFunc(22);
            });
        </script>
    </body>
</html>

However, I came across a project in IONIC with the following controller syntax:

(function () {
  angular.module('projeto.projeto', [])
    .controller('Template1Ctrl', function ($scope, $parametros) {
        $scope.dados = "Dados entregue";    
    });

})();

And I have to inject a service inside the controller with the following syntax:

(function () {
    angular.module('projeto.projeto')

    .service('Template1Service', function ($parametros) {
                //conteudo
        }
    });
})();

I tried to inject the service between keys, as a function, as a parameter, but always breaks the application. If possible, I would like to know if there are any differences between using the angle bundle within Ionic and the traditional angular.min.js file. The passing impression is that there are differences between purely developing in the angular, or angular / ionic. Or I just came across a different syntax to express the controller.

I created a gist with error message and the codes summarized: link

All full code tracking is available at link

javascript angularjs ionic

asked by anonymous 30.08.2017 / 21:31

1 answer

Interpret data from an external file to use in Autocomplete Problems with struch and functions in c

score 2 · Accepted Answer

The first error is because the JS file path is wrong. This is very clear in the stacktrace (which was posted and removed) that shows a 404 error.

The second error is because the scripts order is wrong. The module always needs to be the first thing to be created, and you can only inject some service that has already been created.

Also note that the service name should not be prefixed with a dollar sign ( $ ).

(function () { 
  angular.module('projeto.projeto', []); 
})();

(function () { 
  angular.module('projeto.projeto').service('Template1Service', function () { }); 
})();

(function () { 
  angular.module('projeto.projeto').controller('Template1Ctrl', function ($scope, Template1Service) {
    $scope.dados = 'Teste';
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="projeto.projeto">
  <div ng-controller="Template1Ctrl">
    {{ dados }}
  </div>
</div>