Grundlegendes zu Angular.js-Controller-Parametern

Question 1

Ich fange gerade an, Angular.js zu lernen, und habe mir die project.js im Beispiel "Wire up a Backend" auf der Angular-Homepage angesehen .

Ich bin verwirrt über die Parameter in den Steuerungsfunktionen:

function ListCtrl($scope, Projects) {
  ... 
}   

function CreateCtrl($scope, $location, $timeout, Projects) {
  ... 
}

function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
   angularFire(fbURL + $routeParams.projectId, $scope, 'remote', {}).
   then(function() {
     ...
   });
}

Diese Controller-Funktionen werden im routeProvider aufgerufen, aber keiner der Parameter wird angegeben.

$routeProvider.
  when('/', {controller:ListCtrl, templateUrl:'list.html'}).
  when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
  when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
  otherwise({redirectTo:'/'});
});

Das einzige , was ich bisher finden konnte , dass möglicherweise erklärt , was los ist „Injecting Service in Controllers“ , was erklärt $location, $timeoutaber nicht die Parameter Methode angularFireund fbURL.

Meine spezifischen Fragen sind:

Was können die Reglerparameter sein?
Wo werden die Reglerfunktionen mit ihren Parametern aufgerufen? Oder die Parameter werden nicht aufgerufen, sondern sind nur mit dem Controller verknüpft, bei dem die Zuordnung mit viel Angular.js-Magie erfolgt (wenn ja, kann ich den Quellcode auf Github sehen)?
Wo ist angularFiredefiniert?

Wie ist das fbURLim Parameter verknüpft mit:

angular.module('project', ['firebase']).
    value('fbURL', 'https://angularjs-projects.firebaseio.com/').
    factory ...

Gibt es einen Ort, an dem ich alle Dienste sehen kann, z. B. $locationund $timeout, die Angular.js bereitstellt? (Ich habe versucht, die Liste zu finden, bin aber fehlgeschlagen.)

Question 2

Was können die Reglerparameter sein?

Die Reglerparameter sind Abhängigkeiten , die vom AngularJS-Injektorservice injiziert werden. Sie können alles sein. Dies sind jedoch normalerweise die Dienste , die innerhalb des Controllers verwendet werden.
Wo werden die Reglerfunktionen mit ihren Parametern aufgerufen?

Controller sowie Anweisungen, Filter, Dienste und so viele andere Dinge in AngularJS sind Funktionen . Das Framework verwaltet jedoch viel, wann und wie diese Funktionen aufgerufen werden.

Was Sie als assoziiertes Material bezeichnen, hat einen Namen: Abhängigkeit , wie oben erwähnt. Was Sie Magie nennen, ist der AngularJS- Abhängigkeitsinjektionsmechanismus in Aktion.

Wenn diese Funktionen (Steuerungen und andere) vom Injektor aufgerufen werden, liest er die Parameternamen (zum Beispiel: $scopeoder $httpoder angularFire) und sucht nach einem registrierten Dienst mit diesem Namen, der dann beim Aufrufen der Funktion als Parameter bereitgestellt wird.

Es ist einfach. Sie haben verschiedene Möglichkeiten, dem Injektor Anweisungen zu Ihren "Abhängigkeiten" (vom Injektor verwalteten Parametern) zu geben.

Wenn Sie einfach Ihre Funktion als deklarieren function myCtrl($scope) {}, kann der Injektor den $scopeService anhand des Parameternamens finden. Wenn Sie jedoch den JavaScript-Code minimieren , kann der Injektor den Dienst nicht mehr finden, da der Parametername in eine kleinere Zeichenfolge wie "a" oder "x" geändert wird. Um dieses Problem zu vermeiden, können Sie den zu injizierenden Dienstnamen mithilfe der Array-Notation angeben . In diesem Fall würden Sie Ihre Funktion folgendermaßen deklarieren:myCtrl = ['$scope', function($scope) {}]

In der AngularJS-Welt werden Sie häufig Array-Notationen verwenden. Jetzt fängst du an, es zu verstehen. Sie können sie sogar mit anderen Namen in Ihrer Funktion injizieren $scopeund angularFireverwenden (das Ändern des Namens wird nicht empfohlen - dieses Beispiel dient hier zu Lernzwecken): - Auf diese Weise können Sie innerhalb der Funktion $ scope als "skop" und angularFire as verwenden "af". Die Reihenfolge der Dienste im Array entspricht der Reihenfolge der Parameter.['$scope', 'angularFire', function(skop, af) {}]

Ein anderes Beispiel:

var myController = ['$scope', '$resource', '$timeout',
    function($scope, $resource, $timeout) {
        // this controller uses $scope, $resource and $timeout
        // the parameters are the dependencies to be injected
        // by AngularJS dependency injection mechanism
    }
];

Wo ist angleFire definiert?

Im Firebase- Modul .

Wie Sie bereits jetzt wissen, injiziert der Injektor alles, solange dieser "Ding" -Name registriert und in seinen Aufzeichnungen verfügbar ist. Wenn es einen "Dienst" mit diesem Namen gibt , kann er ihn bereitstellen .

Wie wird dann diese name => stuffListe erstellt, die der Injektor verwendet?

Modul ist die Antwort. Ein Modul ist kaum mehr als eine Liste von name => stuff. Es befindet sich in einem Modul, in dem Sie Dienste, Fabriken, Filter, Anweisungen und mehr registrieren.

Schauen Sie sich die Modulmethoden in der offiziellen Dokumentation genau an ... fast alle erhalten sie als Parameter: Name und einige " Sachen " (wobei "Sachen" fast immer eine Funktion ist , die entweder eine Steuerung, eine Fabrik oder eine Direktive definiert ). Es ist all dieses "Zeug", das durch den angegebenen Namen injizierbar wird .

AngularJS-Dienste wie "$ timeout", "$ http" und andere sind standardmäßig verfügbar, da das ng-Modul bereits vom Framework geladen ist.

Für zusätzliche Dienste müssen Sie das Modul laden / benötigen . Das machen Sie mit ngRouter , Firebase usw. Durch Laden des Moduls stehen die registrierten Inhalte zur Injektion in Ihr Modul / Ihre App zur Verfügung.

Sehen wir uns ein schrittweises Beispiel an:

// An empty module:
var module = angular.module('myModule', []);

// Now, adding an "injectable" constant: 
module.constant('niceStuff', { blip: 'blop', blup: 307 });

// We could add a service:
module.service('entityManager', ['$http', function($http){  }]);

// and so on... if I wanted to use "$resource" instead of "$http"
// in the entityManager service above...
// ...I would need to require the ngResource when creating the module above,
// like this: var module = angular.module('myModule', ['ngResource']);
// because "$resource" is not available by default

// NOW, anywhere else, since the code above already ran
// I can use those NAMES as dependencies like this:

// We are creating another module now:
var koolModule = angular.module('km', ['myModule']);
// Note that I am requiring the previous module through its registered name

// Now, anything I've declared in that module
// - just like "ng" (by default) and "firebase" (required) does -
// is available for "injection"!!!

koolModule.controller('koolController',
    ['niceStuff', 'entityManager', function(niceStuff, entityManager) {
        console.log(niceStuff.blip);      // 'blop'
        console.log(niceStuff.blup + 10); // 317
    }]
);

Auf diese Weise wird Firebase-Material wie AngularFire verfügbar! Was haben wir getan? Zuerst haben wir das "myModule" erstellt und NAMED-Inhalte registriert. Später benötigten wir das "myModule" für unser "koolModule" - und diese NAMEN waren bereits in der Injektorliste verfügbar name => stuff.

Wie ist die fbURL im Parameter verknüpft?

Wie wir gerade gesehen haben, registrieren die meisten Modulmethoden lediglich Dinge - geben den Dingen Namen , damit sie später über diese Namen injiziert und / oder verwendet werden können.

Wenn module.value('fbURL', 'https://angularjs-projects.firebaseio.com/')aufgerufen wird, wird fbURL (und der angegebene Wert) in der name => stuffListe registriert ... in diesem Fall lautet der Name "fbURL" und der Wert / das Zeug ist die URL-Zeichenfolge - aber es kann alles sein!
Gibt es einen Ort, an dem ich alle von Angular.js bereitgestellten Dienste sehen kann, z. B. $ location und $ timeout?

Ja, die API-Referenz: http://docs.angularjs.org/api/

Achten Sie darauf, wie die Navigation auf der linken Seite organisiert ist ... nach Modulen ! Zuerst das ng- Modul mit Tonnen von Anweisungen, Diensten, Filtern usw. Dann unten die anderen Module (ngRoute, ngResource, ngMock usw.), die jeweils ihre eigenen Dienste, Fitler oder Anweisungen enthalten ...

Vielen Dank für die Gelegenheit, diese Gedanken zu teilen. Ich habe es genossen, sie zu schreiben.

Question 3

Zunächst einmal gute Arbeit bei der Auswahl dieses Frameworks. Es ist das Beste. Die Variablen, die Sie mit dem $ -Zeichen sehen, werden eingefügt und sind Teil des Standardframeworks. Diese Dienste werden Ihr Leben so viel einfacher machen. Die beste Art, an Controller zu denken, sind Skriptblätter. Sie helfen, den Code zu trennen. Betrachten Sie sie nicht als Methoden. Die Variablen, die Sie sehen, wie z. B. $ timeout & $ scope, sind Dienste, die nützlich sind, wenn Sie bestimmte Dinge erledigen müssen. Die gesamte Dokumentation für das Framework finden Sie unter http://docs.angularjs.org/api/. Ich würde jedoch mit diesem Tutorial beginnen: http://docs.angularjs.org/tutorial/ .

Das Winkelfeuer ist nicht Teil des Rahmens. Es ist ein weiterer Dienst, der das Framework nutzt, um ein leistungsstarkes verteiltes Echtzeitnetzwerk zu erstellen. Wenn Sie die anglefirejs laden, wird der Dienst mitgeliefert, der dann als angezeigter Parameter eingefügt wird.

Um Ihre zweite Frage zu beantworten, können die von Ihnen übergebenen Parameter beliebig sein, solange Sie einen entsprechenden Dienst ausführen. Bitte beziehen Sie sich darauf, um Ihren eigenen Parameter für Controller zu erstellen : http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL ist nur eine Variable, die Sie erstellen können, und der Code, den Sie in Ihre Frage eingefügt haben, ist lediglich die Anweisung, wie Sie ihn erstellen.

Angularjs ist nicht die Art von Framework, die Sie lernen können, wenn Sie sich ansehen, was es bietet. Einfach weil es alles bietet. Alles, was Sie mitbringen könnten, um eine großartige App zu erstellen. Stattdessen sollten Sie sich darauf konzentrieren, Google zu fragen, wie Sie Ihr Problem mit Angular lösen können.

Schauen Sie sich auch Videos auf Youtube an. Sie werden einige großartige finden.

Question 4

Laut Toxaq-Kommentar sind hier die Kommentare als Antwort

Was können die Reglerparameter sein?

Es können hauptsächlich Dienste, Fabriken, Werte, Konstanten usw. sein, die Sie irgendwo vor oder mithilfe der Auflösung für eine Routendefinition definiert haben.
Wo werden die Reglerfunktionen mit ihren Parametern aufgerufen?

Hier ist der richtige Weg, um einen Controller zu definieren:
```
angular.module('project').controller('EditCtrl', [
    '$scope', 
    '$location', 
    '$routeParams', 
    'angularFire', 
    'fbURL', 
    function($scope, $location, $routeParams, angularFire, fbURL) { 
        ... 
    } 
]); 
```
Auf diese Weise legen Sie zuerst den Namen der Dienste fest, die Sie injizieren möchten, und geben diesen Diensten dann einen anderen Namen, wenn Sie möchten. Dies ist in der Tat obligatorisch, wenn Sie Ihren Winkelcode später minimieren möchten (da durch die Minimierung die Variablen umbenannt werden, muss Angular die Dienstnamen weiterhin finden können).
Wo ist angleFire definiert?

Bei der Definition Ihres Projektmoduls haben Sie auch die Abhängigkeit des Firebase-Moduls berücksichtigt. Innerhalb des Firebase-Moduls muss ein AngularFire-Dienst wie der vorherige fbURL vorhanden sein.
Wie ist die fbURL im Parameter verknüpft?

Wie Sie zu verstehen scheinen, werden die Parameter des Controllers durch Winkel aus der Definition des Controllers injiziert. Angular sucht in allen registrierten Diensten nach einer Übereinstimmung mit dem angegebenen Namen des Parameters und fügt den entsprechenden Dienst ein!
Gibt es einen Ort, an dem ich alle von Angular.js bereitgestellten Dienste sehen kann, z. B. $ location und $ timeout?

Die Liste aller in Angular enthaltenen integrierten Dienste, Filter und Anweisungen finden Sie in der API: http://docs.angularjs.org/api

Question 5

Wo werden die Reglerfunktionen mit ihren Parametern aufgerufen?

Controller-Funktionen werden mit der Direktive ngController instanziiert oder wenn Sie den Controller während der Routenerstellung mit erwähnt haben $routeProvider. AngularJS erledigt dies transparent für Sie und fügt die Parameter ein, die Sie auf Ihrem Controller mit definiert haben DI.

Der DI passt die Namen (oder manchmal die Reihenfolge) der Parameter an. So $scopewürde den derzeitigen Umfang erhält, $httpwürde den HTTP - Dienst erhalten