ใช้ $ http ภายในผู้ให้บริการที่กำหนดเองในการกำหนดค่าแอป angular.js

Question 1

คำถามหลัก - เป็นไปได้ไหม? ฉันพยายามโดยไม่มีโชค ..

app js หลัก

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

}]);
...

ผู้ให้บริการเอง

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

และฉันมีข้อผิดพลาดดังกล่าว:

Uncaught Error: Unknown provider: $http from services

ความคิดใด ๆ ?

ขอบคุณ!

Question 2

บรรทัดล่างคือ:

คุณไม่สามารถฉีดให้บริการในส่วนการตั้งค่าผู้ให้บริการ
คุณสามารถฉีดให้บริการในส่วนที่เริ่มต้นการให้บริการของผู้ให้บริการ

รายละเอียด:

กรอบเชิงมุมมีกระบวนการเริ่มต้น 2 เฟส:

ขั้นตอนที่ 1: กำหนดค่า

ในระหว่างconfigขั้นตอนของผู้ให้บริการทั้งหมดจะเริ่มต้นและconfigส่วนทั้งหมดจะถูกดำเนินการ configส่วนอาจมีรหัสที่กำหนดค่าวัตถุผู้ให้บริการและดังนั้นพวกเขาสามารถฉีดกับวัตถุที่ให้บริการ อย่างไรก็ตามเนื่องจากผู้ให้บริการเป็นโรงงานสำหรับออบเจ็กต์บริการและในขั้นตอนนี้ผู้ให้บริการยังไม่ได้เริ่มต้น / กำหนดค่าอย่างสมบูรณ์ -> คุณไม่สามารถขอให้ผู้ให้บริการสร้างบริการให้คุณได้ในขั้นตอนนี้ -> ในขั้นตอนการกำหนดค่าคุณจึงไม่สามารถใช้ / บริการฉีด เมื่อขั้นตอนนี้เสร็จสมบูรณ์ผู้ให้บริการทั้งหมดพร้อมแล้ว (ไม่สามารถดำเนินการกำหนดค่าผู้ให้บริการได้อีกหลังจากขั้นตอนการกำหนดค่าเสร็จสิ้น)

ขั้นตอนที่ 2: เรียกใช้

ในระหว่างrunเฟสrunส่วนทั้งหมดจะถูกดำเนินการ ในขั้นตอนนี้ผู้ให้บริการมีความพร้อมและสามารถสร้างบริการ -> ในระหว่างrunขั้นตอนคุณสามารถใช้ / บริการฉีด

ตัวอย่าง:

1. การแทรก`$http`บริการไปยังฟังก์ชันการเริ่มต้นของผู้ให้บริการจะไม่ทำงาน

//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;
    };
});

เนื่องจากเราพยายามฉีด$httpบริการลงในฟังก์ชันที่ดำเนินการในระหว่างconfigขั้นตอนเราจะได้รับข้อผิดพลาด

Uncaught Error: Unknown provider: $http from services

ข้อผิดพลาดนี้กำลังบอกว่าจริงๆแล้วสิ่งที่$httpProviderใช้สร้าง$httpบริการยังไม่พร้อม (เนื่องจากเรายังอยู่ในconfigเฟส)

2. การแทรก`$http`บริการไปยังฟังก์ชันการเริ่มต้นบริการจะทำงาน:

//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;
    };
});

เนื่องจากตอนนี้เรากำลังอัดฉีดบริการลงในฟังก์ชันการเริ่มต้นบริการซึ่งจะดำเนินการในระหว่าง runขั้นตอนรหัสนี้จะทำงาน

Question 3

สิ่งนี้อาจทำให้คุณได้ประโยชน์เล็กน้อย:

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

แต่โปรดระวังการเรียกกลับสำเร็จ / ข้อผิดพลาดอาจทำให้คุณอยู่ในสภาพการแข่งขันระหว่างการเริ่มต้นแอปและการตอบสนองของเซิร์ฟเวอร์

Question 4

นี่เป็นคำถามเก่าดูเหมือนว่าเราจะมีไข่ไก่เกิดขึ้นหากเราต้องการพึ่งพาความสามารถหลักของห้องสมุด

แทนที่จะแก้ปัญหาด้วยวิธีการพื้นฐานสิ่งที่ฉันทำคือการผ่าน สร้างคำสั่งที่ห่อหุ้มร่างกายทั้งหมด เช่น

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

ตอนนี้mc-bodyจำเป็นต้องเริ่มต้นก่อนการแสดงผล (ครั้งเดียว) เช่น

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

Auth เป็นบริการหรือผู้ให้บริการเช่น

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

สำหรับฉันแล้วดูเหมือนว่าฉันสามารถควบคุมลำดับของ bootstrap ได้หลังจากที่ bootstrap ปกติแก้ไขการกำหนดค่าผู้ให้บริการทั้งหมดแล้วลองเริ่มต้นmc-bodyคำสั่ง

และดูเหมือนว่าคำสั่งนี้สำหรับฉันสามารถนำหน้าการกำหนดเส้นทางได้เนื่องจากการกำหนดเส้นทางจะถูกแทรกผ่านคำสั่งเช่นกัน <ui-route />. แต่ฉันคิดผิดในเรื่องนี้ ต้องการการตรวจสอบเพิ่มเติม

Question 5

ในการตอบคำถามของคุณ "มีไอเดียไหม" ฉันจะตอบว่า "ใช่" แต่เดี๋ยวก่อนยังมีอีก!

ฉันขอแนะนำให้ใช้ JQuery ในการกำหนดค่า ตัวอย่างเช่น:

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