yeoman angular 未呈现视图
yeoman angular not rendering views
所以,我一直在尝试使用 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 错误,没有服务器端错误,在我添加我的 controller/service 之前视图呈现完美(两者都是用 yeoman 命令行生成器添加的)。
所以,按照 Byron Sommardahl 所说的,发现问题出在我创建服务时,特别是这一行:
angular.module('graphMeDota2App', [])
.service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
我唯一做的就是删除第一行中的第一个“[]”,然后它开始工作了。想知道为什么会这样吗?
angular.module('graphMeDota2App')
.service('MatchesService', ['$http', 'config', function ($http, config) {
所以,我一直在尝试使用 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 错误,没有服务器端错误,在我添加我的 controller/service 之前视图呈现完美(两者都是用 yeoman 命令行生成器添加的)。
所以,按照 Byron Sommardahl 所说的,发现问题出在我创建服务时,特别是这一行:
angular.module('graphMeDota2App', [])
.service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
我唯一做的就是删除第一行中的第一个“[]”,然后它开始工作了。想知道为什么会这样吗?
angular.module('graphMeDota2App')
.service('MatchesService', ['$http', 'config', function ($http, config) {