ng-view zeigt keine Karte

Ich habe Probleme, meine geroutete HTML in index.html anzuzeigen. Ich bin neu im eckigen Bereich Ich habe verschiedene Ansätze zur Anzeige der Karte ausprobiert. Irgendwann möchte ich mit der Karte interagieren und darauf hinweisen, aber ich muss wissen, wie ich sie zuerst anzeigen soll. Auch die Konsole druckt nichts, so dass ich nicht weiß, was passiert.ng-view zeigt keine Karte

Verzeichnis

RestuarantRouter 
--client 
----controllers 
------home.js 
----vendors 
------angular-google-maps.min.js 
------angular-messages.js 
------angular-route.js 
------angular.js 
----views 
------home.html 
----app.js 
----index.html

index.html

<!doctype html> 
<html ng-app="RestaurantRouter"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>RestaurantRouter</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css"> 
    <link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css"> 
    <link rel="stylesheet" href="css/styles.css"> 

</head> 
<body> 

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <a href="/" class="navbar-brand"><i class="ion-wineglass"></i> Restaurant Router</a> 
     <li><a href="#/">Home</a></li> 
    </ul> 
    </div> 
</div> 

<div ng-view></div> 
<script src="vendors/angular.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=myKey-8&libraries=places"></script> 
<script src="vendors/angular-route.js"></script> 
<script src="vendors/angular-messages.js"></script> 
<script src="app.js"></script> 
<script src="controllers/home.js"></script> 

</body> 
</html>

home.js

angular.module('RestaurantRouter', []) 
    .controller('HomeCtrl', function ($scope) { 
    var mapOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(40.0000, -98.0000), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    $scope.map = new google.map.Map(document.getElementById('map'), mapOptions); 
    });

app.js

angular.module('RestaurantRouter', ['ngRoute', 'ngMessages']) 
    .config('$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeCtrl' 
     }) 
     .otherwise({ redirectTo: '/'}); 
    });

home.html

<div class="container"> 
    <div class="jumbotron"> 
     <h1>Hello</h1> 
     <div id="map">{{name}}</div> 
    </div> 
    </div>

Quelle

2017-05-18 Jason Trieu

Wenn Sie Inline-Anmerkung verwenden, dann müssen Sie Ihre Konfigurationsabhängigkeiten und Funktion in [] einschließen:

.config(['$routeProvider', function ($routeProvider) { 
     console.log('çonfig'); 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home.html', 
       controller: 'HomeCtrl' 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    }])

sonst, wie Sie bei der Steuerung hat:

.config(function ($routeProvider) { 
     console.log('çonfig'); 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home.html', 
       controller: 'HomeCtrl' 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    })

Quelle

2017-05-18 11:44:09 neptune

Ich habe die Klammer hinzugefügt, aber es funktioniert immer noch nicht –

Ich habe einige console.logs vor, innerhalb und nach dem Controller in home.js hinzugefügt und der eine im Inneren wird nicht angezeigt. Gedanken? –

Die Konfiguration wird für mich ausgeführt. Siehe hier: https://codepen.io/neptune01/pen/LygQQR – neptune

ng-view zeigt keine Karte

Antwort

Verwandte Themen