参考错误：未定义Angular

Question

参考错误：未定义Angular

7

我已经花费了几个小时来解决这个问题，并找到了一些答案，但是目前为止没有一个能够解决我的问题（AngularJs ReferenceError: angular is not defined）。由于某种原因，我似乎无法让我的应用程序使用 Angular.JS。在添加所需的 js 文件后，我的主要文件看起来像这样：

    <!DOCTYPE html>
    <html ng-app="AppName">
  <head>
    <title></title>

    <link rel="stylesheet" href="/stylesheets/main.css">

  </head>
  <body>
    <!-- Wrapper-->
    <div id="wrapper">

      <div id="page-content-wrapper">

        <div class="page-content inset" ng-view>
        </div>

      </div>
    </div>
    <!-- /WRAPPER-->

    <!-- ANGULAR CUSTOM -->
    <script src="libs/angular/angular.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="javascripts/AngularApp.js"></script>
    <script src="javascripts/appRoutes.js"></script>
    <script src="javascripts/controllers/MainCtrl.js"></script>
    <script src="javascripts/controllers/SettingsCtrl.js"></script>
    <script src="javascripts/services/SettingsService.js"></script>

  </body>
</html>

当我运行该应用程序时，它似乎永远无法完成加载（请参见图像：http://imgur.com/FIAH4tH），然后崩溃。在Firefox中，我收到以下错误：http://imgur.com/UT3g7wY 有人知道我如何解决这个问题吗？

--编辑-- 我已经更新了应用程序中脚本的位置。

我的AngularApp.js文件如下：

angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);

- user3753098

1

将 Angular 脚本移到顶部时是否会抛出任何错误？（你绝对应该这样做，试图首先加载控制器根本就没有意义。考虑使用构建工具并连接你的脚本） - Wottensprels

将libs文件移到顶部后，我仍然面临页面无法加载（持续处理）的相同问题。过了一会儿，Firefox向我抛出了这个：imgur.com/bjTQJvn - user3753098

3个回答

3

一定要在你自己的自定义代码之前包含任何 libs/ 文件。
所以在其它 JavaScript 文件之前加入 <script src="libs/angular/angular.js"></script> 和 <script src="libs/angular-route/angular-route.min.js"></script>，你应该会发现问题得到解决。

- Chris Southam

将libs文件移到顶部后，我仍然面临着页面无法加载（持续处理中）的相同问题。过了一会儿，Firefox向我抛出了这个：http://imgur.com/bjTQJvn - user3753098

0

我曾经遇到过同样的问题。在HTML的<head>标签中声明Angular脚本标签对我有用。因此：

<!doctype html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>AngularJS tryout</title>
        <script src="../../node_modules/angular/angular.js"></script>
    </head>
    <body>
        <h1>AngularJS tryout</h1>
        <p>Nothing here so {{ 'far' + '!' }}</p>
    </body>
</html>

- malvadao

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

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

- Josh C. · Accepted Answer

如果您的模块AppName定义在AngularApp.js中，则需要将其放在MainCtrl js之前。

您的.js文件是否是单独的angular模块？如果是，它们不应该被列为您的angular.module依赖项中的模块。 angular.module('AppName', ['ngRoute']);