角度1.6應用程序中的注入服務

Question

我對學習角度感興趣，它變得如此流行，似乎有必要對它有所了解。

我遇到了一個問題，我在angular 1.0.x中做了一個Little應用程序，但是為了擴展我對angular的了解，我決定在代碼中增加功能和復雜性。

閱讀一些博客后，我修改了我的應用程序並將其更新為angular 1.6。 因此，我正在嘗試使用一種向我提供數據的服務，直到現在數據都是固定的json，這使我可以處理幾個對象並在屏幕上顯示它們。 但是我有一些麻煩，我嘗試的代碼是下一個：

var app = angular.module('myApp', ['ngRoute']);
app.config(appConfig);
app.service('MyService', MyService);
app.controller('TestController', ['$http', TestController])

function appConfig($routeProvider, MyService) {
  $routeProvider.when('/', {
    templateUrl: './test.html',
    controller: 'TestController',
    controllerAs: 'my',
    resolve: {
      data: MyService.getData()
    }

  });
}

function TestController($http, MyService) {
  // some code
}


function MyService() {
  return {
    getData: getData
  }

  function getData() {
    var datos = [ << valid json >> ];
    return datos;
  }
}

但是似乎我注入了錯誤的服務，它說我的服務是未知的。

如果我退出對它起作用的服務的引用，則我不得不以其他方式分配數據，但是在沒有該服務的情況下它仍然起作用。 我認為我已經按照閱讀的教程完成了所有工作，但是很明顯這是有問題的，只要我無法識別，顯然我需要有人來解釋我的角度注射基礎知識。 因此，我有一個問題：如何注入服務？ 我究竟做錯了什么？ 為什么我的代碼無法正常工作？

Answer 1

將MyService注入到控制器而不是TestController

app.controller('TestController', ['$http', 'MyService'])

同樣，您實現的是工廠而不是服務。 所以改變它

app.factory('MyService', MyService);

Answer 2

您需要定義一個Angular工廠。

angular.module('myApp', [])

.factory('MyService', function () {
    return {
        getData: getData
      }

      function getData() {
        var datos = [ << valid json >> ];
        return datos;
      }
}

Answer 3

控制器的注解有誤，沒有'MyService' ，導致未定義的MyService參數。

對於命名函數，最好使用$inject注解而不是內聯數組（請參見John Papa樣式指南 ），主要是因為它允許在函數簽名上方進行注解並避免錯誤：

app.controller('TestController', TestController)

TestController.$inject = ['$http', 'MyService'];
function TestController($http, MyService) {...}

這不是一個很大的問題是為MyService service ，而不是factory ，因為回報是允許在構造函數，但factory是，如果更適合this不被使用。 factory只是更快，在這里是合理的選擇。

Answer 4

終於成功了，現在的代碼如下：

var app = angular.module('myApp',['ngRoute']);
app.provider('myProvider', function myProvider(){
    this.$get=function(){
        return new mFactory();
    }
});

app.controller('TestController', TestController);
app.config(appConfig);
TestController.$inject = ['$http', 'myProvider'];

function appConfig($routeProvider){
     $routeProvider.when('/', {     
         templateUrl: './test.html',
         controller: 'TestController',
         controllerAs: 'my'
    });
}
function mFactory(){
    return{
        getData:function(){
            return mydata();//returns some valid json 
        }
    }
}

我很難理解提供程序是什么，但是現在我知道提供程序有工廠，每個工廠都返回服務產生的集合。 一旦我了解到，一切都會變得更加容易。 謝謝大家的回答，每個人都幫助我找到了小實驗的解決方案。 知道有人渴望幫助，感覺很好。 問候