Angular.js Teilen von Chinesisch-Lehrvideomaterial

AngularJS ist ein Front-End-Entwicklungsframework, das von Google-Entwicklern entworfen und entwickelt wurde, um Ihnen dabei zu helfen, den Aufwand der Front-End-Entwicklung zu vereinfachen. AngularJS steht an erster Stelle unter den globalen Front-End-Frameworks. Derzeit gibt es in China nur sehr wenige chinesische AngularJS-Video-Tutorials, daher ist diese Reihe von „angular.js Chinese Teaching Video Tutorials“ entstanden!

AngularJS wurde entwickelt, um die Mängel von HTML beim Erstellen von Anwendungen zu überwinden. HTML ist eine gute deklarative Sprache, die für die statische Textanzeige entwickelt wurde, aber beim Erstellen von WEB-Anwendungen ist sie schwach. Also habe ich einige Arbeiten durchgeführt (Tricks, wenn Sie so wollen), um den Browser dazu zu bringen, das zu tun, was ich wollte.

Normalerweise verwenden wir die folgenden Technologien, um die Mängel der statischen Webseitentechnologie beim Erstellen dynamischer Anwendungen zu beheben:

Klassenbibliothek – Eine Klassenbibliothek ist eine Sammlung von Funktionen, die Ihnen beim Schreiben von WEB helfen können Anwendungen. Es ist Ihr Code, der die Kontrolle übernimmt, und Sie entscheiden, wann Sie die Bibliothek verwenden. Zu den Klassenbibliotheken gehören: jQuery usw.

Framework – Ein Framework ist eine spezielle, bereits implementierte WEB-Anwendung, die Sie nur mit spezifischer Geschäftslogik füllen müssen. Das Framework spielt hier eine führende Rolle und ruft Ihren Code entsprechend der spezifischen Anwendungslogik auf. Zu den Frameworks gehören: Knockout, Sproutcore usw.

Adresse für die Videowiedergabe: http://www.php.cn/course/644.html

Schwierigkeiten, dies zu lernen Video:

1. Steuern Sie die Anzeige und den ausgeblendeten Zustand des Elements

Rufen Sie die Anweisungen ng-show, ng-hide, ng-switch auf der Seite auf, um den Attributwert des $ zu binden Scope-Objekt

On in der ng-switch-Direktive ist optional. Wenn on mit mehreren oder bestimmten Elementen der ng-switch-when-Direktive übereinstimmt, werden diese Elemente angezeigt. es wird angezeigt.

<div ng-show = {{isShow}}> div </div>
<div ng-hide = {{isHide}}>hide</div>
<ul ng-switch on={{switch}}>
    <li ng-switch-when="1">taoguorong</li>
    <li ng-switch -default>more</li>
</ul>

2. Grundlegende Formularüberprüfungsfunktion

$pristine: Ob der Inhalt des Formulars oder des Steuerelements nicht eingegeben wurde

$dirty: Ob der Inhalt des Formulars oder Steuerelements wurde eingegeben

$valid: Ob der Formular- oder Steuerelementinhalt überprüft wurde

$invalid: Ob der Formular- oder Bereichsinhalt nicht überprüft wurde

$error: Fehlermeldung während der Formular- oder Kontrollüberprüfung

<form name="temp_form" ng-submit="save()">
    <div>
        <input name="t_email" ng-model = "email" type="email" required/>
        <span ng-show="temp_form.t_email.$error.required>            邮件不能为空       </span>
       <span ng-show="temp_form.t_email.$error.email>           邮件格式不对       </span    </div>
     <input type = "button" ng-disabled="temp_form.$invalid" value="提交"/>
</form>

3. Das Checkbox-Control und das Redio-Control im Formular

binden die Eigenschaften des Controllers über ng-model. Sobald die Bindung abgeschlossen ist, wird der gebundene Wert beim ersten Laden als Steuerung verwendet.

<form name="temp_form" ng-submit="save()">
    <div>
        <input name="t_email" ng-model = "email" type="email" required/>
        <span ng-show="temp_form.t_email.$error.required>            邮件不能为空       </span>
       <span ng-show="temp_form.t_email.$error.email>           邮件格式不对       </span    </div>
    <div>
        <input type="checkbox" ng-model = "a"  ng-true-value="同意" ng-false-value = "不同意">同意    </div>
     <div>
        <input type="rediio" ng-model = "a"  value="男">男        <input type="rediio" ng-model = "a"  value="女">女    </div>
     <input type = "button" ng-disabled="temp_form.$invalid" value="提交"/>
</form>

ng-true-value stellt den nach der Auswahl zurückgegebenen Wert dar Der Wert wird zurückgegeben, wenn er nicht ausgewählt ist. Redio gibt den ausgewählten Wert nur zurück, wenn er ausgewählt ist

Das obige ist der detaillierte Inhalt vonAngular.js Teilen von Chinesisch-Lehrvideomaterial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!