Dieser Artikel zeigt ein Hallo-Welt-Codebeispiel, das vom AngularJS-Framework implementiert wurde.
Im Folgenden sind einige Aspekte aufgeführt, auf die Sie sich konzentrieren müssen, wenn Sie sich das Hello World-Beispiel und die folgenden Codebeispiele ansehen.
Schritt 1: Fügen Sie Angular Javascript
in den Abschnitt einFügen Sie den folgenden Code in
ein. Sie können die folgende Schreibmethode verwenden, um den neuesten Code aus der von Google verwalteten Bibliothek abzurufen.<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
Schritt 2: Wenden Sie die ng-app-Direktive auf das -Element an
Wenden Sie die ng-app-Direktive wie folgt auf das -Element an. Geben Sie der App einfach einen Namen. Diese Anweisung wird verwendet, um zu markieren, dass Angular sie erkennt es als unser HTML-Element des Stammelements der Anwendung. Dies gibt Anwendungsentwicklern die Freiheit, Angular mitzuteilen, dass die gesamte HTML-Seite oder nur ein Teil davon als Angular-Anwendung behandelt werden soll
<html ng-app="helloApp">
Schritt 3: Wenden Sie die ng-controller-Anweisung auf das
-Element an Wenden Sie die ng-controller-Direktive auf das -Element an. Die Controller-Direktive kann auf jedes Element angewendet werden, beispielsweise auf ein div. Im folgenden Code ist „HelloCtrl“ der Name des Controllers und kann durch den Controller-Code im Element <script></script> referenziert werden
<body ng-controller="HelloCtrl">
Sie können die ng-model-Direktive verwenden, um die Eingabe an das Modell zu binden.
<input type="text" name="name" ng-model="name"/>
Das Folgende ist der Vorlagencode, der die Modellwerte des Modells mit dem Namen „Name“ anzeigt. Beachten Sie, dass das Modell mit dem Namen „Name“ an die Eingabe in Schritt 4 gebunden ist.
Hello {{name}}! How are you doing today?
Schritt 6: Controller-Code in
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
