1

Estou tentando implementar meu projeto em AngularJS, e ao carregar encontro esse erro:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module postitService due to: Error: [$injector:nomod] Module 'postitService' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Meus arquivos:

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#!/view1">view1</a></li>
    <li><a href="#!/view2">view2</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="canvas/canvas.js"></script>
  <!-- <script src="services/service-postit.js"></script> -->
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html
>

HTML_2

<div ng-controller="CanvasCtrl">
    <div class="ConjuntoPostitPrimeira">
        <div class="Post" ng-repeat="item in itens">
            <p>{{ item.texto }}<input type="button" class="BotaoFechar" value="X" ng-click="RetiraItem_01()"></p>
        </div>
    </div>
    <div id="Postit_01" class="StylePostit">
        <textarea rows="2" ng-model="item.texto"></textarea>
    </div>
    <input type="button" value="Criar" id="mostrar_01">
    <input type="button" value="Inserir" id="ocultar_01" ng-click="adicionaItem_01()">
    <!-- <input type="button" value="Teste" ng-click="postitService()"> -->
    <button ng-click="testaRetorno()" type="button">TesteANG</button>
</div>

JS

    'use strict';

// Declare app level module which depends on views, and components
var aplicativo = angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.canvas',
  'myApp.version'
  ,'postitService'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/canvas'});
}])


.service('postitService', [function ($http) {
  this.getTabela = function () {
      return $http({
          method: 'GET',
          url: 'Postit.json',
          // cache will ensure calling ajax only once
          cache: true
      }).then(function (tabela) {
          // this will ensure that we get clear data in our service response
          return tabela.data;
      });
  };
}]);

// .service('hexafy', function() {
//   this.myFunc = function (x) {
//       return x.toString(16);
//   }
// });

JS_2

'use strict';

angular.module('myApp.canvas', ['ngRoute'])

    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/canvas', {
            templateUrl: 'canvas/canvas.html',
            controller: 'CanvasCtrl'
        });
    }])

    .controller('CanvasCtrl', function ($scope, postitService) {

          $scope.itens = [];

          $scope.adicionaItem_01 = function () {
              console.log("Adiciona item.");
              $scope.itens.push({ texto: $scope.item.texto });
              $scope.item.texto = '';
          };
          $scope.RetiraItem_01 = function () {
              console.log("Adiciona item.");
              $scope.itens.splice({ texto: $scope.item.texto });
              $scope.item.texto = '';
          };

          postitService.getTabela().then(function (tabela) {
              console.log("Retorno", tabela.data)
          }).catch(function (err) {
              console.log("Erro de carregamento da tabela de configuração: ", err);
          });

        $scope.testaRetorno = function () {
            console.log("Teste")
        };

    });

1 Resposta 1

0

Esse erro está ocorrendo porque o modulo postitService não está sendo encontrado pela sua aplicação.

Nos códigos que você enviou não há declaração desse modulo.

Ao que parece você não precisa desse modulo. Pode ter sido um equivoco.

Só remover como dependência do seu modulo:

 angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.canvas',
  'myApp.version'
  ,'postitService' // <-----Remove isso aqui
])

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 .