未捕获的 ReferenceError：应用程序未在 Angularjs 中定义答案

【问题标题】：Uncaught ReferenceError: app is not defined in Angularjs未捕获的 ReferenceError：应用程序未在 Angularjs 中定义
【发布时间】：2018-03-29 13:38:42
【问题描述】：

我收到了这个错误。我查看了之前发布的答案，但仍然遇到同样的问题。

index.html

<html lang="en" ng-app="customersApp">
<head>

    <link rel="shortcut icon" href="img/favicon.html">

    <title>Vizavoo</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
     <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!--external css-->
   <link href="css/slidebars.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />


</head>

  <body>

   <div ng-view></div>



    <!-- js placed at the end of the document so the pages load faster -->
       <script src="scripts/angular.js"></script> 
       <script src="scripts/angular-route.js"></script>
         <script src="app/app.js"></script>
         <script src="app/controllers/loginController.js"> </script>
           <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>



  </body>

<!-- Mirrored from thevectorlab.net/flatlab/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 08 Dec 2014 06:09:06 GMT -->
</html>

app.js

(function(){

var app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            controller: 'loginController',
               templateUrl: 'app/views/loginuser.html'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: 'partials/login.html',
                controller: 'loginController'
            })

            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: 'app/views/dynamic_table.html',
                controller: 'loginController'
            })
            .when('/signup', {
                title: 'Signup',
                templateUrl: 'app/views/registration.html',
                controller: 'loginController'
            })

            .otherwise({
                redirectTo: '/login'
            });
  }]);

}());

loginController.js

app.controller('loginController', function ($scope,$http, Data) {
    //initially set those objects to null to avoid undefined error
    $scope.login = {};
    $scope.signup = {};
    $scope.doLogin = function (customer) {


        $.post("http://dev.miniluxe.com:4002/email_login",
  {

     email : $scope.login.email,
      password : $scope.login.password
  },
  function(data,status){


      data = JSON.parse(data);
      console.log(data);

      if(data.log==1)
      {

          // window.location.href = "dashboard";
           $location.path('dashboard');
      }
      else
      {


         alert("wrong username and password");
      }


  });


    };

    $scope.logout = function () {
        Data.get('logout').then(function (results) {
            Data.toast(results);
            $location.path('login');
        });
    }
    app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});






});

请检查代码并告诉我哪里出错了。

【问题讨论】：

为什么要将 app.js 代码包装在匿名函数中？
我读了 Dan wahlin 的课程......他们已经这样做了，所以我按照他们的方法进行
这不是必需的。这样做会将变量 app 的范围仅限于该函数，并且您正试图在另一个文件中使用它。只需删除该匿名函数，它就会运行。
谢谢，问题已解决，但显示另一个错误：[$injector:unpr] Unknown provider: DataProvider
我已经在下面的回答中给出了这一点，请从您的控制器依赖注入中删除 Data 依赖。您的代码中还有更多需要修复的地方。所以看看我的回答。

标签： javascript angularjs

【解决方案1】：

看起来所有其他答案都来自不了解 Angular JS 并且仅了解 Javascript 的人。他们都给出了相同的错误答案，这可能会导致代码工作，但会引入一种不好的做法。

将代码包装在匿名函数中很好！

这不是问题。问题是您将控制器放在单独的文件中，但忘记将它也放在单独的模块中。

loginController.js

angular.module('customersApp.loginController',[])

.controller('loginController', function ($scope,$http, Data) {
  ...
});

app.js

var app= angular.module('customersApp',['ngRoute','customersApp.loginController']);

这个答案得到了官方 angular 文档中也提到的 angular 种子项目的支持：https://github.com/angular/angular-seed

【讨论】：

将控制器放在具有相同模块的单独文件中是可以的（只要它们是相关的）。 OP 提供的代码将创建一个Uncaught ReferenceError，因为app 变量超出范围。
这样做会不必要地模糊您的代码，因此应该被视为一种不好的做法。也没有任何迹象表明这是 OP 的深思熟虑的设计选择。

【解决方案2】：

这是关于范围的很好的一课。在匿名函数 (function(){...}());) 中包装事物将使函数内部声明的变量对函数外部的事物不可见。我不会在此响应中讨论所有 javascript 范围的内容，因为它很好 documented on many other questions 但本质上这是你的问题；

(function(){
    var hello = "world";
}());
console.log(hello); // no good, hello is not declared in this scope

简而言之，删除 app.js 中的匿名函数或在函数外部声明 app 变量。

【讨论】：

【解决方案3】：

有同样的错误。就我而言，这是 javascript 文件的顺序。

我必须确保 app.js 在 service.js 文件（其中包含对 app 的引用的文件）之前声明。

<script src="app.js"></script>
<script src="/Scripts/Service.js"></script>

此外，此错误（“应用程序未定义”）可能是由您的 javascript 代码中的语法错误引起的，因此请检查您的 javascript 代码是否存在语法错误，如果有“未捕获的 SyntaxError”与之配对。

【讨论】：

【解决方案4】：

您的应用程序是在匿名函数中定义的，因此应用程序在其中具有范围。尝试创建一个全局应用变量。

(function(){

 app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        $routeProvider.
        when('/login', {
            title: 'Login',
            controller: 'loginController',
               templateUrl: 'app/views/loginuser.html'
        })
            .when('/logout', {
                title: 'Logout',
                templateUrl: 'partials/login.html',
                controller: 'loginController'
            })

            .when('/dashboard', {
                title: 'Dashboard',
                templateUrl: 'app/views/dynamic_table.html',
                controller: 'loginController'
            })
            .when('/signup', {
                title: 'Signup',
                templateUrl: 'app/views/registration.html',
                controller: 'loginController'
            })

            .otherwise({
                redirectTo: '/login'
            });
  }]);

}());

【讨论】：

帮助，在 index.js 中是全局的。我正在使用 browserify，因此无法消除任何匿名函数。 Browserify 无论如何都会添加它们

【解决方案5】：

从 app.js 中移除匿名函数，例如：

var app= angular.module('customersApp',['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
        // rest of the code
  }]);

还将您的startFrom 过滤器注册码移出控制器块。您的控制器最后接受依赖注入的最后一件事：Data 未定义，因此也将其删除。

希望这会有所帮助！

【讨论】：