个人中心
gpt4 book ai didi

javascript - 未捕获的ReferenceError : app is not defined in controller,模块和路由

转载 作者：行者123 更新时间：2023-12-03 05:45:18 25 4
gpt4 key购买 nike

尝试使用 ionic 制作一个 CRUD 应用程序。但是当我运行我的应用程序时，它无法显示数据。错误是:

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:(…)

有人可以帮我吗？

索引:

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

路线:

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'])

最佳答案

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

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

关于javascript - 未捕获的ReferenceError : app is not defined in controller,模块和路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40353915/

25 4 0
文章推荐： android - 在android平台上没有办法自动播放视频吗？
文章推荐： java - Gradle中的String.ReplaceAlli缺少要转义的字符
文章推荐： youtube - 在移动Web浏览器上运行JW Player
文章推荐： javascript - 使用开关访问天气图标
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com