Wie funktioniert die AngularJS-Komponente? Anwendungsbeispiele für die AngularJS-Komponente-js-Tutorial-php.cn

Wie funktioniert die AngularJS-Komponente? Anwendungsbeispiele für die AngularJS-Komponente

寻∝梦

Freigeben： 2018-09-08 14:43:21

Original

1317 Leute haben es durchsucht

In diesem Artikel wird die Einführung der Komponente angularjs vorgestellt. Dann lesen Sie gleich diesen Artikel

Vorwort zu AngularJS:

Die derzeit beliebtesten Front-End-JS-Frameworks sind VUE, REACK und ANGULAR. Diese drei Gemeinsame Merkmale von Frameworks sind die bidirektionale Datenbindung und die Komponentenentwicklung. Vor der Version von Angular1.5 wurde die Direktive als Komponentenform verwendet, und die Direktive selbst ist eine Anweisung und keine Komponente, sodass sie nicht unbedingt die Verantwortung einer Komponente übernehmen kann. Daher wurde die Komponentenkomponente in Angular1 von Google in Version 5 eingeführt die Last der Komponentenentwicklung in Anwendungen zu tragen. Wie funktioniert die Komponente? Wie soll es verwendet werden? In diesem Kapitel werden wir die Verwendung von Komponentenkomponenten im Detail untersuchen.

In AngularJS eignet sich Component eher für die komponentenbasierte Entwicklung als für die Direktive.

Schauen wir uns zunächst ein relativ einfaches Komponentenbeispiel an.

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>

Nach dem Login kopieren

In index.html definieren wir ein hero-detail-Tag. Die Deklarationsmethode dieses Tags ähnelt der Direktive. Beachten Sie, dass in diesem Tag ein definiert ist . Attribut hero-detail, was ist der Zweck dieses definierten Attributs? Werfen wir einen Blick nach unten

index.js

(function(angular){

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

Nach dem Login kopieren

In index.js haben wir diesen Controller deklariert und im Controller haben wir diese Codezeile geschrieben

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

Nach dem Login kopieren

Glauben Sie, dass es vorsichtige Freunde sind Ich habe bereits gesehen, dass dies dem Attribut hero='ctrl.hero' entspricht, das wir in index.html deklariert haben, das der Schlüssel zur Kommunikation in der Komponente ist.

heroDetail.html

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

Nach dem Login kopieren

In heroDetail.html zeigen wir den von index.html übertragenen Wert an.

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);

Nach dem Login kopieren

In heroDetail.js deklarieren wir die Komponente von heroDetail. Hier sollten wir auf die durch horizontale Balken getrennten Tags in index.html achten, die sein müssen Wird im JS-Code verwendet. Hump-Markierungsanzeige. Darunter: Bindungsobjekte, die das Kommunikationsprotokoll in der Komponente darstellen.

Das ist nun der Anzeigeeffekt auf der Seite:
Wie funktioniert die AngularJS-Komponente? Anwendungsbeispiele für die AngularJS-Komponente

Wenn wir Bindungen für die Datenbindung verwenden, empfiehlt der Beamte nicht, „=“ für die Datenbindung zu verwenden ., weil „=“ eine bidirektionale Datenbindung ist, was bedeutet, dass, wenn wir die Daten in der Komponente ändern, auch der Wert in der übergeordneten Komponente geändert wird. Die offizielle Empfehlung lautet, dass wir „<“ für die unidirektionale Datenbindung verwenden. Es ist erwähnenswert, dass auch bei Verwendung von „<“ auf dasselbe Objekt in der übergeordneten Komponente und im Komponentenbereich verwiesen wird, wenn Sie dies wünschen Ändern Sie die Komponentenobjekteigenschaft oder das Array-Element in der übergeordneten Komponente, wird die Änderung weiterhin in der übergeordneten Komponente widergespiegelt. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual , um mehr zu erfahren.)

OK, nach der Einführung der Datenbindung erfolgt die Bindung zwischen der Komponente und der Methode der übergeordneten Komponente ist Wie geht das weiter?
Sehen wir uns das folgende Beispiel an

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>

Nach dem Login kopieren

index.js

(function(angular){

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

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

    });})(angular);

Nach dem Login kopieren

heroDetail.html

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

Nach dem Login kopieren

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);

Nach dem Login kopieren

Im Code verwenden wir das „&“-Symbol, um eine Methode onLog() zu binden. Es ist zu beachten, dass der Parameter bei der Übergabe in JSON-Form übergeben wird . von. Wenn wir auf diese Weise auf die Schaltfläche „Ausgabeprotokoll“ klicken, wird der Inhalt ausgegeben, den wir in die Eingabe eingegeben haben.

Okay, dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AngularJS-Benutzerhandbuch , um mehr zu erfahren. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen). unten.

Das obige ist der detaillierte Inhalt vonWie funktioniert die AngularJS-Komponente? Anwendungsbeispiele für die AngularJS-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!