Javascript AngularJS应用程序不再工作_Javascript_Angularjs

Javascript AngularJS应用程序不再工作

javascript angularjs

Javascript AngularJS应用程序不再工作,javascript,angularjs,Javascript,Angularjs,我只是注意到，自从我添加了传单指令后，我的Angular Webapp就不再工作了。这是控制台上显示的错误消息： Uncaught Error: [$injector:modulerr] Failed to instantiate module ZoiglApp due to: Error: [$injector:modulerr] Failed to instantiate module leaflet-directive due to: Error: [$injector:nomod] Mo

我只是注意到，自从我添加了传单指令后，我的Angular Webapp就不再工作了。这是控制台上显示的错误消息：

Uncaught Error: [$injector:modulerr] Failed to instantiate module ZoiglApp due to:
Error: [$injector:modulerr] Failed to instantiate module leaflet-directive due to:
Error: [$injector:nomod] Module 'leaflet-directive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

但是这个应用程序在我尝试过的其他浏览器上都能运行，所以问题似乎不是语法错误或类似的问题

如果您想实时查看我的测试页面，请访问以下链接：

我的代码：（我不知道什么是重要的，因为我不知道错误来自哪里，所以我只发布索引、模块和示例控制器）

index.html

<!DOCTYPE html>
<html lang="de" ng-app="ZoiglApp">
<head>
    <title>Der Zoigl Kalender</title>
    <meta charset="utf-8">
    <!--KEYWORDS EINFÜGEN!!!!!!!!-->
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
    <!--FONTS-->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-codes.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-embedded.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-ie7-codes.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/fontello-ie7.css' rel='stylesheet' type='text/css'>
    <link href='/css/fontello/css/animation.css' rel='stylesheet' type='text/css'>
    <!--STYLESHEETS-->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <!--SCRIPTS-->
    <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.js"></script>
    <script src="//code.angularjs.org/1.0.8/i18n/angular-locale_de-de.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="//raw.githubusercontent.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js"></script>
</head>
<body>
<div id="wrapper">

    <!---Header--->
    <div id="header">
        <div id="logo" class="fullwidth">
            <a href="#home"><img src="images/logo.jpg"/></a>
        </div>
    </div>

    <!---Seiteninhalt--->
    <div id="content" class="container-fluid">
        <div ng-view></div>
    </div>

    <!---Footer Nav--->
    <div id="nav" class="fullwidth" ng-controller="MainController">
        <ul class="list-unstyled">
        <li><a href="#home"><span class="navicon"><i class="icon-home"></i></span>
            <span class="navdesc small">Home</span></a></li>
        <li><a href="#help"><span class="navicon"><i class="icon-help-circled"></i></span>
            <span class="navdesc small">Hilfe</span></a></li>
        <li><a href="#list"><span class="navicon"><i class="icon-list-bullet"></i></span>
            <span class="navdesc small">Lokale</span></a></li>
        <li><a href="#map"><span class="navicon"><i class="icon-location"></i></span>
            <span class="navdesc small">Orte</span></a></li>
        <li><a href="#calendar/{{dt | date : 'yyyy,MM,dd'}}"><span class="navicon"><i class="icon-calendar"></i></span>
            <span class="navdesc small">Daten</span></a></li>
        <li><a href="#types/0"><span class="navicon"><i class="icon-beer"></i></span>
            <span class="navdesc small">Typen</span></a></li>
        </ul>
    </div>
</div>

<!---- Javascript: ---->
<script src="js/style.js"></script>


<!----Modules---->
<script src="js/app.js"></script>

<!----Controllers---->
<script src="js/MainController.js"></script>
<script src="js/HomeController.js"></script>
<script src="js/HelpController.js"></script>
<script src="js/ListController.js"></script>
<script src="js/MapController.js"></script>
<script src="js/CalendarController.js"></script>
<script src="js/DateController.js"></script>
<script src="js/TypesController.js"></script>

<!----Services---->

<!----Directives---->

</body>
</html>

MapController.js（使用传单的地方）

未加载您的传单脚本：

Refused to execute script from 'http://raw.githubusercontent.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

GitHub不是CDN，如果您想使用某人的GitHub代码，请下载他们的脚本，上传到您的服务器，并从那里提供服务。

关于传单指令文档/演示，请参阅如何将其添加到您的项目中：

文件不应该直接从原始github源（如CDN）添加到项目中，因为浏览器很难将它们识别为正确的MIME类型。在上面的示例中，您可以看到

cdn.palejs.com

和

ajax.googleapis.com

都配置为远程提供文件服务，而github则不是

如果您不想手动将库从各种源下载到服务器，请尝试使用bower管理所有依赖项。您的

传单指令

在bower上：

您还可以使用，它将重新托管github文件，以便您可以远程导入它们。查看相关帖子：

谢谢。知道这一点真是太好了，我一直使用github链接（到目前为止似乎也很有效）@Linda你也可以使用rawgit.com重新托管github源代码，编辑我的帖子谢谢。知道这一点真是太好了，我总是使用github链接（到目前为止它似乎也能正常工作）

app.controller('MapController', ['$scope', function($scope) {
    angular.extend($scope, {
        center: {
            lat: 49.77,
            lng: 12.23,
            zoom: 11,
            autoDiscover: true,
        }
    });
}]);

Refused to execute script from 'http://raw.githubusercontent.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="/js/angular-leaflet-directive.min.js"></script>