未捕获ReferenceError：未在控制器，模块和路由中定义应用
[英]Uncaught ReferenceError: app is not defined in controller, module, and route
问题描述
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 个解决方案
解决方案1
1 2016-11-01 13:44:35
我认为html内缺少ng-controller="myctrlname"指令。
<body ng-app="myAPP" ng-controller="myctrlname">
解决方案2
0 2016-11-01 04:04:36
Your module declaration is wrong. 您的模块声明错误。 It should be like this 应该是这样
angular.module('myAPP', ['ionic','ngRoute'])
解决方案3
0 2016-11-01 04:57:12
The variable named app will not exist unless you create it. 除非创建变量，否则名为app的变量将不存在。 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');
解决方案4
0 2017-04-22 04:54:05
I faced same problem 我遇到了同样的问题
then 然后
Only removed 'starter.controllers' 仅删除了'starter.controllers'
var app = angular.module('starter', ['ionic', 'starter.controllers']);
replace with 用。。。来代替
var app = angular.module('starter', ['ionic']);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.