AngularJS,我的第一个html组件" widget"

时间:2016-09-26 08:45:50

标签: javascript angularjs yeoman

我用自耕农生成了我的第一个AngularJS应用程序 https://github.com/yeoman/generator-angular

我创建了我的第一条路线,目前正在努力解决在指令上写的内容以及控制器上的内容,如何在我从POST或PUT接收到的APIService中指定JSON消息(我已准备好后端).. < / p>

我和yeoman一起创建了一项新服务并尝试扩展代码,但我收到了错误:无法读取属性&#39;然后&#39;未定义的。该服务中的代码是:

angular.module('baApp').service('myService', function ($http, $q) {

this.getTiers = function(){
    $http.get('/data/tiers.json').success(function (data) {
        console.log('$http tiers');
        console.log(data);
    });
};
this.getCapabilities = function(){
    $http.get('/data/capabilities.json').success(function (data) {
        console.log('$http capabilities');
        console.log(data);
    });
};

return this;
});

这是控制器中的代码:

angular.module('baApp')
    .controller('MyappCtrl', function ($scope, myService) {

    myService.getTiers().then(function(res){
    $scope.tiers = res;
        console.log('Tiers');
        console.log(res);
    });

    myService.getCapabilities().then(function(res){
        $scope.capabilities = res;
        console.log('Capabilities');
        console.log(capabilities);
    });

});

1 个答案:

答案 0 :(得分:1)

@Micky,

这可能会对您有所帮助jsfiddle

我添加了一些示例代码但是如果你需要api中的一些虚拟数据,那么你可以使用json来模拟api响应。

所以这是示例代码

var app = angular.module('myApp', []);
app.controller('ctrl',function($scope, myService){
myService.getData().then(function(res){
  $scope.data = res;
});
});
//service here
app.service('myService', function($http, $q){
var responseJson = {'message':'welcome to angular'}
this.getData = function(){
// call api or json file
// like
//return $http.get('api url or /test.json').

// fake response here
var deferred = $q.defer();
deferred.resolve(responseJson);
return deferred.promise;
}
return this;
});