0

私はangular.js 1.5のためにこのboilerplateを使用しています。私は新しいanglejs sintaxで動作していないし、HTTP要求のために$httpを使用して注入する方法を忘れています。

これまでは古いanglejsサービス(MyService)を使用していましたが、$ httpを注入してコントローラMyService.getData()を呼び出しましたが、この新しい構文ではサービスを作成して内部に挿入する方法が失われていますそれは$ httpを使用して、そのサービスをコンポーネントで使用します。

これはどのように見えるかのモジュールファイルquestions.jsです:

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import questionsComponent from './questions.component'; 

    let questionsModule = angular.module('questions', [ 
     uiRouter 
    ]) 
    .component('questions', questionsComponent) 
    .name; 

    export default questionsModule; 

questions.component.js

import template from './questions.html'; 
import controller from './questions.controller'; 
import './questions.scss'; 
let questionsComponent = { 
    bindings: {}, 
    template, 
    controller 
}; 

export default questionsComponent; 

そして最後にquestions.controller.js

class QuestionsController { 
    constructor() { 
    this.name = 'questions'; 
    } 

    $onInit() { 
    console.log("$onInit") 
    } 

    $onDestroy() { 
    console.log("$onDestroy") 
    } 
} 

export default QuestionsController; 

答えて

2

[OK]をは最終的にそれが働いてしまいました:

モジュールにおいて

class QuestionsController { 
    static $inject = ['HttpService'] 

    constructor(HttpService) { 
    this.name = 'questions'; 
    this.service = HttpService; 
    } 

    $onInit() { 
    console.log("$onInit") 
    this.service.getResults(); 
    } 

    $onDestroy() { 
    console.log("$onDestroy") 
    } 
} 
export default QuestionsController; 

:コントローラで

import angular from 'angular'; 

class HttpService { 
    static $inject = ['$http','$q'] 

    constructor($http, $q) { 
    this.$http = $http; 
    this.$q = $q; 
    } 

    getResults() { 
    console.log("getResults()") 
    //return this.$http.get('/foo/bar/'); 
    this.$http.get("https://www.reddit.com/r/photoshopbattles/comments/6kl24d/psbattle_bat_carrying_baby.json") 
     .then(function(response) { 
     console.log("response", response) 
     }); 
    } 
} 


export default HttpService; 

let questionsModule = angular.module('questions', [ 
    uiRouter, 
    User 
]) 
    .service('HttpService', HttpService) 
    .component('questions', questionsComponent) 
    .name; 

export default questionsModule; 
関連する問題