Maison >interface Web >js tutoriel >Angular.js Partage de matériel vidéo d'enseignement du chinois

Angular.js Partage de matériel vidéo d'enseignement du chinois

巴扎黑
巴扎黑original
2017-08-30 14:48:201457parcourir

AngularJS est un framework de développement front-end conçu et développé par les développeurs de Google pour vous aider à simplifier le fardeau du développement front-end. AngularJS se classe au premier rang parmi les frameworks front-end mondiaux. Actuellement, il existe très peu de didacticiels vidéo AngularJS chinois en Chine, c'est pourquoi cet ensemble de « Tutoriels vidéo d'enseignement du chinois angulaire.js » a vu le jour !

AngularJS est conçu pour surmonter les lacunes du HTML dans la création d'applications. HTML est un bon langage déclaratif conçu pour l'affichage de texte statique, mais il est faible lorsqu'il s'agit de créer des applications WEB. J'ai donc fait quelques travaux (des astuces si vous voulez) pour que le navigateur fasse ce que je voulais.

Habituellement, nous utilisons les technologies suivantes pour résoudre les lacunes de la technologie des pages Web statiques dans la création d'applications dynamiques :

Bibliothèque de classes - Une bibliothèque de classes est un ensemble de fonctions qui peuvent vous aider à écrire du WEB candidatures . C'est votre code qui prend le contrôle, et c'est vous qui décidez quand utiliser la bibliothèque. Les bibliothèques de classes incluent : jQuery, etc.

Framework - Un framework est une application WEB spéciale déjà implémentée. Il vous suffit de la remplir avec une logique métier spécifique. Le framework joue ici un rôle de premier plan, appelant votre code selon une logique d'application spécifique. Les frameworks incluent : knockout, sproutcore, etc.

Angular.js Partage de matériel vidéo denseignement du chinois

Adresse de lecture vidéo : http://www.php.cn/course/644.html

Difficultés à apprendre cela Vidéo:

1. Contrôler l'affichage et l'état caché de l'élément

Appelez les instructions ng-show, ng-hide, ng-switch sur la page pour lier la valeur de l'attribut $. scope object

On dans la directive ng-switch est facultatif. Lorsque on correspond à plusieurs ou certains éléments de la directive ng-switch-when, ces éléments sont affichés s'il n'y a pas de ng-switch-default correspondant. il est affiché.

<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. Fonction de vérification de formulaire de base

$pristine : Si le contenu du formulaire ou du contrôle n'a pas été saisi

$dirty : Si le contenu du formulaire ou du contrôle a été saisi

$valid : Si le contenu du formulaire ou du contrôle a été vérifié

$invalid : Si le contenu du formulaire ou de l'espace n'a pas été vérifié

$error : message d'erreur lors de la vérification du formulaire ou du contrôle

<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. Le contrôle de case à cocher et le contrôle redio dans le formulaire

lient les propriétés du contrôleur via ng-model. Une fois la liaison terminée, la valeur liée sera utilisée comme contrôle lors du premier chargement. État d'initialisation.

<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 représente la valeur renvoyée après la sélection, cette dernière représente la valeur renvoyée. valeur renvoyée lorsqu'elle n'est pas sélectionnée, redio ne renverra la valeur sélectionnée que si elle est sélectionnée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn