Javascript 未捕获的 ReferenceError:应用程序未在 Angularjs 中定义

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27718762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:33:42  来源:igfitidea点击:

Uncaught ReferenceError: app is not defined in Angularjs

javascriptangularjs

提问by Prince

I got this error. I looked through the answers posted previously but still I have the same problem.

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

index.html

索引.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

应用程序.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

登录控制器.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 [];
    }
});






});

Please check the code and tell me where I am making a mistake.

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

采纳答案by ug_

This is a good lesson on scope. Wrapping things in anonymous functions (function(){...}());) will make variables declared inside that function invisible to things outside the function. I wont go over all the javascript scope stuff in this response because it is well documented on many other questionsbut essentially this is your problem;

这是关于范围的一个很好的教训。将事物包装在匿名函数 ( function(){...}());) 中将使函数内部声明的变量对函数外部的事物不可见。我不会在此回复中介绍所有 javascript 范围的内容,因为它在许多其他问题上都有详细记录,但本质上这是您的问题;

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

In short remove the anonymous function that's in your app.jsor declare the appvariable outside the function.

简而言之,删除您的匿名函数app.jsapp在函数外声明变量。

回答by wvdz

It looks like all other answers are from people with no knowledge of Angular JS, and only of Javascript. They all give the same erroneous answer, which may cause the code to work, but introduce a bad practice.

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

Wrapping your code in an anonymous function is fine!

将您的代码包装在匿名函数中是可以的!

This is not the problem. The problem is that you put your controller in a separate file, but forgot to put it in a separate module as well.

这不是问题。问题是你把控制器放在一个单独的文件中,但忘记把它也放在一个单独的模块中。

loginController.js

登录控制器.js

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

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

app.js

应用程序.js

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

This answer is backed up by the angular seed project that is also referred to in the official angular docs: https://github.com/angular/angular-seed

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

回答by live-love

Had the same error. In my case it was the order of the javascript files.

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

I had to make sure app.js was declared before the service.js file (the file that had a reference to app in it).

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

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

In addition, this error ("app is not defined") could be caused by a syntax error in your javascript code, so check your javascript code for syntax errors, if there is a "Uncaught SyntaxError" paired up with it.

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

回答by Shashank Agrawal

Remove the anonymous function from app.js like:

从 app.js 中删除匿名函数,例如:

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

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

And also move your startFromfilter registration code out of the controller block. One last thing that your controller is accepting an dependency injection at very last: Datawhich is not defined, so remove that also.

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

Hope this helps!

希望这可以帮助!

回答by Naeem Shaikh

your app is defined inside anonymous function , so app has the scope within it. try creating a global app variable.

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

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

}());