Skip to main content
 首页 » 编程设计

javascript之AngularJS 应用程序不再工作

2025年05月04日92mfryf

我只是注意到我的 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

我的代码:(我不知道什么是重要的，因为我不知道错误来自哪里，所以我只发布索引、模块和示例 Controller )

索引.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>

应用程序.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, 
        } 
    }); 
}]);

请您参考如下方法:

在 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


  文章来源：
  https://www.itguest.com/post/ajjfbcf2b1.html
阅读延展