How to inject a dependency of a service of its own into a certain syntax?

Asked

Viewed 290 times

0

Imagine a traditional service injection in an Angularjs application

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body>
        <div ng-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 an IONIC project 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 into 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 it always breaks the application. If possible, I would like to know if there are differences between using the angular Bundle within Ionic and the traditional angular.min.js file. The impression that passes is that there are differences between developing purely on angular, or angular/Ionic. Or I just came across a different syntax of expressing the controller.

I created a gist with error message and the shortcodes: https://gist.github.com/paulosergioduff/fadd207b1c276f2673076860f5de3c9e

All the tracking of the complete code is available at https://github.com/paulosergioduff/angularBookmarkProject

javascript angularjs ionic

  • .controller('Template1Ctrl', function ($scope, $Template1Service, $parametros) { .. } Does that not work? If so, what error does it present?

  • I created a gist with error message and the shortcodes: https://gist.github.com/paulosergioduff/fadd207b1c276f2673076860f5de3c9e

  • Paul, are you sure the JS way is right?

  • Update, I really messed up a folder. Now a different error appears: Ionic.bundle.js:26799 Error: [$injector:unpr] Unknown Provider: $Template1serviceprovider <- $Template1service <- Template1ctrl

1 answer

2


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

The second mistake is because the order of scripts 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>
<div ng-app="projeto.projeto">
  <div ng-controller="Template1Ctrl">
    {{ dados }}
  </div>
</div>

Browser other questions tagged javascript angularjs ionic

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