Comment fonctionne le composant AngularJS ? Exemples d'utilisation du composant angulairejs-js tutoriel-php.cn

Comment fonctionne le composant AngularJS ? Exemples d'utilisation du composant angulairejs

寻∝梦

Libérer： 2018-09-08 14:43:21

original

1297 Les gens l'ont consulté

Cet article présente l'introduction du composant angularjs. Voyons comment fonctionne le composant. Alors commencez tout de suite à lire cet article

Préface sur Angularjs :

Les frameworks JS front-end les plus populaires sont désormais comme VUE, REACK et ANGULAR. les caractéristiques communes des frameworks sont la liaison de données bidirectionnelle et le développement de composants. Avant la version d'angular1.5, la directive était utilisée comme formulaire de composant, et la directive elle-même est une instruction, pas un composant, elle ne peut donc pas assumer la responsabilité d'un composant, donc Google dans angulaire1 Le composant composant a été lancé dans la version 5. pour assumer le fardeau du développement des composants dans les applications. Alors, comment fonctionnent les composants ? Comment doit-il être utilisé ? Nous explorerons l’utilisation des composants en détail dans ce chapitre.

Dans AngularJS, Component est plus adapté au développement basé sur des composants qu'à la directive.

Regardons d'abord un exemple de composant relativement simple.

index.html

<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-controller="MainCtrl as ctrl">

    <h3>hero</h3>
    <br>
    <hero-detail hero=&#39;ctrl.hero&#39;></hero-detail>


    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <script src="js/heroDetail.js"></script></body></html>

Copier après la connexion

Dans index.html nous définissons une balise hero-detail. La méthode de déclaration de cette balise est similaire à la directive. cette balise. Un attribut hero-detail est défini. Quel est le but de cet attribut défini ? Regardons

index.js

(function(angular){

  angular.module(&#39;ComponentTestApp&#39;,[])
    .controller(&#39;MainCtrl&#39;,function(){
      this.hero = {
        name:&#39;Sunday&#39;
      }
    });})(angular);

Copier après la connexion

Dans index.js nous déclarons ce contrôleur, et dans le contrôleur nous écrivons cette ligne de code

this.hero = {
        name:&#39;Sunday&#39;
      }

Copier après la connexion

Je crois que les amis attentifs ont déjà remarqué que oui, cela correspond à l'attribut hero='ctrl.hero' que nous avons déclaré dans index.html, qui est la clé de communication dans le composant.

heroDetail.html

<h1>HeroName: {{$ctrl.hero.name}}</h1>

Copier après la connexion

Dans heroDetail.html, nous affichons la valeur transférée depuis index.html.

heroDetail.js

(function(angular){

  function HeroDetailController(){

  }

  angular.module(&#39;ComponentTestApp&#39;)
    .component(&#39;heroDetail&#39;,{
      templateUrl:&#39;views/heroDetail.html&#39;,
      controller:HeroDetailController,
      bindings:{
        hero:&#39;=&#39;
      }
    });})(angular);

Copier après la connexion

Dans heroDetail.js, nous déclarons le composant de heroDetail. Ici, nous devons faire attention aux balises affichées séparées par des barres horizontales dans index.html, dans le fichier. js, la notation CamelCase est requise pour l'affichage. Parmi eux : l'objet de liaison, représentant le protocole de communication dans le composant.

Voici maintenant l'effet d'affichage sur la page :
Comment fonctionne le composant AngularJS ? Exemples dutilisation du composant angulairejs

Lorsque nous utilisons des liaisons pour la liaison de données, le responsable ne recommande pas d'utiliser "=" pour la liaison de données , car "=" est une liaison de données bidirectionnelle, ce qui signifie que lorsque nous modifions les données du composant, la valeur de son composant parent sera également modifiée. La recommandation officielle est d'utiliser "<" pour la liaison de données unidirectionnelle. Il convient de noter que même si nous utilisons "<", le même objet est référencé dans le composant parent et dans la portée du composant, donc si vous le souhaitez. modifier la propriété d'objet du composant ou l'élément de tableau dans le composant parent reflétera toujours la modification. (Si vous voulez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour en savoir)

OK, après avoir introduit la liaison de données, la liaison entre le composant et la méthode du composant parent est Comment ça se passe ?
Regardons l'exemple suivant

index.html

<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-controller="MainCtrl as ctrl">

    <hero-detail on-log="ctrl.log(text)"></hero-detail>



    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
    <script src="js/heroDetail.js"></script></body></html>

Copier après la connexion

index.js

(function(angular){

  angular.module(&#39;ComponentTestApp&#39;,[])
    .controller(&#39;MainCtrl&#39;,function(){

      this.log = function(text){
        console.log("输出的内容为： " + text);
      }

    });})(angular);

Copier après la connexion

heroDetail.html

<input type="text" placeholder="被输出的内容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>

Copier après la connexion

heroDetail.js

(function(angular){

  function HeroDetailController($scope){

    $scope.text = &#39;&#39;;
    var ctrl = this;

    $scope.onLog = function(){
      ctrl.onLog({text:$scope.text});
    }
  }

  angular.module(&#39;ComponentTestApp&#39;)
    .component(&#39;heroDetail&#39;,{
      templateUrl:&#39;views/heroDetail.html&#39;,
      controller:HeroDetailController,
      bindings:{
        onLog:&#39;&&#39;
      }
    });})(angular);

Copier après la connexion

Dans le code, nous utilisons le symbole "&" pour lier une méthode onLog(). Cette méthode reçoit un paramètre texte. Il convient de noter que lorsque le paramètre est passé, est transmis sous forme de json. De cette façon, lorsque nous cliquons sur le bouton OutputLog, le contenu que nous avons entré dans l'entrée sera affiché.

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation d'AngularJS pour en savoir plus). Si vous avez des questions, vous pouvez laisser un message). ci-dessous.

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!