AngularJS
Beroende på injektion

Syntax

• myApp.controller ('MyController', funktion ($ scope) {...}); // icke-minifierad kod

• myApp.controller ('MyController', ['$ scope', funktion ($ scope) {...}]); // stöd minifiering

• funktion MyController () {}

  MyController. $ Inject = ['$ scope'];

  myApp.controller ('MyController', MyController); // $ injicera annotering

• $ Injector.get ( 'injicerbar'); // dynamisk / runtime-injektion

Anmärkningar

injektioner

Det enklaste exemplet på en injektion i en Angular-app - att injicera $scope till en Angular Controller :

angular.module('myModule', [])
.controller('myController', ['$scope', function($scope) {
    $scope.members = ['Alice', 'Bob'];
    ...
}])

Ovanstående illustrerar en injektion av ett $scope i en controller , men det är samma om du injicerar någon modul i någon annan. Processen är densamma.

Angular system ansvarar för att lösa beroenden för dig. Om du till exempel skapar en tjänst kan du lista den som i exemplet ovan och den är tillgänglig för dig.

Du kan använda DI - Dependency Injection - var du än definierar en komponent.

Observera att i exemplet ovan använder vi vad som kallas "Inline Array Annotation". Det betyder att vi uttryckligen skriver som strängar namnen på våra beroenden. Vi gör det för att förhindra att applikationen bryts när koden minifieras för produktion. Kodminifiering ändrar namnen på variablerna (men inte strängar), vilket bryter injektionen. Genom att använda strängar vet Angular vilka beroenden vi vill ha.

Mycket viktigt - ordningen på strängnamn måste vara densamma som parametrarna i funktionen.

Det finns verktyg som automatiserar denna process och tar hand om den här åt dig.

Dynamiska injektioner

Det finns också ett alternativ att dynamiskt begära komponenter. Du kan göra det med $injector :

myModule.controller('myController', ['$injector', function($injector) {
    var myService = $injector.get('myService');
}]);

Obs! Medan den här metoden kan användas för att förhindra det cirkulära beroendesproblemet som kan bryta din app, anses det inte som bästa praxis att kringgå problemet genom att använda det. Cirkulärt beroende indikerar vanligtvis att det finns en brist i applikationens arkitektur, och du bör ta itu med det istället.

$ injicera egendomskommentarer

På samma sätt kan vi använda anteckningen $inject egendom för att uppnå detsamma som ovan:

var MyController = function($scope) {
  // ...
}
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);

Ladda AngularJS-tjänsten dynamiskt i vanilj JavaScript

Du kan ladda AngularJS-tjänster i vanilj JavaScript med hjälp av AngularJS injector() -metoden. Varje jqLite-element som hämtas angular.element() har en injector() som kan användas för att hämta injektorn.

var service;
var serviceName = 'myService';

var ngAppElement = angular.element(document.querySelector('[ng-app],[data-ng-app]') || document);
var injector = ngAppElement.injector();

if(injector && injector.has(serviceNameToInject)) {
    service = injector.get(serviceNameToInject);
}

I exemplet ovan försöker vi hämta jqLite-elementet som innehåller roten till AngularJS-applikationen ( ngAppElement ). För att göra det använder vi angular.element() -metoden, söker efter ett DOM-element som innehåller ng-app eller data-ng-app attribut eller, om det inte finns, faller vi tillbaka till document . Vi använder ngAppElement att hämta injektorinstans (med ngAppElement.injector() ). Injektorn instans används för att kontrollera om tjänsten till injekt existerar (med injector.has() ) och sedan att läsa in tjänsten (med injector.get() ) inuti service variabel.