Contrôleur d'apprentissage AngularJs, liaison de données, explication détaillée de la portée-js tutoriel-php.cn

Contrôleur d'apprentissage AngularJs, liaison de données, explication détaillée de la portée

零下一度

Libérer： 2017-07-23 18:05:21

original

1383 Les gens l'ont consulté

1. Contrôleur :

Concept : Dans angulaireJS, le contrôleur est une fonction qui est utilisée pour ajouter des fonctions supplémentaires à la portée de la vue et pour définir le rôle. . L'état initial du domaine et ajouter un comportement personnalisé.

Déclaration du contrôleur : app.controller('controllerName',function($scope){...})

//    控制器定义//    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color=&#39;red&#39;>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

Copier après la connexion

Utilisation du contrôleur : Ajoutez ng-controller si nécessaire (sur une certaine balise HTML).

<body ng-app="myapp" ng-controller="myCtrl">

Copier après la connexion

D'après ce qui précède, la définition et l'utilisation du contrôle sont relativement simples, mais beaucoup de gens ne comprendront pas la fonction et l'utilisation du contrôleur. Je ne sais pas quel code doit être écrit dans le contrôleur. Certaines personnes pousseront l'intégralité du code dans le contrôleur. Je pense personnellement que le contrôleur n'est qu'un lien entre la vue de la page et le mode. ne gère que certaines liaisons de données et événements. Une série de logiques simples telles que la liaison, l'accès au serveur spécifique ou la lecture de données, etc. devraient être implémentées dans le service. Je vous parlerai en détail du service la prochaine fois.

J'ai simplement trié les éléments auxquels il faut faire attention lors de l'utilisation du contrôle pour votre référence :

1) Simplifiez autant que possible les opérations liées au contrôleur et au $scope.
2) Ne réutilisez pas Controller. Un contrôleur n’est généralement responsable que d’une petite partie de la vue.
3) Ne manipulez pas le DOM dans le Controller, cela n'est pas de la responsabilité du contrôleur.
4) Essayez de ne pas effectuer de filtrage de données ou d'opérations de données dans le contrôleur.
5) De manière générale, les contrôleurs ne s'appelleront pas. L'interaction entre les contrôleurs se fera via des événements

2. Portée ($scope)

Scope est également mentionné dans le contrôleur ci-dessus. Le contrôleur effectue principalement des opérations liées à $scope. Permettez-moi de parler brièvement du rôle de scope dans AngularJs et de son cycle de vie. Le résumé du partage interne est publié pour tout le monde. à partager :

3. Liaison de données :

La liaison de données AngularJs a également plusieurs liaisons, je vais les lister pour vous. Peut-être que tout le monde les a utilisées, et certains amis n'en ont peut-être pas utilisé certaines.

{{}}: 🎜> Fonction : {{ func()}} 🎜> Expression : {{a+b}}

' s ' s ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ Expression : {{a+b}}

Cette méthode est la liaison d'expression la plus courante, tant que les rencontres angulaires l'expression dans le cadre d'Angular L'expression est automatiquement analysée en une expression ou une variable reconnue par HTML.

2) Méthode de directive (ng-bind) :

Cette méthode de liaison consiste à ajouter la directive ng-bind sur l'élément, puis Angular analyse la directive et exécute la liaison.

3) ng-model :

Cette méthode est principalement utilisée dans la soumission de formulaires pour obtenir une liaison de données bidirectionnelle et des données bidirectionnelles entre le contenu de la page et le modèle.

4) ng-bind-html :

Cette méthode est principalement utilisée pour lier des éléments HTML, car Angularjs n'analyse pas les balises HTML par défaut et les affiche directement, je souhaite donc les ajouter à la page. Vous pouvez utiliser cette méthode de liaison pour afficher le contenu des balises HTML, mais cette liaison doit faire référence à un fichier js sérialisé.

 <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js?1.1.11"></script>

Copier après la connexion

5) ng-bind-template :

Cette méthode peut lier plusieurs variables et expressions à la fois.

Scénarios d'utilisation :

La page d'accueil utilise ng-bind, les pages du modèle peuvent utiliser des crochets {{}} et le formulaire utilise ng-model,

Défauts de la syntaxe {{}} : Il est possible de voir {} lorsque l'utilisateur rafraîchit constamment ; et lorsque le réseau n'est pas bon, il est également possible de voir Le code suivant Le code global pour les cinq méthodes ci-dessus :

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Contrôleur d'apprentissage AngularJs, liaison de données, explication détaillée de la portée