ng-view ne montre pas la carte

J'ai des problèmes pour afficher mon html routé dans index.html. Je suis nouveau à angulaire J'ai essayé plusieurs approches pour afficher la carte. Finalement, je veux interagir avec la carte et mettre des pointeurs dessus, mais j'ai besoin de savoir comment l'afficher en premier. De plus, la console n'imprime rien alors je ne sais pas ce qui se passe.ng-view ne montre pas la carte

Répertoire

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>

Source

2017-05-18 Jason Trieu

Si vous utilisez l'annotation en ligne, alors vous devez joindre vos dépendances de configuration et fonction dans []:

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

autrement, comme vous l'avez fait au contrôleur:

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

Source

2017-05-18 11:44:09 neptune

J'ai ajouté la parenthèse mais elle ne fonctionne toujours pas –

J'ai ajouté des console.logs avant, à l'intérieur et après le contrôleur dans home.js et celui à l'intérieur n'apparaît pas. Pensées? –

La config est exécutée pour moi. Voir ici: https://codepen.io/neptune01/pen/LygQQR – neptune

ng-view ne montre pas la carte

Répondre

Questions connexes