未捕获的引用错误:应用程序未在 Angularjs 中定义

Uncaught ReferenceError: app is not defined in Angularjs

本文关键字：Angularjs 定义 应用程序 错误 引用      更新时间：2023-09-26

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

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

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

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



});

请检查代码并告诉我我在哪里犯了错误。

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

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

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

登录控制器.js

angular.module('customersApp.loginController',[])
.controller('loginController', function ($scope,$http, Data) {
  ...
});

应用.js

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

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

这是关于范围的一课。将事物包装在匿名函数（function(){...}());）中将使在该函数内声明的变量对函数外部的事物不可见。我不会在此响应中介绍所有 javascript 范围的内容，因为它在许多其他问题上都有很好的文档记录，但本质上这是您的问题;

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

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

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

我必须确保 app.js 是在服务.js文件（其中包含对应用程序的引用的文件）之前声明的。

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

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

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

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

从应用程序中删除匿名函数.js例如：

var app= angular.module('customersApp',['ngRoute']);
app.config(['$routeProvider',
  function ($routeProvider) {
        // rest of the code
  }]);

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

希望这有帮助！

相关文章：