未捕获ReferenceError：未在控制器，模块和路由中定义应用

Question

试图用离子技术制作一个简单的应用程序。 但是，当我运行我的应用程序时，它无法显示数据。 错误是：

未捕获的ReferenceError：未在http：// localhost：8100 / controller / controller.js：1：1定义应用程序未捕获的ReferenceError：未在http：// localhost：8100 / controller / edit.js：1：1定义应用程序未捕获的ReferenceError：未在http：// localhost：8100 / js / route.js：1：1定义应用
未捕获的错误：[$ injector：modulerr]由于以下原因而无法实例化模块myAPP：

谁能帮我吗？

指标：

<!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>

控制器：

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

路线：

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 : '/'
    });
}]);

模块：

var app = angular.module('myAPP', ['ionic'],['ngRoute'])

Answer 1

我认为html内缺少ng-controller="myctrlname"指令。

<body ng-app="myAPP" ng-controller="myctrlname">

Answer 2

您的模块声明错误。 应该是这样

angular.module('myAPP', ['ionic','ngRoute'])

Answer 3

除非创建变量，否则名为app的变量将不存在。 在模块文件中创建模块后，您可以像下面这样在其他文件的顶部检索它：

var app = angular.module('myAPP');

Answer 4

我遇到了同样的问题

然后

仅删除了'starter.controllers'

var app = angular.module('starter', ['ionic', 'starter.controllers']);

用。。。来代替

var app = angular.module('starter', ['ionic']);

未捕获ReferenceError：未在控制器，模块和路由中定义应用

问题描述

4 个解决方案

解决方案1
1 2016-11-01 13:44:35

解决方案2
0 2016-11-01 04:04:36

解决方案3
0 2016-11-01 04:57:12

解决方案4
0 2017-04-22 04:54:05

未捕获ReferenceError：未在控制器，模块和路由中定义应用

问题描述

4 个解决方案

解决方案1 1 2016-11-01 13:44:35

解决方案2 0 2016-11-01 04:04:36

解决方案3 0 2016-11-01 04:57:12

解决方案4 0 2017-04-22 04:54:05

解决方案1
1 2016-11-01 13:44:35

解决方案2
0 2016-11-01 04:04:36

解决方案3
0 2016-11-01 04:57:12

解决方案4
0 2017-04-22 04:54:05