In diesem Kapitel werden wir diskutieren, wie die AngularJS -Bibliothek für die Entwicklung von Webanwendungen eingerichtet wird. Wir werden auch kurz die Verzeichnisstruktur und ihren Inhalt untersuchen.
Wenn Sie den Link öffnen https://angularjs.org/, werden Sie feststellen, dass es zwei Optionen zum Herunterladen der AngularJS -Bibliothek gibt:
GitHub Download - Klicken Sie auf diese Schaltfläche, um zu GitHub zu gehen und alle neuesten Skripte zu erhalten.
Download - oder klicken Sie auf diese Schaltfläche und Sie sehen:
Dieser Bildschirm bietet verschiedene Optionen für die Verwendung von Winkel JS wie folgt:
Download- und Localhost -Dateien
Es gibt zwei verschiedene Optionen: alt und neuestes. Der Name selbst ist die Selbsterklärung. Die alte Version ist bereits niedriger als die 1.2.x -Version und die neueste ist die 1.3.x -Version.
Wir können auch minifierte, unkomprimierte oder komprimierte Versionen verwenden.
CDN Access: Sie können auch CDN verwenden. Die CDN wird auf die Welt zugreifen, in diesem Fall moderiert Google regionale Rechenzentren. Dies bedeutet, CDN zur Verantwortung des mobilen Hosts für Dateien von seinem eigenen Server zu einer Reihe externer Faktoren zu verwenden. Dies bietet auch den Vorteil, dass der Besucher Ihre Seite eine Kopie von AngularJs von derselben CDN heruntergeladen hat, sie nicht neu geladen werden muss.
Verwenden Sie die CDN -Versionsbibliothek in diesem Tutorial.
Beispiel
Schreiben wir nun ein einfaches Beispiel mit der AngularJS -Bibliothek. Erstellen Sie wie folgt eine HTML -Datei myfirStexample.html:
<! docType html> <html> <Head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> </script> </haart- <h2> Willkommen {{Helloto.title}} In die Welt von Yiibai! </script> </body> </html>Das folgende Kapitel beschreibt den obigen Code im Detail:
Einschließlich AngularJs
Wir fügen die HTML -Seite bereits in die JavaScript -Datei von AngularJS auf, damit wir AngularJs verwenden können:
<Head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
Schauen Sie sich die neueste Version von AngularJS auf der offiziellen Website an.
Auf AngularJS -Anwendung verweisen
Als nächstes sagen wir mir, dass ein Teil von HTML AngularJS -Anwendungen enthält. Dies kann erfolgen, indem das NG-App-Attribut in das HTML-Element an der Wurzel der AngularJS-Anwendung platziert wird. Es kann einem HTML -Element oder Körperelement wie folgt hinzugefügt werden:
<Body ng-App = "MyApp"> </body>
Sicht
Ansichten für diesen Teil:
<div ng-controller = "
NG-Controller erzählt AngularJS, welche Controller und Ansichten sind. Helloto.title fordert AngularJs auf, den Wert des "Modells" von HTML namens Helloto.title in dieser Position zu schreiben.
Regler
Der Controller -Teil ist:
<Script> Angular.module ("MyApp", []) .Controller ("Hellocontroller", Funktion ($ scope) {$ scope.helloto = {}; $ scope.helloto.title = "Angularjs";}); </script>Dieser Code registriert zunächst eine Funktion namens MyApp Angle Modul Controller in HelloController. Wir werden in ihren jeweiligen Kapiteln mehr über Module und Controller erfahren. Die Controller -Funktion ist im Winkel über Angular.module (...) registriert. Controller (...) Funktionsaufruf.
Das Parametermodell von $ Scope übergeben an die Controller -Funktion. Die Controller -Funktion fügt das JavaScript -Objekt von Helloto hinzu, das ein Titelfeld hinzugefügt hat.
implementieren
Speichern Sie den obigen Code als myfirStexample.htmlll öffnen Sie ihn in einem beliebigen Browser. Sie sehen die folgende Ausgabe:
Wenn die Seite im Browser geladen wird, tritt das folgende Ereignis auf:
HTML -Dokumente werden in den Browser geladen und vom Browser berechnet. AngularJS JavaScript -Datei wird geladen und Angle Global Objects werden erstellt. Als nächstes wird eine Registrierungscontroller -Funktion in JavaScript ausgeführt.
AngularJS scannt über HTML, um AngularJS -Anwendungen und -ansichten zu finden. Sobald die Ansicht gefunden wurde, verbindet sie die Ansicht mit der entsprechenden Controller -Funktion.
Als nächstes führt AngularJs die Kontrollfunktion aus. Anschließend macht es eine Datenansicht mit dem besiedelten Controller -Modell. Die Seite ist jetzt fertig.