【问题标题】:Failed to instantiate module custFormApp - AngularJS无法实例化模块 custFormApp - AngularJS
【发布时间】:2017-02-26 02:54:19
【问题描述】:

我现在遇到这个令人头疼的错误有一段时间了。已经搜索了一些问题,但似乎没有一个是相关的:-

    Uncaught Error: [$injector:modulerr] Failed to instantiate module custFormApp due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.parent due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.models.child due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.directives.api.utils due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.extensions due to:
    Error: [$injector:modulerr] Failed to instantiate module uiGmapgoogle-maps.providers due to:
    Error: [$injector:modulerr] Failed to instantiate module nemLogging due to:
    Error: [$injector:nomod] Module 'nemLogging' 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://errors.angularjs.org/1.3.15/$injector/nomod?p0=nemLogging
        at http://localhost:4422/Scripts/angular.js:63:12
        at http://localhost:4422/Scripts/angular.js:1774:17
        at ensure (http://localhost:4422/Scripts/angular.js:1698:38)
        at module (http://localhost:4422/Scripts/angular.js:1772:14)
        at http://localhost:4422/Scripts/angular.js:4115:22
        at forEach (http://localhost:4422/Scripts/angular.js:323:20)
        at loadModules (http://localhost:4422/Scripts/angular.js:4099:5)
        at http://localhost:4422/Scripts/angular.js:4116:40
        at forEach (http://localhost:4422/Scripts/angular.js:323:20)
        at loadModules (http://localhost:4422/Scripts/angular.js:4099:5)
    http://errors.angularjs.org/1.3.15/$injector/modulerr?

<!--- some 80-100 lines here then again -->

at http://localhost:4422/Scripts/angular.js:63:12
    at http://localhost:4422/Scripts/angular.js:4138:15
    at forEach (http://localhost:4422/Scripts/angular.js:323:20)
    at loadModules (http://localhost:4422/Scripts/angular.js:4099:5)
    at createInjector (http://localhost:4422/Scripts/angular.js:4025:11)
    at doBootstrap (http://localhost:4422/Scripts/angular.js:1452:20)
    at bootstrap (http://localhost:4422/Scripts/angular.js:1473:12)
    at angularInit (http://localhost:4422/Scripts/angular.js:1367:5)
    at HTMLDocument.<anonymous> (http://localhost:4422/Scripts/angular.js:26304:5)
    at fire (http://localhost:4422/Scripts/jquery-1.10.2.js:3062:30)

我不明白是什么导致了错误。以下是我的代码:-

angular.module('custFormApp', ['uiGmapgoogle-maps'])    
        .controller('mapsController', function($scope, $http)   
        {  
            //this is default coordinates for the map when it loads for first time  
            $scope.map =   
              {  
                  center:   
                  {  
                      latitude: 17.406278,  
                      longitude: 78.469060  
                  },  
                  zoom: 16  
              }  
            $scope.markers = [];  
            $scope.locations = [];  
            //to get all the locations from the server  
            $http.get('/home/GetAllLocation').then(function(data)  
            {  
                $scope.locations = data.data;  
            }, function()  
            {  
                alert('Error');  
            });  
            //service that gets makers info from server  
            $scope.ShowLocation = function(locationID)  
            {  
                $http.get('/home/GetMarkerData',  
                {  
                    params:  
                    {  
                        locationID: locationID  
                    }  
                }).then(function(data)  
                {  
                    $scope.markers = [];  
                    $scope.markers.push  
                    ({  
                        id: data.data.LocationID,  
                        coords:  
                        {  
                            latitude: data.data.Lat,  
                            longitude: data.data.Long  
                        },  
                        title: data.data.title, //title of the makers  
                        address: data.data.Address, //Address of the makers  
                        image: data.data.ImagePath //image --optional  
                    });  
                    //set map focus to center  
                    $scope.map.center.latitude = data.data.Lat;  
                    $scope.map.center.longitude = data.data.Long;  
                }, function()  
                {  
                    alert('Error'); //shows error if connection lost or error occurs  
                });  
            }  
            //Show or Hide marker on map using options passes here  
            $scope.windowOptions =  
              {  
                  show: true  
              };  
        }) 
        //mapsController Ends Here
<style>
    input {
        padding: 5px;
        border: 1px solid #A5A5A5;
    }

        input.ng-dirty.ng-invalid {
            border: 1px solid red;
            background-color: rgb(255, 244, 244);
        }

    .error {
        color: red;
    }

    .angular-google-map-container {
        height: 300px;
        box-shadow: 2px 2px 3px 3px lightgrey;
    }

    .angular-google-map {
        width: 80%;
        height: 100%;
        margin: auto 0px;
    }
</style>

<div class="container">
    <div ng-app="custFormApp">

       
        <!--Div for mapsController Upload Started-->
        <div class="col-md-12">
            <div ng-controller="mapsController">
                <!--It displays the markers links-->
                <div class="locations">
                    <ul>
                        <li ng-repeat="l in locations" ng-click="ShowLocation(l.LocationID)"><a href="#">{{l.Title}}</a></li>
                    </ul>
                </div>
                <div class="maps">
                    <!-- Add directive code (gmap directive) for show map and markers-->
                    <ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey" center="map.center" zoom="map.zoom">
                        <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
                            <ui-gmap-window options="windowOptions" show="windowOptions.show">
                                <div style="max-width:200px">
                                    <div class="header"><strong>{{marker.title}}</strong></div>
                                    <div id="mapcontent">
                                        <p>
                                            <img ng-src="{{marker.image}}" style="width:200px; height:100px" />
                                            <div>{{marker.address}}</div>
                                        </p>
                                    </div>
                                </div>
                            </ui-gmap-window>
                        </ui-gmap-marker>
                    </ui-gmap-google-map>
                </div>
            </div>
        </div>
        <!--Div for mapsController Upload Ended-->

        <div class="clearfix"></div>
    </div>
</div>

@section Scripts{
    @* AngularJS library *@
    @*<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>*@
    @* google map*@
    <script src="~/Scripts/lodash.min.js"></script>
    <script src="~/Scripts/angular-google-maps.min.js"></script>
    <script src="~/AngularFiles/CustForm.js"></script>
  
}

我已经在我的布局中上传了 angular.js 文件,所以毫无疑问它没有加载。请帮忙!!

【问题讨论】:

    标签: javascript html asp.net angularjs asp.net-mvc


    【解决方案1】:

    nemLogging 模块丢失。 可能是uiGmapgoogle-maps使用的。

    我的猜测是您缺少此第三方模块的一些依赖项 js。再看文档。

    【讨论】:

    • 是的,但它在 angular-google-maps-street-view.js 文件中可用。我也尝试过包含它。但什么也没发生。
    • 我明白了。我将脚本标签更改为从 CDN 加载。这一切都开始起作用了。谢谢
    猜你喜欢
    • 2014-05-30
    • 2014-06-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-28
    • 1970-01-01
    • 1970-01-01
    • 2015-10-20
    相关资源
    最近更新 更多