Heim > Artikel > Web-Frontend > Wie funktioniert die AngularJS-Komponente? Anwendungsbeispiele für die AngularJS-Komponente

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

寻∝梦Original: 2018-09-08 14:43:211261Durchsuche

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>

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

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

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

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>

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

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 „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>

index.js

(function(angular){

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

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

    });})(angular);

heroDetail.html

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

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

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!

php json html angular JS 对象作用域 input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erstellt man ein Webprojekt mit AngularJs? Detaillierte Einführung in die Erstellung von Webprojekten mit AngularJSNächster Artikel：Wie erstellt man ein Webprojekt mit AngularJs? Detaillierte Einführung in die Erstellung von Webprojekten mit AngularJS

In Verbindung stehende Artikel

Mehr sehen