AngularJS ist ein High-End-Front-End-MVC-Entwicklungsrahmen, das von Google entwickelt wurde.
AngularJS Offizielle Website: https://angularjs.org/ Die offizielle Website hat Demo, und FQ kann möglicherweise darauf zugreifen
AngularJS Chinesische Gemeinschaft: http://www.angularjs.cn/ für Anfänger geeignet
Referenzdatei: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Notizen bei Verwendung von Angular
Zitieren Sie die AngularJS-Bibliothek: https: //github.com/litengdesign/angularjstest/blob/master/angular-1.0.1 .... Sie können sie in dem Beispiel in diesem Abschnitt auf den GitHub herunterladen.
Sie müssen Ng-App = "AppName" in den Bereich, den Sie verwenden, oder direkt ng-App (global) hinzufügen müssen.
Legen Sie den Controller ng-controller = "Strg" ein.
Bitte beachten Sie die folgenden Punkte beim Testen des Beispiels
Sie müssen den AngularJS -Code vor dem Kopf einführen. Der Autor verwendet Angular-1.0.1.min.js. Bitte achten Sie auf den Versionsunterschied.
Alle kleinen Beispiele werden in den folgenden Bereichen durchgeführt. Denken Sie daran, NG-App in den aktiven Bereich hinzuzufügen.
Im Folgenden finden Sie einige kleine Fälle, um die gemeinsamen Anweisungen und Verwendung von AngularJS -Standardeinstellungen zu veranschaulichen.
Hallo Weltprogramm (Doppeldatenbindung)
Verwenden Sie ng-model = {{name}}, um Daten zu binden
Die Codekopie lautet wie folgt:
<Label für = "Name"> Name: </label>
<Eingabe type = "text" ng-model = "name" id = "name"/>
<hr>
Hallo: {{Name || 'Liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
Kleiner Fall von Ereignisbindungsgebrauch
Die Codekopie lautet wie folgt:
<div>
Einheitspreis: <Eingabe type = "number" min = 0 ng-model = "preis" ng-init = "preis = 299">
Menge: <Eingabe type = "number" min = 0 ng-model = "Menge" ng-init = "quantity = 1">
<br>
Gesamtpreis: {{(Preis) * (Menge)}}
<dt>
<dl> Hinweis: </dl>
<dd> Eingabe mit html5: <a href = "http://www.w3school.com.cn/html5/att_input_type
<dd> ng-init: Setzen Sie den Anfangswert </dd>
</dt>
</div>
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
NG-Init: Der Attributwert kann standardmäßig angegeben werden
Die Codekopie lautet wie folgt:
<p ng-init = "value = 'Hello World'"> {{value}} </p>
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
NG-Repeat: Wird verwendet, um Daten ähnlich wie ich für Informationen in JS iterieren
Die Codekopie lautet wie folgt:
<div ng-init = "friends = [{name: 'jhon', Alter: 25}, {Name: 'Mary', Alter: 28}]"> </div>
<p> Ich habe {{Friends.length}} Freunde. Sie sind </p>
<ul>
<li ng-repeat = "Freund in Freunden">
[{{$ Index+1}}]: {{Freund.Name}} Alter ist: {{Freund.age}}
</li>
</ul>
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
NG-Klick: DOM-Klick-Ereignis
Die Codekopie lautet wie folgt:
<div ng-controller = "Strg">
<button ng-dblclick = 'showmsg ()'> {{a}} </button>
</div>
<Script>
Funktion Strg ($ Scope) {
$ scope.a = 'Hallo';
$ scope.showmsg = function () {
$ scope.a = 'Welt';
}
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ng klick.html
NG-Show: Elementanzeige einstellen
Hinweis: ng-show = "! Xx": Hinzufügen vor dem Attributwert! Es bedeutet, dass es sicher angezeigt wird, wenn nicht hinzugefügt! Nicht angezeigt, wenn es ungewiss ist
Die Codekopie lautet wie folgt:
<div ng-show = "! show">
ng-show = "! Show"
</div>
<div ng-show = "show">
ng-show = "show"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
NG-Hide: Element verstecken
Die Codekopie lautet wie folgt:
<div ng-hide = "aaa">
ng-hide = "aaa"
</div>
<div ng-hide = "! AAA">
ng-show = "! AAA"
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
Verwenden Sie ng-show, um Toggle-Effekte zu erstellen
Die Codekopie lautet wie folgt:
<h2> Umschütten </h2>
<a href ng-klick = "showlog =! showlog"> show Logo </a>
<div ng-show = "showlog">
<img ng-src = "http://liteng.org/sites/default/files/logo.png">
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
NG-Stil: Ähnlich dem Standardstil
Bitte beachten Sie hier das Schreibformat: Zeichenfolgen müssen in Zitate enthalten sein
Die Codekopie lautet wie folgt:
<div ng-style = "{width: 100+'px', Höhe: 200+'px', HintergrundColor: 'Red'}">
Kasten
</div>
http://2.liteng.sinaapp.com/angularjstest/ng-style.html
Filter: Filterfeld
Die Codekopie lautet wie folgt:
<div> {{9999 | Nummer}} </div> <!-9.999->
<div> {{9999+1 | Nummer: 2}} </div> <!-10.000,00->
<div> {{9*9 | Währung}} </div> <!-$ 81.00->
<div> {{'Hello World' | Großbuchstaben}} </div> <!-Hallo Welt->
http://2.liteng.sinaapp.com/angularjstest/filter.html
NG-Template: Kann Vorlagen laden
Die Codekopie lautet wie folgt:
<div ng-include = "'tpl.html'"> </div>
tpl.html
Die Codekopie lautet wie folgt:
<h1> Hallo </h1>
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html
$ http: Eine ähnliche Methode wie Ajax funktioniert sehr gut
Die Codekopie lautet wie folgt:
<div ng-controller = "testctrl">
<h2> http Request-Methode 1 </H2>
<ul>
<li ng-repeat = "x in Namen">
{{x.name}}+{{{x.country}}
</li>
</ul>
</div>
<h2> Methode 2 </H2>
<div ng-controller = "testctrl2">
<ul>
<li ng-repeat = "y in info">
{{y.aid}}+{{y.title}}
</li>
</ul>
</div>
<Script>
// Methode 1
var testCtrl = Funktion ($ scope, $ http) {
var p = $ http ({{
Methode: 'Get',
URL: 'json/date.json' '
});
P.Success (Funktion (Antwort, Status, Header, config) {
$ scope.names = Antwort;
});
P.Error (Funktion (Status) {
console.log (Status);
});
}
// Methode 2
Funktion testCtrl2 ($ scope, $ http) {
$ http.get ('json/yiqi_article.json'). Erfolg (Funktion (Antwort) {
$ scope.info = Antwort;
});
}
</script>
http://2.liteng.sinaapp.com/angularjstest/ajax.html
Alle oben genannten Codes: https://github.com/litengdesign/angularjstest
Die implementierte Demo: http://2.liteng.sinaapp.com/angularjstest/index.html
Was den Router und die Richtlinie von AngularJs betrifft, werde ich ihn beim nächsten Mal separat herausnehmen.