"ReferenceError: angular is not defined" with code that was already used before successfully

Question

我得到 "ReferenceError: angular is not defined"。有趣的是，我从我制作的另一个可用的 Webapp 复制了我的应用程序的结构，到目前为止只是更改了名称，我不知道我可能更改了什么导致了现在的麻烦。

我仔细检查了脚本标签的顺序并尝试了我找到的所有其他解决方案，但到目前为止没有任何效果。

这是我的 HTML:

<!DOCTYPE html>
<html lang="de" ng-app="VetCare">
<head>
    <title>Vet &amp; Care Webapp</title>
    <meta charset="utf-8">
    <meta name="robots" content="noindex,nofollow">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="Vet & Care">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
</head>
<body>

<div id="content" ng-controller="MainCtrl" ng-init="redirect()">
    <div ng-view autoscroll="true"></div>
</div>

<script src="js/app.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>

</body>
</html>

我的模块和 MainCtrl 在 app.js:

var app = angular.module('VetCare', ['ngCookies', 'ngRoute', 'ngAnimate', 'ui.bootstrap']);

app.controller('MainCtrl', ['$scope', '$cookies', '$window', function($scope, $cookies, $window) {

    $scope.redirect = function () {
        //some code
    };
}]);

Answer 1

尝试将您的脚本移动到 body 的底部。

加载 angular.min.js 时，angular 遍历 DOM 并引导 ng-app。在这种情况下，当 angular 走过你的 DOM 时，你的 dom 是空的。

通过将您的脚本放在 body 块的底部，angular 将遍历 DOM 并在 DOM 准备就绪时引导应用程序。

它还将通过在下载 JS 文件时呈现页面来优化网页的加载。

Answer 2

您是否尝试将脚本从 <head> 移动到 body 末尾的 app.js 之上？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="js/app.js"></script>
</body>

如果这没有帮助，您是否通过在开发人员工具的网络选项卡中加载 angular.min.js 获得正确的响应？

"ReferenceError: angular is not defined" with code that was already used before successfully

"ReferenceError: angular is not defined" with code that was already used before successfully

javascript

referenceerror

angularjs