Question

我得到＆＃34; ReferenceError：angular未定义＆＃34;。有趣的是，我从我制作的另一个正在运行的Web应用程序中复制了我的应用程序的结构，并且到目前为止只更改了名称，我不知道我可能已经改变了什么导致了麻烦。

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

这是我的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
    };
}]);

Answer 1

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

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

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

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

Answer 2

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

<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得到了正确的回复？

＆＃34; ReferenceError：未定义角度＆＃34;使用已成功使用的代码

2 个答案: