CODEWITHSUNDEEP
javascriptangularjs
user3714162
user3714162

Reputation: 89

$injector.unpr error in AngularJS

I am new to AngularJS JavaScript. Just started learning it. I was trying with some small sample programs. Here is what I tried but its throwing error.

<body ng-app="myApp">

  <div ng-controller="myCtrl"> 
    {{time}}
    <br>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module("myApp", []);

  app.service('hexafy', ['',
    function() {
      this.myfunc = function(num) {
        return num.toString(16);
      }
    }
  ]);

  app.controller('myCtrl', ['hexafy', '$scope', '$interval',
    function(hexafy, $scope, $interval) {
      $scope.time = new Date().toLocaleTimeString();
      $interval(function() {
        $scope.time = new Date().toLocaleTimeString();
      }, 1000);
      // $scope.hex = hexafy.myfunc(255);
    }
  ]);
</script>

Upvotes: 0

Views: 42

Answers (2)

Tushar
Tushar

Reputation: 87203

The array syntax is used when the code is minified and keep the mapping of arguments. For more on this please see my other answer Why we Inject our dependencies two times in angularjs?.

In the code, as there is no parameter passed to the hexafy service, there is no need of using the array syntax and pass empty string.

app.service('hexafy', ['',
    function() {

Use normal syntax.

app.service('hexafy', function() { // <-- Remove `[` and empty string from here
    ...
    ...
}); // <-- Remove `]` from here


var app = angular.module("myApp", []);

app.service('hexafy', function() {
  this.myfunc = function(num) {
    return num.toString(16);
  }
});

app.controller('myCtrl', ['hexafy', '$scope', '$interval',
  function(hexafy, $scope, $interval) {
    $scope.time = new Date().toLocaleTimeString();
    $interval(function() {
      $scope.time = new Date().toLocaleTimeString();
    }, 1000);
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    {{ time }}
    <br />
  </div>
</body>

Upvotes: 1

Shashank Vivek
Shashank Vivek

Reputation: 17504

What Tushar has suggested is perfect, Just adding working piece of Plunker

app.service('hexafy',function() {
  this.myfunc = function(num) {
    return num.toString(16);
  }
 }
);

Upvotes: 0

Related Questions