yeoman angular 不渲染视图答案

【问题标题】：yeoman angular not rendering viewsyeoman angular 不渲染视图
【发布时间】：2015-06-28 02:24:32
【问题描述】：

所以，我一直在尝试使用 Yeoman 的官方 angular gen 和 this hapijs generator 为后端设置一个应用程序。现在，到目前为止，在后端，我只有为 index.html 提供服务的主路由，如您在此处看到的

  server.route({
    method: "GET",
      path: "/{param*}",
      handler: {
        directory: {
          path: ["../../client/app", "../../client/bower_components"]
        }
      },
      config: {
      auth: false
    }
  });

  next();
};

exports.register.attributes = {
  name: 'index'
};

事情是这样的，直到我尝试向 Angular 应用程序添加新服务、控制器和视图，当我这样做时，视图停止渲染。

这里的服务：

angular.module('graphMeDota2App', [])
  .service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    return {
        GetAllMatches: function(){
            return $httpq.get(config.steamApiBaseUrl + 'IDOTA2Match_570/GetMatchHistory/v001/?key' + config.steamApiKey + '&accountId' + config.steamAccountId + '&matches_requested=5');
        }
    };
  }]);

这是控制器：

angular.module('graphMeDota2App')
  .controller('MatchesCtrl', ['MatchesService', function ($scope, MatchesService) {
        $scope.matches = {};

        $scope.getMatches = function(){
            MatchesService.GetAllMatches().done(function(response){
                $scope.matches = response.data;
            });
        };

        $scope.getHeroPlayed = function(match){
            console.log(match);
            return 'asdfasdf';
        };
  }]);

这里是视图：

<div class="jumbotron">
  <table>
    <tr>
      <th>Number</th>
      <th>Match Id</th>
    </tr>
    <tr ng-repeat="match in matches">
      <th>{{$index}}</th>
      <th>{{match.match_id}}</th>
    </tr>
  </table>
</div>

这是我的 app.js：

angular
  .module('graphMeDota2App', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .when('/matches', {
        templateUrl: 'views/matches.html',
        controller: 'MatchesCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

最后，this is what I get: 。

在我添加控制器/服务之前，没有 javascript 错误，没有服务器端错误，并且视图呈现完美（均使用 yeoman 命令行生成器添加）。

【问题讨论】：

如果您退后几步尝试一次添加一项，一次检查浏览器一项，会发生什么？
你在 MatchesCtrl 中忘记了 $scope
Lil' 迟到的回应，但是是的。后来我遇到了那个错误。谢谢！

标签： javascript angularjs yeoman hapijs

【解决方案1】：

所以，按照 Byron Sommardahl 的说法，我发现问题出在我创建服务时，特别是这一行：

angular.module('graphMeDota2App', [])
  .service('MatchesService', ['$httpq', 'config', function ($httpq, config) {

我唯一做的就是删除第一行中的第一个“[]”，然后它就开始工作了。对为什么会发生这种情况有任何想法吗？

angular.module('graphMeDota2App')
      .service('MatchesService', ['$http', 'config', function ($http, config) {

【讨论】：