sử dụng $ http bên trong nhà cung cấp tùy chỉnh trong cấu hình ứng dụng, angle.js

Question 1

Câu hỏi chính - là nó có thể? Tôi đã cố gắng nhưng không may mắn ..

app.js chính

...
var app = angular.module('myApp', ['services']);
app.config(['customProvider', function (customProvider) {

}]);
...

chính nhà cung cấp

var services = angular.module('services', []);
services.provider('custom', function ($http) {
});

Và tôi đã gặp lỗi như vậy:

Uncaught Error: Unknown provider: $http from services

Bất kỳ ý tưởng?

Cảm ơn!

Question 2

Điểm mấu chốt là:

Bạn KHÔNG THỂ đưa một dịch vụ vào phần cấu hình nhà cung cấp .
Bạn CÓ THỂ đưa một dịch vụ vào phần khởi tạo dịch vụ của nhà cung cấp .

Chi tiết:

Angular framework có quá trình khởi tạo 2 giai đoạn:

GIAI ĐOẠN 1: Cấu hình

Trong configgiai đoạn này, tất cả các trình cung cấp được khởi tạo và tất cả các configphần được thực thi. Các configphần có thể chứa mã định cấu hình các đối tượng trình cung cấp và do đó chúng có thể được đưa vào các đối tượng trình cung cấp. Tuy nhiên, vì nhà cung cấp là nhà máy cho các đối tượng dịch vụ và ở giai đoạn này, nhà cung cấp chưa được khởi tạo / cấu hình đầy đủ -> bạn không thể yêu cầu nhà cung cấp tạo dịch vụ cho bạn ở giai đoạn này -> ở giai đoạn cấu hình bạn không thể sử dụng / dịch vụ tiêm . Khi giai đoạn này hoàn thành, tất cả các nhà cung cấp đã sẵn sàng (không thể thực hiện thêm cấu hình nhà cung cấp nào sau khi giai đoạn cấu hình hoàn thành).

GIAI ĐOẠN 2: Chạy

Trong suốt rungiai đoạn, tất cả các runphần được thực hiện. Ở giai đoạn này, các nhà cung cấp đã sẵn sàng và có thể tạo ra các dịch vụ -> trong rungiai đoạn này, bạn có thể sử dụng / tiêm dịch vụ .

Ví dụ:

1. Tiêm `$http`dịch vụ vào chức năng khởi tạo trình cung cấp SẼ KHÔNG hoạt động

//ERRONEOUS
angular.module('myModule').provider('myProvider', function($http) {
    // SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
    ...

    this.$get = function() {
        // code to initialize/configure the SERVICE goes here (executed during `run` stage)

        return myService;
    };
});

Vì chúng tôi đang cố gắng đưa $httpdịch vụ vào một hàm được thực thi trong configgiai đoạn này, chúng tôi sẽ gặp lỗi:

Uncaught Error: Unknown provider: $http from services

Lỗi này thực sự nói lên rằng $httpProvidercái được sử dụng để tạo $httpdịch vụ vẫn chưa sẵn sàng (vì chúng tôi vẫn đang trong configgiai đoạn).

2. Đưa `$http`dịch vụ vào chức năng khởi tạo dịch vụ SẼ hoạt động:

//OK
angular.module('myModule').provider('myProvider', function() {
    // SECTION 1: code to initialize/configure the PROVIDER goes here (executed during `config` phase)
    ...

    this.$get = function($http) {
        // code to initialize/configure the SERVICE goes here (executed during `run` stage)

        return myService;
    };
});

Vì bây giờ chúng ta đang đưa dịch vụ vào hàm khởi tạo dịch vụ, hàm này được thực thi trong rungiai đoạn mã này sẽ hoạt động.

Question 3

Điều này có thể cung cấp cho bạn một chút đòn bẩy:

var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');

Nhưng hãy cẩn thận, các lệnh gọi lại thành công / lỗi có thể khiến bạn ở trong tình trạng chạy đua giữa khởi động ứng dụng và phản hồi của máy chủ.

Question 4

Đây là một câu hỏi cũ, có vẻ như chúng ta đang có một số vấn đề về quả trứng gà nếu chúng ta muốn dựa vào khả năng cốt lõi của thư viện.

Thay vì giải quyết vấn đề một cách cơ bản, những gì tôi đã làm là vượt qua. Tạo một chỉ thị bao bọc toàn bộ cơ thể. Ví dụ.

<body ng-app="app">
  <div mc-body>
    Hello World
  </div>
</body>

Bây giờ mc-bodycần được khởi tạo trước khi hiển thị (một lần), ví dụ:

link: function(scope, element, attrs) {
  Auth.login().then() ...
}

Auth là một dịch vụ hoặc nhà cung cấp, ví dụ:

.provider('Auth', function() {
  ... keep your auth configurations
  return {
    $get: function($http) {
      return {
        login: function() {
          ... do something about the http
        }
      }
    }
  }
})

Có vẻ như với tôi rằng tôi có quyền kiểm soát thứ tự của bootstrap, đó là sau khi bootstrap thông thường giải quyết tất cả cấu hình của nhà cung cấp và sau đó cố gắng khởi tạo mc-bodychỉ thị.

Và đối với tôi, chỉ thị này dường như có thể đi trước định tuyến, bởi vì định tuyến cũng được đưa vào thông qua một ví dụ chỉ thị. <ui-route />. Nhưng tôi có thể sai về điều này. Cần điều tra thêm.

Question 5

Để trả lời câu hỏi của bạn, "Có ý tưởng nào không?", Tôi sẽ trả lời là "có". Nhưng xin chờ chút nữa!

Tôi đề nghị chỉ sử dụng JQuery trong cấu hình. Ví dụ:

var app = angular.module('myApp', ['services']);
app.config(['$anyProvider', function ($anyProvider) {
    $.ajax({
        url: 'www.something.com/api/lolol',
        success: function (result) {
            $anyProvider.doSomething(result);
        }
    });
}]);