"ReferenceError:角度未定义“;之前已成功使用的代码

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

本文关键字：成功 代码 ReferenceError quot 未定义      更新时间：2023-09-26

我得到"ReferenceError:angular is not defined"。有趣的是，我从我制作的另一个正在运行的网络应用程序中复制了我的应用程序的结构，到目前为止只是更改了名称，我不知道我可能更改了什么，这会引起麻烦。

我仔细检查了脚本标记的顺序，并尝试了我找到的所有其他解决方案，但到目前为止都没有成功。

这是我的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>

我的模块和app.js:中的MainCtrl

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

您是否尝试过将脚本从<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会得到正确的响应吗？

尝试将脚本移动到身体底部。

加载angular.min.js后，angular遍历DOM并引导ng应用程序。在这种情况下，当angular遍历dom时，您的dom是空的。

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

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

相关文章：