Uncaught ReferenceError: app is not defined in controller, module, and route
Question
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'])
4 answers
solution1
1 2016-11-01 13:44:35
我认为html内缺少ng-controller="myctrlname"指令。
<body ng-app="myAPP" ng-controller="myctrlname">
solution2
0 2016-11-01 04:04:36
Your module declaration is wrong. It should be like this
angular.module('myAPP', ['ionic','ngRoute'])
solution3
0 2016-11-01 04:57:12
The variable named app will not exist unless you create it. Once the module has been created in your module file, you can retrieve it at the top of your other files like this:
var app = angular.module('myAPP');
solution4
0 2017-04-22 04:54:05
I faced same problem
then
Only removed 'starter.controllers'
var app = angular.module('starter', ['ionic', 'starter.controllers']);
replace with
var app = angular.module('starter', ['ionic']);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.