Zusammenfassung der Grundkenntnisse und Beispiele von Angularjs_AngularJS

AngularJS ist ein von Google entwickeltes High-End-Front-End-MVC-Entwicklungsframework.

Offizielle Website von Angularjs: https://angularjs.org/ Die offizielle Website verfügt über eine Demo, für den Zugriff ist möglicherweise FQ erforderlich

Angularjs chinesische Community: http://www.angularjs.cn/ Geeignet für Anfänger

Referenzdatei: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

Seien Sie vorsichtig bei der Verwendung von Winkeln

Zitieren Sie die AngularJS-Bibliothek: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... Sie können sie vom Github der Beispiele in herunterladen diesen Abschnitt
Sie müssen ng-app="appName" in dem von Ihnen verwendeten Bereich oder direkt ng-app (global) hinzufügen.
Stellen Sie den Controller ng-controller="Strg" ein.
Bitte beachten Sie beim Testen des Beispiels folgende Punkte

Sie müssen vor dem Kopf den AngularJS-Code einführen. Der Autor verwendet Angular-1.0.1.min.js. Bitte beachten Sie den Versionsunterschied.
Alle kleinen Beispiele werden in den folgenden Bereichen ausgeführt. Denken Sie daran, ng-app im Bereich hinzuzufügen.
Im Folgenden werden einige kleine Fälle verwendet, um die allgemeinen Standardanweisungen und die Verwendung von AngularJS zu veranschaulichen.

Hallo Weltprogramm (doppelte Datenbindung)

Verwenden Sie ng-model={{name}}, um Daten zu binden

Code kopieren Der Code lautet wie folgt:

name:

---

hallo:{{name ||. 'liteng'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

Ein kleiner Fall der Verwendung von Ereignisbindung

Code kopieren Der Code lautet wie folgt:

Stückpreis:
Menge:

Gesamtpreis: {{(Preis) * (Menge)}}

Hinweis:

Eingabe mit HTML5: http://www.w3school.com.cn/ html5 /att_input_type.asphttp://www.w3school.com.cn/html5/att_input_type.asp>

ng-init: Anfangswert festlegen

http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init: Attributwerte können standardmäßig angegeben werden

Code kopieren Der Code lautet wie folgt:

{{value}}

http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat: wird verwendet, um Daten ähnlich wie i für Informationen in js zu iterieren

Code kopieren Der Code lautet wie folgt:

Ich habe {{friends.length}} Freunde. Sie sind

• 
  [{{$index 1}}]: Das Alter von {{friend.name}} beträgt: {{friend.age}}
  

http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom click event

Code kopieren Der Code lautet wie folgt:

{{a}}

<script> Funktion ctrl($scope){<br> $scope.a='hello';<br> $scope.showMsg=function(){<br>           $scope.a='world';<br> }<br> }<br> </script>

http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show: Elementanzeige einstellen

Hinweis: ng-show="!xx": Vor dem Attributwert hinzufügen! Zeigt eine Bestätigung der Anzeige an, falls nicht hinzugefügt! Wenn Sie unsicher sind, zeigen Sie

nicht an

Code kopieren Der Code lautet wie folgt:

ng-show="!show"

ng-show="show"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide: Element so einstellen, dass es ausgeblendet wird

Code kopieren Der Code lautet wie folgt:

ng-hide="aaa"

ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

Verwenden Sie ng-show, um einen Umschalteffekt zu erzeugen

Code kopieren Der Code lautet wie folgt:

toggle

Logo anzeigen

" alt="">

http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style: ähnlich dem Standardstil

Bitte achten Sie hier auf das Schreibformat: Die Zeichenfolge muss in Anführungszeichen gesetzt werden

Code kopieren Der Code lautet wie folgt:

Box

http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

Filter: Filterfeld

Code kopieren Der Code lautet wie folgt:

{{9999|number}}

{{9999 1 |number:2}}

{{9*9|currency}}

{{'hello world' |. Großbuchstaben}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template: Vorlage kann geladen werden

Code kopieren Der Code lautet wie folgt:

tpl.html

Code kopieren Der Code lautet wie folgt:

Hallo

http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http: Eine Ajax-ähnliche Methode funktioniert gut

Code kopieren Der Code lautet wie folgt:

HTTP-Anfragemethode 1

          
• 
  {{x.Name}} {{x.Country}}
                                                                                   

Methode 2

         
• 
  {{y.aid}} {{y.title}}
                                                                                   

<script><br> //Methode 1<br> var TestCtrl=function($scope,$http){<br>         var p=$http({<br> Methode:'GET',<br>                                      <br>url:'json/date.json'<br><a href="'json/date.json'">           });</a>            p.success(function(response,status,headers,config){<br>                 $scope.names=response;<br>           });<br>            p.error(function(status){<br> console.log(status);<br>           });<br> }<br> //Methode 2<br> Funktion TestCtrl2($scope,$http){<br>            $http.get('json/yiqi_article.json').success(function(response){<br>                   $scope.info=response;<br>         });<br> }<br> </script>

http://2.liteng.sinaapp.com/angularjsTest/ajax.html

Alle oben genannten Codes: https://github.com/litengdesign/angularjsTest

Demo implementiert: http://2.liteng.sinaapp.com/angularjsTest/index.html

Was das Routing (Router) und die Direktive (Direktive) von AngularJS betrifft, werde ich das nächste Mal separat darauf eingehen.