1
I am trying to implement my project in Angularjs, and while loading 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 registering a module 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")
};
});