Une brève introduction aux notes d'étude d'AngularJS

Une brève introduction aux notes d'étude d'AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:38:02

original

1008 Les gens l'ont consulté

1.Introduction à AngularJs

AngularJS est un framework structurel conçu pour les applications WEB dynamiques. Il vous permet d'utiliser HTML comme langage de modèle et, en étendant la syntaxe HTML, vous pouvez créer les composants de votre application de manière plus claire et plus concise. Son innovation réside dans le fait qu'il utilise la liaison de données et l'injection de dépendances pour vous éviter d'écrire beaucoup de code. Tout cela est implémenté via Javascript côté navigateur, ce qui le rend également parfaitement intégré à toute technologie côté serveur.

Cela dit, je suppose que vous ne comprenez rien. . . Est-ce vrai ? Ne vous inquiétez pas, permettez-moi de parler de certaines de ses fonctionnalités : modularité, liaison de données bidirectionnelle, injection de dépendances et instructions. Étudions ces fonctionnalités ci-dessous.

2.angularjs est basé sur le concept MVC

Ce qu'on appelle MVC est module (modèle de données), vue (vue), contrôleur (contrôleur)

En fait, angulairejs combine ces trois modules. Voici un schéma de modèle que j'ai dessiné. Examinons-le d'abord :

3. Explication combinée

Comme mentionné ci-dessus, les caractéristiques d'angularjs sont : la modularisation, l'injection de dépendances, la liaison bidirectionnelle et les instructions. Maintenant, laissez-moi vous l'expliquer en me basant sur l'image ci-dessus :

Modularité : Les quatre carrés en dessous du filtre, directive... dans l'image ci-dessus sont les quatre méthodes représentatives du module (j'expliquerai l'usage et la fonction de chaque fonction une par une plus tard), qui peuvent aussi être comprises . En tant que petits modules, chaque module a des fonctions différentes, mais la division du travail est claire et la structure est claire, réalisant la modularisation.

Injection de dépendances : Les quatre petits modules mentionnés ci-dessus semblent indépendants, mais ils sont interdépendants et peuvent se référencer les uns les autres pour réaliser des fonctions puissantes (comment faire référence sera expliqué en détail plus tard) ), c'est l'injection de dépendances.

Instruction : Comme le montre l'image ci-dessus, l'instruction est la méthode directive dans l'image. Il existe de nombreuses instructions intégrées dans Angularjs, telles que ng-app (spécifier la portée d'Angularjs), ng-model (définir un modèle de données et implémenter une liaison bidirectionnelle), ng-repeat (répéter une étiquette), ng- change ( Surveillez si la valeur de la balise a changé), etc., et la directive ici est la fonction la plus importante est la directive personnalisée (certains tutoriels disent également que c'est une extension du HTML).

Liaison bidirectionnelle : la liaison bidirectionnelle est le module et la vue dans l'image ci-dessus, c'est-à-dire la liaison bidirectionnelle des données et de la vue. La directive ng-model que nous venons de mentionner sera utilisée.

4. Regardez un exemple simple de liaison bidirectionnelle.

index.html :

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

Copier après la connexion

Vous pouvez transférer le code ci-dessus dans le navigateur et l'exécuter (notez l'adresse faisant référence à angulairejs). Vous serez surpris de constater qu'angularjs est vraiment puissant ! !

Laissez-moi vous expliquer brièvement les endroits difficiles à comprendre dans le code ci-dessus :

ng-app spécifie la portée de l'application, ce qui signifie que l'intégralité du code HTML peut reconnaître angulairejs.
ng-model lie le texte du nom du modèle de données à l'élément et la valeur d'entrée de l'entrée sera stockée dans ce modèle.
{{text}} Il s'agit d'une façon d'écrire une expression dans angulairejs, c'est-à-dire que le texte au milieu est une variable qui correspond au nom du modèle ci-dessus. Il peut surveiller les modifications de la valeur d'entrée en temps réel et mettre à jour la vue. affichage en temps réel

Haha, Angularjs est assez simple. J'espère que cette petite note pourra susciter l'intérêt de tout le monde pour Angularjs. Je continuerai à mettre à jour les notes d'étude d'Angularjs plus tard. J'espère que cela aide tout le monde. S'il y a quelque chose que vous ne comprenez pas dans les notes ci-dessus, demandez-le-moi et j'y répondrai certainement pour vous. Je vous souhaite à tous une vie heureuse !