AngularJS应用程序不再工作

AngularJS App not working anymore

本文关键字：工作 不再 应用程序 AngularJS      更新时间：2023-09-26

我刚刚注意到，自从我添加了传单指令后，我的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,
        }
    });
}]);

在传单指令文档/演示中，查看如何将其添加到您的项目中：

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在bower上：http://bower.io/search/?q=leaflet%20directive

此外，您还可以使用rawgit.com，它将重新托管github文件，以便您可以远程导入它们。查看相关岗位：链接并执行托管在GitHub 上的外部JavaScript文件

您的传单脚本未加载：

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代码，那么下载他们的脚本，上传到你的服务器，然后从那里提供。

相关文章：