参考错误：未定义angular。Angularjs。

Question

参考错误：未定义angular。Angularjs。

3

我正在尝试运行我的Angular应用程序，但遇到了一些问题。当我使用npm install运行它时，我得到了以下错误信息：

ReferenceError: angular is not defined
    at Object.<anonymous> (C:\Users\GrupoBECM18\Documents\Proyectos\StockPitch-Web\front\js\app.js:4:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

这是我的app.js代码：

    'use strict';

angular.module('MyApp', ['ui.bootstrap']);


// Declare app module and Appendages
angular.module('MyApp', ['ngCookies'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/home', {
        title: 'Home',
        templateUrl: 'front/login.html',
        //controller: 'loginctrl.js'
      })
      .otherwise({redirectTo: '/home'});
  }])
  .run(function($cookieStore, $rootScope, $http) {
    if ($cookieStore.get('djangotoken')) {
      $http.defaults.headers.common['Authorization'] = 'Token ' + $cookieStore.get('djangotoken');
      //document.getElementById("main").style.display = "block";
    } else {
        document.getElementById("login-holder").style.display = "block";
    }
  });

而我的HTML文件

<!DOCTYPE html>
<html ng-app="MyApp">
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="js/jquery-1.11.2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="../prefixfree/prefixfree.js"></script>
<script src="../prefixfree/prefixfree.min.js"></script>


<script src="js/loginctrl.js"></script>
<script src="js/variablesGlobales.js"></script>
<script src="js/headerfooter-login.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styleLanding.css">





    <title>Landing Page</title>
</head>
<body ng-controller="loginctrl">
<div class="container-fluid">
    <div id="headerl">
    </div>  
    <div class="content-bar col-lg-12 col-md-12 col-sm-12">
        <h1>Lorem Ipsum Dolor Sit Amet</h1>
        <h3>Li Europan lingues es membres del sam familie. Lor separat</h3>
            <button data-toggle="modal" data-target="#squarespaceModal" class="get">
                Get Started
        </button>
    </div>

    <div class="center">
            <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header" >
                            <button type="button" class="close" data-dismiss="modal" id="close">
                                <span aria-hidden="true" class="X">X</span>
                            </button>

                            <h3 class="modal-title" id="lineModalLabel"></h3>
                        </div>


                        <div class="modal-header" id="barraL">
                            <button type="button" class="close" data-dismiss="modal"></button>
                            <h3 class="modal-title" id="lineModalLabel">LOGIN</h3>
                        </div>

                <div class="modal-body">
                    <div ng-controller="loginctrl">
                        <form>
                          <div class="form-group">
                            <label for="exampleInputEmail1" class="email">Email</label>
                            <input class="form-control" id="InputEmail1" ng-model="emailu" >
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1" class="password">Password</label>
                            <input type="password" class="form-control" id="InputPassword1" ng-model="passwordu" >
                          </div>

                            <button type="submit" class="confirm" id="boton" ng-click="sendlgctrl()"><!--a href="disclaimer.html"--><a style="text-decoration:none; color:#ffffff;" >Confirm</a></button>

                        </form>
                    </div>

                </div>

            </div>
          </div>
        </div>
    </div>
</div>


</body>
</html>

我不知道问题出在哪里 :( 希望有人能帮助我。我已经安装了node、angular和所有东西，但是什么都不起作用，我不知道为什么。

- Enya Valeria Martínez

也许你需要将初始化放在文档准备好的时候？ - stackoverfloweth

每当你遇到这个错误时，几乎总是因为在加载angular模块本身之前初始化了一个angular依赖模块。 - yeaske

3个回答

2

我的第一个想法是：为什么你声明了两次模块？请注意，不要删除HTML标签。

angular.module('MyApp', ['ui.bootstrap']);


// Declare app module and Appendages
angular.module('MyApp', ['ngCookies'])

在使用 'angular.module' 的第二个参数声明模块并注入其依赖项时，需要使用 []。然而，使用相同的语法但不带第二个参数允许您调用该模块。

您应该这样做：

angular.module('MyApp', ['ui.bootstrap','ngCookies']);

angular.module('MyApp').config....

再说一遍，我不确定这是否是问题所在。我还注意到您将Js和css文件注入(head)中。这可能会导致一些问题，并且最好在(body)的末尾加载这些文件。

还要记住顺序很重要，您必须先注入angular JS文件，然后是模块、控制器等等。希望能解决问题。

- Tewfik Ghariani

0

你初始化了同一个模块两次。只需要初始化一次即可。

修改为：

angular.module('MyApp', ['ui.bootstrap']); 
// Declare app module and Appendages
angular.module('MyApp', ['ngCookies'])

转换为：

angular.module('MyApp', ['ui.bootstrap','ngCookies']);

- Sachila Ranawaka

我已经尝试过了，但仍然无法正常工作。我遇到了相同的错误。 - Enya Valeria Martínez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sajeetharan · Accepted Answer

有两个问题

(i) 您的模块应该一次性注入所有依赖项，

angular.module('MyApp', ['ui.bootstrap','ngCookies']);

(ii) 你的 app.js 应该在 index.html 中加载完所有 Angular 相关引用后再进行加载。

<script src="js/jquery-1.11.2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="../prefixfree/prefixfree.js"></script>
<script src="../prefixfree/prefixfree.min.js"></script>
<script src="js/app.js"></script>