Question

我刚刚注意到我的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.

但该应用程序适用于我尝试过的所有其他浏览器，因此问题似乎不是语法错误或类似的东西。

以下是我的测试页面的链接，如果您想要实时查看它：http://zoiglapp.bplaced.net

我的代码:(我不知道什么是重要的，因为我不知道错误的来源，所以我只是发布索引，模块和样本控制器）

的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>

app.js

var app = angular.module('ZoiglApp', ['ngAnimate', 'ui.bootstrap', 'ngRoute', 'leaflet-directive']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/home', {
        controller: 'HomeController',
        templateUrl: 'views/home.html'
    })
    .when('/help', {
        controller: 'HelpController',
        templateUrl: 'views/help.html'
    })
    .when('/list', {
        controller: 'ListController',
        templateUrl: 'views/list.html'
    })
    .when('/map', {
        controller: 'MapController',
        templateUrl: 'views/map.html'
    })
    .when('/calendar/:dt', {
        controller: 'CalendarController',
        templateUrl: 'views/calendar.html'
    })
    .when('/date/:dt', {
        controller: 'DateController',
        templateUrl: 'views/date.html'
    })
    .when('/types/:zoiglType', {
        controller: 'TypesController',
        templateUrl: 'views/types.html'
    })
    .otherwise({
        redirectTo: '/home'
    });
});

MapController.js（使用传单）

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

Answer 1

在Leaflet指令文档/演示中，了解如何将其添加到项目中：

http://tombatossals.github.io/angular-leaflet-directive/#!/

<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>

文件不应直接从原始github源（如CDN）添加到项目中，因为浏览器无法将它们识别为正确的MIME类型。在上面的示例中，您可以看到cdn.leafletjs.com和ajax.googleapis.com都配置为远程提供文件，github不是。

如果您不想手动将各种来源的库下载到服务器，请尝试使用bower来管理所有依赖项。你的Leaflet directive正在使用凉亭： http://bower.io/search/?q=leaflet%20directive

此外，您可以使用rawgit.com，它将重新托管github文件，以便您可以远程导入它们。查看相关帖子： Link and execute external JavaScript file hosted on GitHub

Answer 2

您的宣传单脚本未加载：

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代码，请下载他们的脚本，将其上传到您的网站，然后从那里提供服务。

AngularJS App不再工作了

2 个答案: