无法实例化模块custFormApp - AngularJS

时间:2017-02-26 02:54:19

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

我现在已经让这个头疼了一段时间。已经搜索了一些问题,但似乎没有相关的问题: -

    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文件,所以没有加载天气的问题。请帮助!!

1 个答案:

答案 0 :(得分:0)

nemLogging模块丢失了。 可能由uiGmapgoogle-maps使用。

我的猜测是你错过了这个第三方模块的一些依赖关系js。再看一下文档。