AngularJS - Umgebung einrichten

In diesem Kapitel wird beschrieben, wie Sie die AngularJS-Bibliothek für die Entwicklung von Webanwendungen einrichten. Außerdem werden die Verzeichnisstruktur und deren Inhalt kurz beschrieben.

Wenn Sie den Link öffnen https://angularjs.org/Sie werden sehen, dass es zwei Möglichkeiten gibt, die AngularJS-Bibliothek herunterzuladen:

View on GitHub - Wenn Sie auf diese Schaltfläche klicken, werden Sie zu GitHub umgeleitet und erhalten die neuesten Skripte.
Download AngularJS 1 - Wenn Sie auf diese Schaltfläche klicken, wird auf einem Bildschirm ein Dialogfeld angezeigt, das wie folgt angezeigt wird:

Dieser Bildschirm bietet verschiedene Optionen für die Verwendung von Angular JS wie folgt:

Downloading and hosting files locally
- Es gibt zwei verschiedene Optionen: Legacy und Latest. Die Namen selbst sind selbsterklärend. Das Legacy hat eine Version unter 1.2.x und die neueste Version ist mit Version 1.3.x erhältlich.
- Wir können auch die minimierte, unkomprimierte oder komprimierte Version verwenden.
CDN access- Sie haben auch Zugriff auf ein CDN. Über das CDN haben Sie Zugriff auf regionale Rechenzentren. In diesem Fall der Google-Host. Das CDN überträgt die Verantwortung für das Hosten von Dateien von Ihren eigenen Servern auf eine Reihe externer. Es bietet auch den Vorteil, dass der Besucher Ihrer Webseite, wenn er bereits eine Kopie von AngularJS von demselben CDN heruntergeladen hat, diese nicht erneut herunterladen muss.

In diesem Tutorial verwenden wir die CDN-Versionen der Bibliothek.

Beispiel

Lassen Sie uns nun ein einfaches Beispiel mit der AngularJS-Bibliothek schreiben. Lassen Sie uns eine HTML-Datei myfirstexample.html erstellen , die wie folgt dargestellt ist:

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Lassen Sie uns den obigen Code im Detail durchgehen -

AngularJS einschließen

Wir fügen die AngularJS-JavaScript-Datei in die HTML-Seite ein, damit wir sie verwenden können -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

Sie können die neueste Version von AngularJS auf der offiziellen Website überprüfen.

Zeigen Sie auf AngularJS App

Als nächstes muss angegeben werden, welcher Teil von HTML die AngularJS-App enthält. Sie können dies tun, indem Sie das Attribut ng-app zum HTML-Stammelement der AngularJS-App hinzufügen. Sie können es entweder dem HTML-Element oder dem body-Element hinzufügen, wie unten gezeigt -

<body ng-app = "myapp">
</body>

Aussicht

Die Ansicht ist dieser Teil -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller teilt AngularJS mit, welcher Controller mit dieser Ansicht verwendet werden soll. helloTo.title weist AngularJS an, den Modellwert helloTo.title an dieser Stelle in HTML zu schreiben.

Regler

Der Controller-Teil ist -

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

Dieser Code registriert eine Controller-Funktion namens HelloController im Winkelmodul myapp . Wir werden in den jeweiligen Kapiteln mehr über Module und Controller lernen . Die Reglerfunktion wird über den Funktionsaufruf angle.module (...). Controller (...) im Winkel registriert.

Das $ scope-Parametermodell wird an die Controller-Funktion übergeben. Die Controller - Funktion fügt ein helloTo JavaScript - Objekt, und in diesem Objekt fügt einen Titel Feld.

Ausführung

Speichern Sie den obigen Code als myfirstexample.html und öffnen Sie ihn in einem beliebigen Browser. Sie sehen die folgende Ausgabe -

Welcome AngularJS to the world of Tutorialspoint!

Was passiert, wenn die Seite in den Browser geladen wird? Mal sehen -

Das HTML-Dokument wird in den Browser geladen und vom Browser ausgewertet.
AngularJS JavaScript-Datei wird geladen, das eckige globale Objekt wird erstellt.
Das JavaScript, das Controller-Funktionen registriert, wird ausgeführt.
Als Nächstes durchsucht AngularJS den HTML-Code nach AngularJS-Apps und -Ansichten.
Sobald die Ansicht gefunden wurde, verbindet sie diese Ansicht mit der entsprechenden Steuerungsfunktion.
Als nächstes führt AngularJS die Controller-Funktionen aus.
Anschließend werden die Ansichten mit Daten aus dem vom Controller ausgefüllten Modell gerendert. Die Seite ist jetzt fertig.