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