Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der Grundkenntnisse und Beispiele von Angularjs_AngularJS

Zusammenfassung der Grundkenntnisse und Beispiele von Angularjs_AngularJS

WBOY
WBOYOriginal
2016-05-16 16:18:271056Durchsuche

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:





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:




<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.

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