Namenskonvention für winkelabhängige Modulabhängigkeiten

Question

Ich habe gerade angefangen, AngularJS zu lernen und habe die Chance, verschiedene eckige Beispiele zu sehen. Ich habe eine Frage bezüglich angular.module Abhängigkeiten. Wie können wir den Namen der zu verwendenden Abhängigkeiten kennen und von wo (oder in welchem ​​Verzeichnis) diese Abhängigkeiten injizieren?

zum Beispiel

var clientApp = angular.module('clientApp', ['ui.bootstrap', 'hljs', 'common', 'smart-table', 
    'bootstrap.fileField', 'toaster', 'ngAnimate', 'angulartics', 'angulartics.google.analytics']); 

in der obigen clientApp sie neun Abhängigkeiten verwendet haben. Ich bin verwirrt über die Namen für die Injektion dieser Abhängigkeiten wie ui.bootstrap, hljs usw. Gibt es eine Standard-Konvention für diese Namen? Auch wie kantig die benötigten Module aus lib Ordner holen? Das ist meine Verzeichnisstruktur

+---js 
¦  appctrl.js 
+---lib 
    +---components 
     +---angular 
     ¦  angular.js 
     ¦  angular.min.js 
     +---angular-animate 
     ¦  angular-animate.js 
     ¦  angular-animate.min.js 
     +---angular-bootstrap 
     ¦  ui-bootstrap-tpls.js 
     ¦  ui-bootstrap-tpls.min.js 
     ¦  ui-bootstrap.js 
     ¦  ui-bootstrap.min.js 

Die ClientApp wird alle Module ohne Fehler erhalten. Ich frage mich, wie es auf dieses Verzeichnis zugreifen kann, ohne es zu spezifizieren.

Answer 1

Die Injektion von Modulabhängigkeiten hängt von Ihrem Code ab. Entweder eine oder mehrere Abhängigkeiten werden basierend auf der Notwendigkeit eines Codes injiziert. Wenn Sie zwischen den Seiten umleiten, wird angular 'ngRoute' eingefügt. Wenn Sie "ngRoute" injizieren, müssen Sie "angular-route.js" im Skriptheader angeben. Ein anderes Beispiel ist ngAnimate. Dies wird verwendet, wenn eine Animation benötigt wird. Dies sollte verwendet werden, wenn ein Menü angezeigt oder ausgeblendet wird, um den Übergang reibungslos zu gestalten. Die angular-animate.js sollte hinzugefügt werden.

Der UI-Bootstrap ist eine Liste von Bootstrap-Komponenten, die in eckiger Form entwickelt wurden. Wenn Sie beabsichtigen, eine der Direktiven in der folgenden URL zu verwenden, injizieren Sie den ui-bootstrap. https://angular-ui.github.io/bootstrap/

Toaster ist eine dritte Teilbibliothek. Das andere übliche ist Graster.

Es gibt Hunderte Module, die in eckige Module injiziert werden können. Fügen Sie nur die Module ein, die wie oben beschrieben im Code verwendet werden. Sie müssen Ihrem HTML-Skriptabschnitt verwandte js-Dateien hinzufügen. Wenn Sie das js-Skript nicht hinzufügen, wird eckiger Code die Injektion nicht verstehen.

Lassen Sie mich wissen, wenn Sie mehr Details

Answer 2

Die Abhängigkeiten erwarten Sie an das Modul injizieren sind die gleiche Art und Weise Ihr ClientApp Winkelmodul genannt, weil sie auch Winkelmodule sind.

In Ihrem Fall könnte ich Ihre App erfordern, indem Sie 'clientApp' in das Abhängigkeitsfeld meines Moduls eingeben.

Die Dateifragmente, die ClientApp benötigen kann, hängen davon ab, wie Sie Ihre App erstellen. Sie können alle Ihre JS in Immediately Invoked Function Expressions AKA IIFEs wie solche wickeln:

(angular.module(function() {}))()

Dann haben Sie gerade in Ihrer index.html jedes Skript separat zählen die Art und Weise würden Sie eine Javascript-Datei. Ihre Namen werden ungefähr so ​​wie das Modul deklariert. Ex:

.service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){})])

Wenn Ihr IIFEs ausgeführt wird, werden diese Funktionen auf Ihrem App-Modul registriert und können dann mit Namen genannt werden. In diesem Fall sampleSvc.

Oder Sie tauchen ein in die Welt der Bauwerkzeuge ...Persönlich mag ich NPM, alles zu tun und schrieb alle meine Shell-Befehle für jeden Teil des Build-Zyklus. Ich bevorzuge Browser in Verbindung damit. Für jemanden, der gerade erst angefangen hat, möchten Sie vielleicht grunt und gulp überprüfen. (Umstrittene Meinung Zeit: Gulp ist schneller)

Auch: +1 zu der Empfehlung zu studieren John Papa's Angular Styleguide. Wenn ich mich nicht irre, wurde es von der eckigen Mannschaft unterstützt. Überprüfen Sie auch seine ng-demos für robustere Beispiele.