AngularJS Tutorial => Erste Schritte mit AngularJS

Bemerkungen

AngularJS ist ein Webanwendungs-Framework, das die Entwicklung komplexer clientseitiger Anwendungen vereinfacht. Diese Dokumentation bezieht sich auf Angular 1.x , den Vorgänger des moderneren Angular 2 oder in der Stack Overflow-Dokumentation für Angular 2 .

Versionen

Ausführung	Veröffentlichungsdatum
1.6.5	2017-07-03
1.6.4	2017-03-31
1.6.3	2017-03-08
1.6.2	2017-02-07
1.5.11	2017-01-13
1.6.1	2016-12-23
1.5.10	2016-12-15
1.6.0	2016-12-08
1.6.0-rc.2	2016-11-24
1.5.9	2016-11-24
1.6.0-rc.1	2016-11-21
1.6.0-rc.0	2016-10-26
1.2.32	2016-10-11
1.4.13	2016-10-10
1.2.31	2016-10-10
1.5.8	2016-07-22
1.2.30	2016-07-21
1.5.7	2016-06-15
1.4.12	2016-06-15
1.5.6	2016-05-27
1.4.11	2016-05-27
1.5.5	2016-04-18
1.5.4	2016-04-14
1.5.3	2016-03-25
1.5.2	2016-03-19
1.4.10	2016-03-16
1.5.1	2016-03-16
1.5.0	2016-02-05
1,5,0-rc,2	2016-01-28
1.4.9	2016-01-21
1.5.0-rc.1	2016-01-16
1,5,0-rc,0	2015-12-09
1.4.8	2015-11-20
1.5.0-beta.2	2015-11-18
1.4.7	2015-09-30
1.3.20	2015-09-30
1.2.29	2015-09-30
1.5.0-beta.1	2015-09-30
1.5.0-beta.0	2015-09-17
1.4.6	2015-09-17
1.3.19	2015-09-17
1.4.5	2015-08-28
1.3.18	2015-08-19
1.4.4	2015-08-13
1.4.3	2015-07-15
1.3.17	2015-07-07
1.4.2	2015-07-07
1.4.1	2015-06-16
1.3.16	2015-06-06
1.4.0	2015-05-27
1.4.0-rc.2	2015-05-12
1.4.0-rc.1	2015-04-24
1.4.0-rc.0	2015-04-10
1.3.15	2015-03-17
1.4.0-beta.6	2015-03-17
1.4.0-beta.5	2015-02-24
1.3.14	2015-02-24
1.4.0-beta.4	09.02.2015
1.3.13	09.02.2015
1.3.12	2015-02-03
1.4.0-beta.3	2015-02-03
1.3.11	2015-01-27
1.4.0-beta.2	2015-01-27
1.4.0-beta.1	2015-01-20
1.3.10	2015-01-20
1.3.9	2015-01-15
1.4.0-beta.0	2015-01-14
1.3.8	2014-12-19
1.2.28	2014-12-16
1.3.7	2014-12-15
1.3.6	2014-12-09
1.3.5	2014-12-02
1.3.4	2014-11-25
1.2.27	2014-11-21
1.3.3	2014-11-18
1.3.2	2014-11-07
1.3.1	2014-10-31
1.3.0	2014-10-14
1,3,0-rc,5	2014-10-09
1.2.26	2014-10-03
1.3.0-rc.4	2014-10-02
1.3.0-rc.3	2014-09-24
1.2.25	2014-09-17
1.3.0-rc.2	2014-09-17
1.2.24	2014-09-10
1.3.0-rc.1	2014-09-10
1,3,0-rc,0	2014-08-30
1.2.23	2014-08-23
1.3.0-beta.19	2014-08-23
1.2.22	2014-08-12
1.3.0-beta.18	2014-08-12
1.2.21	2014-07-25
1.3.0-beta.17	2014-07-25
1.3.0-beta.16	2014-07-18
1.2.20	2014-07-11
1.3.0-beta.15	2014-07-11
1.2.19	2014-07-01
1.3.0-beta.14	2014-07-01
1.3.0-beta.13	2014-06-16
1.3.0-beta.12	2014-06-14
1.2.18	2014-06-14
1.3.0-beta.11	2014-06-06
1.2.17	2014-06-06
1.3.0-beta.10	2014-05-24
1.3.0-beta.9	2014-05-17
1.3.0-beta.8	2014-05-09
1.3.0-beta.7	2014-04-26
1.3.0-beta.6	2014-04-22
1.2.16	2014-04-04
1.3.0-beta.5	2014-04-04
1.3.0-beta.4	2014-03-28
1.2.15	2014-03-22
1.3.0-beta.3	2014-03-21
1.3.0-beta.2	2014-03-15
1.3.0-beta.1	2014-03-08
1.2.14	2014-03-01
1.2.13	2014-02-15
1.2.12	2014-02-08
1.2.11	2014-02-03
1.2.10	2014-01-25
1.2.9	2014-01-15
1.2.8	2014-01-10
1.2.7	2014-01-03
1.2.6	2013-12-20
1.2.5	2013-12-13
1.2.4	2013-12-06
1.2.3	2013-11-27
1.2.2	2013-11-22
1.2.1	2013-11-15
1.2.0	2013-11-08
1,2,0-rc,3	2013-10-14
1,2,0-rc,2	2013-09-04
1,0,8	2013-08-22
1.2.0rc1	2013-08-13
1,0,7	2013-05-22
1.1.5	2013-05-22
1.0.6	2013-04-04
1.1.4	2013-04-04
1,0,5	2013-02-20
1.1.3	2013-02-20
1.0.4	2013-01-23
1.1.2	2013-01-23
1.1.1	2012-11-27
1.0.3	2012-11-27
1.1.0	2012-09-04
1.0.2	2012-09-04
1.0.1	2012-06-25
1.0.0	2012-06-14
v1.0.0rc12	2012-06-12
v1.0.0rc11	2012-06-11
v1.0.0rc10	2012-05-24
v1.0.0rc9	2012-05-15
v1.0.0rc8	2012-05-07
v1.0.0rc7	2012-05-01
v1.0.0rc6	2012-04-21
v1.0.0rc5	2012-04-12
v1.0.0rc4	2012-04-05
v1.0.0rc3	2012-03-30
v1.0.0rc2	2012-03-21
g3-v1.0.0rc1	2012-03-14
g3-v1.0.0-rc2	2012-03-16
1.0.0rc1	2012-03-14
0.10.6	2012-01-17
0.10.5	2011-11-08
0.10.4	2011-10-23
0.10.3	2011-10-14
0.10.2	2011-10-08
0.10.1	2011-09-09
0,10,0	2011-09-02
0,9,19	2011-08-21
0.9.18	2011-07-30
0,9,17	2011-06-30
0.9.16	2011-06-08
0,9,15	2011-04-12
0.9.14	2011-04-01
0,9,13	2011-03-14
0.9.12	2011-03-04
0,9.11	2011-02-09
0,9,10	2011-01-27
0,9,9	2011-01-14
0,9,7	2010-12-11
0,9,6	2010-12-07
0,9,5	2010-11-25
0.9.4	2010-11-19
0,9,3	2010-11-11
0,9,2	2010-11-03
0,9,1	2010-10-27
0,9,0	2010-10-21

Fertig machen

Erstellen Sie eine neue HTML-Datei und fügen Sie den folgenden Inhalt ein:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

Live-Demo

Wenn Sie die Datei mit einem Browser öffnen, wird ein Eingabefeld gefolgt von dem Text Hello, World! . Durch Bearbeiten des Werts in der Eingabe wird der Text in Echtzeit aktualisiert, ohne dass die gesamte Seite aktualisiert werden muss.

Erläuterung:

Laden Sie das Angular-Framework aus einem Content Delivery Network.

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

Definieren Sie das HTML-Dokument als Angular-Anwendung mit der Direktive ng-app
```
<html ng-app>
```
Initialisieren der name Variable ng-init
```
<body ng-init=" name = 'World' ">
```
Beachten Sie, dass ng-init nur zu Demonstrations- und Testzwecken verwendet werden sollte. Beim Erstellen einer tatsächlichen Anwendung sollten Controller die Daten initialisieren.
Binden Sie Daten aus dem Modell an die Ansicht in HTML-Steuerelementen. Binden Sie mit ng-model eine <input> an die name ng-model
```
<input ng-model="name" />
```
Anzeigen von Inhalten aus dem Modell mit doppelten geschweiften Klammern {{ }}
```
<span>Hello, {{ name }}</span>
```
Eine andere Methode zum Binden der name Eigenschaft ist die Verwendung von ng-bind anstelle von Lenkern "{{ }}"
```
 <span ng-bind="name"></span>
```

Die letzten drei Schritte stellen die bidirektionale Datenbindung her . Durch Änderungen an der Eingabe wird das Modell aktualisiert, was in der Ansicht angezeigt wird .

Es gibt einen Unterschied zwischen der Verwendung von Lenker und ng-bind . Wenn Sie eine Lenkstange verwenden, wird möglicherweise das eigentliche Hello, {{name}} während die Seite geladen wird, bevor der Ausdruck aufgelöst wird (bevor die Daten geladen werden). Wenn Sie ng-bind , werden die Daten nur beim Namen angezeigt ist gelöst. Alternativ kann die Direktive ng-cloak verwendet werden, um zu verhindern, dass Lenker angezeigt werden, bevor er kompiliert wird.

Zeigt alle gängigen Winkelkonstrukte

Das folgende Beispiel zeigt gängige AngularJS-Konstrukte in einer Datei:

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

Jede Zeile der Datei wird unten erklärt:

Live Demo

ng-app="myDemoApp" , die ngApp-Direktive , die die Anwendung bootstraps und winklig angibt , dass ein DOM-Element von einem bestimmten angular.module Namen "myDemoApp" gesteuert wird.
<script src="angular.min.js"> ist der erste Schritt beim Bootstrapping der AngularJS-Bibliothek .

Es werden drei Funktionen ( MyDataService , DemoController und startup ) deklariert, die im Folgenden verwendet (und erläutert) werden.

angular.module(...) das mit einem Array als zweites Argument verwendet wird, erstellt ein neues Modul. Dieses Array wird verwendet, um eine Liste von Modulabhängigkeiten bereitzustellen. In diesem Beispiel verketten wir Aufrufe des Ergebnisses der module(...) .
.service(...) erstellt einen Angular Service und .service(...) das Modul zur Verkettung zurück.
.controller(...) erstellt einen Angular Controller und .controller(...) das Modul zur Verkettung zurück;
.config(...) Verwenden Sie diese Methode, um die Arbeit zu registrieren, die beim Laden des Moduls ausgeführt werden muss.
.run(...) stellt sicher, dass der Code zur Startzeit ausgeführt wird und ein Array von Elementen als Parameter verwendet. Verwenden Sie diese Methode, um die Arbeit zu registrieren, die ausgeführt werden soll, wenn der Injektor alle Module geladen hat.
- das erste Element ist die Vermietung Angular weiß , dass die startup erfordert den Einbau- $rootScope Dienst als Argument zu injizierenden;
- Der zweite Punkt ist, dass Angular informiert wird, dass für die startup der integrierte $window Dienst als Argument eingefügt werden muss.
- Das letzte Element im Array, startup , ist die eigentliche Funktion, die beim Start ausgeführt wird.
ng-class ist die ngClass-Direktive zum Festlegen einer dynamischen class . In diesem Beispiel wird hasStarted für $rootScope dynamisch verwendet
ng-cloak ist eine Direktive , die verhindert, dass die nicht gerenderte Angular-HTML-Vorlage (z. B. " {{ msg }} ") kurz angezeigt wird, bevor Angular die Anwendung vollständig geladen hat.
ng-controller ist die Anweisung , mit der Angular aufgefordert wird, einen neuen Controller mit einem bestimmten Namen zu instanziieren, um diesen Teil des DOM zu orchestrieren.
ng-repeat ist die Direktive, mit der Angular über eine Collection iteriert und eine DOM-Vorlage für jedes Element geklont wird.
{{ msg }} zeigt Interpolation : Rendern eines Teils des Bereichs oder Controllers vor Ort;

Die Bedeutung des Umfangs

Da Angular HTML verwendet, um eine Webseite zu erweitern und Javascript einfach um Logik zu erweitern, ist es einfach, eine Webseite mit ng-app , ng-controller und einigen integrierten Anweisungen wie ng-if , ng-repeat usw. zu erstellen Mit der neuen controllerAs- Syntax können Neulinge bei Angular-Benutzern Funktionen und Daten an ihren Controller anfügen, anstatt $scope .

Doch früher oder später, ist es wichtig zu verstehen , was genau diese $scope Sache. Es wird immer wieder in Beispielen auftauchen, daher ist es wichtig, etwas Verständnis zu haben.

Die gute Nachricht ist, dass es sich um ein einfaches, aber leistungsfähiges Konzept handelt.

Wenn Sie Folgendes erstellen:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

Wo wohnt der Name ?

Die Antwort ist, dass Angular ein $rootScope Objekt erstellt. Dies ist einfach ein $rootScope Javascript-Objekt, und name ist eine Eigenschaft für das $rootScope Objekt:

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

Und genau wie bei globalem Gültigkeitsbereich in Javascript ist es normalerweise keine gute Idee, dem globalen Gültigkeitsbereich oder $rootScope Elemente $rootScope .

Natürlich erstellen wir die meiste Zeit einen Controller und fügen unsere erforderliche Funktionalität in diesen Controller ein. Wenn wir jedoch einen Controller erstellen, macht Angular seine Magie und erstellt ein $scope Objekt für diesen Controller. Dies wird manchmal als lokaler Bereich bezeichnet .

So erstellen Sie den folgenden Controller:

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

würde den lokalen Bereich über den Parameter $scope zugänglich machen.

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

Ein Controller ohne einen $scope Parameter benötigt ihn aus irgendeinem Grund möglicherweise nicht. Es ist jedoch wichtig zu wissen, dass der lokale Geltungsbereich auch mit der controllerAs-Syntax vorhanden ist.

Da $scope ein JavaScript-Objekt ist, wird es von Angular auf magische Weise so eingestellt, dass es von $rootScope prototypisch erbt. Und wie Sie sich vorstellen können, kann es eine Reihe von Bereichen geben. Sie können beispielsweise ein Modell in einem übergeordneten Controller erstellen und als $scope.model mit dem Bereich des übergeordneten Controllers $scope.model .

Über die Prototypkette kann ein $scope.model Controller mit $scope.model lokal auf dasselbe Modell $scope.model .

Nichts davon ist anfangs offensichtlich, da es nur Angular ist, das im Hintergrund seine Magie ausübt. Das Verständnis von $scope ist jedoch ein wichtiger Schritt, um zu erfahren, wie Angular funktioniert.

Die einfachste mögliche winklige Hallo Welt.

Angular 1 ist im Kern ein DOM-Compiler. Wir können HTML entweder als Vorlage oder einfach als normale Webseite übergeben und dann eine App kompilieren lassen.

Wir können Angular anweisen, einen Bereich der Seite als Ausdruck mit der {{ }} Lenkersymbolsyntax zu behandeln. Alles zwischen den geschweiften Klammern wird wie folgt zusammengestellt:

{{ 'Hello' + 'World' }}

Dies wird ausgegeben:

HelloWorld

ng-app

Wir teilen Angular mit, welcher Teil unseres DOMs als Master-Vorlage mit der ng-app Direktive behandelt werden soll . Eine Direktive ist ein benutzerdefiniertes Attribut oder Element, mit dem der Angular-Vorlagen-Compiler umgehen kann. Fügen wir jetzt eine ng-app-Direktive hinzu:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

Ich habe jetzt dem Body-Element gesagt, dass es die Root-Vorlage sein soll. Alles, was sich darin befindet, wird kompiliert.

Richtlinien

Direktiven sind Compiler-Direktiven. Sie erweitern die Fähigkeiten des Angular DOM-Compilers. Deshalb beschreibt Misko , der Schöpfer von Angular, Angular als:

"Was wäre ein Webbrowser gewesen, wenn er für Webanwendungen erstellt worden wäre.

Wir erstellen buchstäblich neue HTML-Attribute und -Elemente und lassen diese von Angular in eine App kompilieren. ng-app ist eine Direktive, die den Compiler einfach aktiviert. Andere Richtlinien beinhalten:

ng-click , wodurch ein Click-Handler hinzugefügt wird,
ng-hide , das ein Element bedingt verbirgt, und
<form> , wodurch einem Standard-HTML-Formularelement zusätzliches Verhalten hinzugefügt wird.

Angular verfügt über rund 100 integrierte Anweisungen, mit denen Sie die häufigsten Aufgaben ausführen können. Wir können auch eigene schreiben, und diese werden wie die eingebauten Richtlinien behandelt.

Wir erstellen eine Angular-App aus einer Reihe von Anweisungen, die mit HTML verbunden sind.

Minification in Angular

Was ist Minifizierung?

Dabei werden alle nicht benötigten Zeichen aus dem Quellcode entfernt, ohne die Funktionalität zu ändern.

Normale Syntax

Wenn wir zum Schreiben eines Controllers die normale Winkelsyntax verwenden, wird nach der Minimierung unserer Dateien unsere Funktionalität beeinträchtigt.

Controller (vor der Minifizierung):

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

Nach der Verwendung des Minifikations-Tools wird es wie unten beschrieben minimiert.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Hier hat die Minifizierung unnötige Leerzeichen und die Variable $ scope aus dem Code entfernt. Wenn wir also diesen reduzierten Code verwenden, wird nichts gedruckt. Denn $ scope ist ein entscheidender Teil zwischen Controller und View, der nun durch die kleine 'e'-Variable ersetzt wird. Wenn Sie also die Anwendung ausführen, wird der Abhängigkeitsfehler des unbekannten Anbieters angezeigt.

Es gibt zwei Möglichkeiten, Ihren Code mit Informationen zum Servicenamen zu versehen, die für die Minifizierung sicher sind:

Inline-Anmerkungssyntax

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ inject-Eigenschaftsanmerkungen-Syntax

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

Nach der Minifizierung wird dieser Code sein

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

In diesem Fall wird die Variable 'a' als 'scope' behandelt und die Ausgabe wird als 'Hello World!' Angezeigt.

AngularJS Erste Schritte Video-Tutorials

Es gibt viele gute Video-Tutorials für das AngularJS-Framework auf egghead.io

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

AngularJS Tutorial
Erste Schritte mit AngularJS

Suche…