suchen

Heim  >  Artikel  >  Web-Frontend  >  So schreiben Sie „Hallo Welt“ mit der AngularJS-Bibliothek_AngularJS von JavaScript

So schreiben Sie „Hallo Welt“ mit der AngularJS-Bibliothek_AngularJS von JavaScript

WBOY
WBOYOriginal
2016-05-16 15:53:261128Durchsuche

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.

  • ng-app-, ng-controller-, ng-model-Anweisungen
  • Vorlage mit zwei geschweiften Klammern

Schritt 1: Fügen Sie Angular Javascript

in den Abschnitt e0d5b055b128e8aa6d694e7a88aabe96 ein

Fügen Sie den folgenden Code in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 d90fcdb535d6081491edebb07224a674-Element an

Wenden Sie die ng-app-Direktive wie folgt auf das 100db36a723c770d327fc0aef2ce13b1-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 9c5594a5fc8d2e506f1a8147102c836b-Element an

Wenden Sie die ng-controller-Direktive auf das 9c5594a5fc8d2e506f1a8147102c836b-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 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 referenziert werden 



<body ng-controller="HelloCtrl">
Schritt 4: Wenden Sie die ng-model-Direktive auf das Eingabeelement an

Sie können die ng-model-Direktive verwenden, um die Eingabe an das Modell zu binden.



<input type="text" name="name" ng-model="name"/>
Schritt 5: Vorlagencode schreiben

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&#63;

Schritt 6: Controller-Code in 2934a685527f5cd6bcb20a3dc28499e1 erstellen
Erstellen Sie den Controller-Code im Skriptelement wie unten gezeigt. Im folgenden Code ist „helloApp“ der Name des Moduls, das mit der ng-app-Direktive im 100db36a723c770d327fc0aef2ce13b1-Element definiert ist Erstellen Sie einen Controller mit dem Namen „HelloCtrl“, der mit der ng-controller-Direktive im Element 6c04bd5ca3fcae76e30b72ad730ca86d definiert ist. Der Controller „HelloCtrl“ wird bei diesem Modul registriert – „helloApp“. $scope-Objekte sind miteinander verbunden 


<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>
Den vollständigen Code finden Sie
hier

.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Js PHP implementiert asynchrone Drag-and-Drop-Upload-Dateien_Javascript-FähigkeitenNächster Artikel：Js PHP implementiert asynchrone Drag-and-Drop-Upload-Dateien_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen