Question

我在index.html中显示路由的html时遇到问题。我是角色的新手，我一直在尝试几种方法来显示地图。最终我想与地图交互并在其上添加指针，但我需要知道如何首先显示它。控制台也没有打印任何东西，所以我不知道发生了什么。

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>

Answer 1

如果使用内联注释，则必须在[]中包含配置依赖项和函数：

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

否则，就像你在控制器那样做了：

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

ng-view未显示地图

1 个答案: