Trying to make a crud app with ionic. But when I run my app, it can't show data. The error is:
Uncaught ReferenceError: app is not defined at http://localhost:8100/controller/controller.js:1:1 Uncaught ReferenceError: app is not defined at http://localhost:8100/controller/edit.js:1:1 Uncaught ReferenceError: app is not defined at http://localhost:8100/js/route.js:1:1
Uncaught Error: [$injector:modulerr] Failed to instantiate module myAPP due to:(…)
Can anyone help me please?
index :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myAPP">
<ion-pane>
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
<div class="tabs-striped tabs-top">
<div class="tabs">
<a class="tab-item" href="#/">List</a>
<a class="tab-item" href="#/addData">Add Data</a>
<a class="tab-item" href="#/editData">Edit Data</a>
</div>
</ion-content>
<div class="container">
<h2>{{title}}</h2>
</br>
</br>
<table class="table table-striped" ng-init="getData()">
<tr>
<th>NO</th>
<th>Nama</th>
<th>Alamat</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in dataList">
<td>{{$index+1}}</td>
<td>{{x.nama}}</td>
<td>{{x.alamat}}</td>
<td>
<button type="button" class="btn btn-info" ng-click="edit(x.id)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="delete(x.id)">Delete</button>
</td>
</tr>
</table>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="controller/controller.js"></script>
<script src="controller/edit.js"></script>
<script src="js/route.js"></script>
</ion-pane>
</body>
</html>
controller :
app.controller("controller",['$scope','$http', function($scope,$http){
console.log('hello world');
$scope.title = 'Data List';
$scope.action = "add";
$scope.listData = {};
$scope.dataList;
$scope.getData = function(){
$http.get(
'/data/getdata.php'
).success(function(data){
$scope.dataList = data;
});
};
$scope.delete = function(id){
$http.post(
'/data/delete.php',
{
id:id
}
).success(function(){
$scope.getData();
}).error(function(){
alert("Gagal");
});
};
$scope.add = function(){
$http.post(
'/data/add.php',
{
data: $scope.listData
}
).success(function(data){
//alert(data);
$scope.action = "add";
$scope.getData();
window.location.href = 'index.html';
}).error(function(){
alert("Gagal menyimpan data");
});
};
$scope.edit = function(index){
//var index = getSelectedIndex($index);
window.location.href = '#/editData/'+index;
// $scope.listData.nama = $scope.dataList[index].nama;
// $scope.listData.alamat = $scope.dataList[index].alamat;
}
function getSelectedIndex($index){
for (var i = 0; i < $scope.listData.length; i++) {
if($scope.listData[i].index===index);
return i;
}
return -1;
}
}]);
route :
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl : '/pages/list.html',
controller : 'controller'
})
.when('/addData',{
templateUrl : '/pages/addData.html',
controller : 'controller'
})
.when('/editData/:id',{
templateUrl : '/pages/update.html',
controller : 'controllerEdit'
})
.otherwise({
redirectTo : '/'
});
}]);
module :
var app = angular.module('myAPP', ['ionic'],['ngRoute'])
