Project in AngularJS

1

I'm trying to implement my project in AngularJS, and by loading encounter this error:

  

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 you register the module, please ensure that you specify the   dependencies as the second argument.

My files:

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")
        };

    });
    
asked by anonymous 29.10.2018 / 20:15

1 answer

0

This error is occurring because the postitService module is not being found by your application.

In the codes you have submitted there is no declaration of this module.

Apparently you do not need this module. It may have been a mistake.

Only remove as dependency from your module:

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