javascript - AngularJS 应用程序不再工作-6ren

javascript - AngularJS 应用程序不再工作

转载作者：行者123 更新时间：2023-12-03 17:18:36

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

关于javascript - AngularJS 应用程序不再工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33693283/

文章推荐：在日历中添加提醒时出现android.database.sqlite.SQLiteException

文章推荐： sqlite - 无法在 mac osx 上更新 sqlite3？

android - 未能加载属性文件...不再 :(
我最近更新了 ADT 插件，我的整个 Eclipse-Android 构建系统都停止工作了。从那以后，我尝试了我在互联网上可以找到的所有关于如何解决这个问题的方法。徒然。如果有人有确定的方法来解决此问
iOS - 应用程序可以在设备上运行但不能在模拟器上运行(不再)
我已经知道有类似的话题，但对我来说没有任何帮助...... 这里是信息: 该应用程序始终在模拟器和设备上运行。我最近将该项目重命名为另一个名称。仍然工作得很好。今天我意识到它没有更改文件夹名称，然后它
macos - Homebrew 不再 brew
在装有El Capitan的MacMini上，我无法再进行冲泡了。我收到以下错误: /usr/local/Library/Homebrew/config.rb:34:in `initialize':
php - jQuery 昨天工作了。不再
是的，所以我不知道发生了什么。我一直在编写一个 AJAX 评论脚本，并且它可以工作，但它不再工作了。我从备份中恢复了它，以防万一我改变了任何东西，但没有运气。它转到表单的“操作”而不是 jQuery，
javascript - 如何使用代理来观察变量是否(不再)未定义
请原谅我的无能...我正在尝试在全局 var 阶段不再未定义后使用 Proxy 执行一些代码。这是我天真的尝试: ``` var stage = undefined let myObj; let st
ios - Segue 不工作(不再)？
我对 segues 了解不多，但我已经开始工作了..但突然间它不再工作了...... 我的代码似乎可以工作，但没有发生 segue: NSLog(@"login started"); if ([use
iis-7.5 - 重写规则不能正确过滤推荐垃圾邮件(不再)
我已将以下重写规则添加到我的 web.config 中。它运行良好，阻止了所有提及的推荐垃圾邮件站点。然而，今天我突然注意到 social-buttons.com 突然出现在我的 Google Ana
c++ - 弃用 static 关键字...不再？
在 C++ 中，可以在翻译单元中使用 static 关键字来影响符号(变量或函数声明)的可见性。在 n3092 中，这已被弃用: Annex D.2 [depr.static] The use of
firebase - 无法在 Firebase 应用中禁用 Crashlytics(不再)
升级到 com.crashlytics.sdk.android:crashlytics:2.7.1@aar 后(从 2.6.8 开始)，我无法再在 Firebase 应用中禁用 Crashlytics
swift - 运动摇动 Action 不再 swift 起作用
您好，我遇到了一些障碍，我一直在为我的应用程序重新设计菜单导航。我设法做到了。但现在我的应用程序的一项功能已决定停止运行。想法是你摇动你的手机，它会随机选择一张图片，与应用程序分开的代码工作正常，就
html - CSS:带有空格的 Flexbox 无法正常工作(不再)
我有一行(容器)包含三个元素，我想水平显示它们之间的间距相等(并且行的左侧或右侧没有空格)。我正在使用带有 justify-content:space-between 的 flexbox。这是在 F
python - 无法通过 pip 安装 tensorflow(不再)
直到最近，我才能够在 Windows 上使用 python 3.6.7 时安装 tensorflow 1.5.0 包。现在我不能，从下面的“来自版本”的消息来看，似乎根本没有可用的 tensorflo
android - 无法在 Android Studio 中将行间距设置为 '1'(不再？)
不确定是否与最近的更新有关，但我突然无法在 Android Studio 编辑器中获得单行间距。如果我尝试将它更改为 1，它让我设置它，但当我按下“应用”时，它会迅速恢复为 1.5。用不同的字体试过，
python - 在 macOS 上安装 pip 不起作用(不再)
我遵循了有关如何在 macOS 上安装 pip 的在线说明(例如 this、this 和 this)。我看起来很简单，但它不适合我。我的 python --version 是 2.7.10。当我
java - 哦，不，不再 - 比较两碗矮牵牛 - 对不起 - 漂浮，为了平等
Due to rounding errors, most floating-point numbers end up being slightly imprecise. https://www.flo
android - MVVMCross PictureChooser 插件在 Android 上(不再)工作
我试图让用户从他们在 Android 上的库中选择一张图片。但是当我使用 PictureChooser 插件时，它似乎不再起作用了我看到这段代码可以工作，但现在不行了，我也不知道为什么。
c# - 为什么 Exception.HResult 的 getter 不再 protected ？
自 .NET 4.5 起，Exception.HResult 的 setter/getter 现在是 public，但它曾经是 protected。来自 MSDN: Starting with th
python - Google Appengine 标准 Python 2.7 : Can't run Google Endpoints on localhost dev_appserver. py 不再
今天去处理一个较旧的 Python2.7 AppEngine 标准项目，但我似乎无法让端点工作。我下载了示例代码，看看我的项目是否是罪魁祸首，但该示例也不起作用。 https://cloud.goog

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - AngularJS 应用程序不再工作