AngularJS
składniki

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
Szukaj…


Parametry

Parametr Detale
= Do korzystania z dwukierunkowego powiązania danych. Oznacza to, że jeśli zaktualizujesz tę zmienną w zakresie komponentów, zmiana zostanie odzwierciedlona w zakresie nadrzędnym.
< Powiązania jednokierunkowe, gdy chcemy po prostu odczytać wartość z zakresu nadrzędnego i nie aktualizować jej.
@ Parametry ciągu
I Do wywołań zwrotnych na wypadek, gdyby Twój komponent musiał wyprowadzić coś do swojego nadrzędnego zakresu.
- -
Haki cyklu życia Szczegóły (wymaga wersji kątowej> = 1.5.3)
$ onInit () Wywoływany na każdym kontrolerze po zbudowaniu wszystkich kontrolerów elementu i zainicjowaniu ich powiązań. To dobre miejsce na umieszczenie kodu inicjalizacji kontrolera.
$ onChanges (ChangesObj) Wywoływany za każdym razem, gdy aktualizowane są powiązania jednokierunkowe. changesObj to skrót, którego klucze są nazwami powiązanych właściwości, które uległy zmianie, a wartości są obiektem w postaci { currentValue, previousValue, isFirstChange() } .
$ onDestroy () Wywoływany na kontrolerze, gdy jego zawierający zakres zostanie zniszczony. Użyj tego haka, aby uwolnić zasoby zewnętrzne, zegarki i programy obsługi zdarzeń.
$ postLink () Wywoływany po połączeniu tego elementu kontrolera i jego elementów potomnych. Ten haczyk można uznać za analogiczny do haków ngAfterViewInit i ngAfterContentInit w Angular 2.
$ doCheck () Wywoływany na każdym kroku cyklu podsumowania. Daje możliwość wykrywania zmian i działania na ich podstawie. Wszelkie działania, które chcesz podjąć w odpowiedzi na wykryte zmiany, należy wywołać z tego haka; zaimplementowanie tego nie ma wpływu na wywołanie $ onChanges.

Uwagi

Komponent jest specjalnym rodzajem dyrektywy, która wykorzystuje prostszą konfigurację odpowiednią dla struktury aplikacji opartej na komponentach. Komponenty zostały wprowadzone w Angular 1.5, przykłady w tej sekcji nie będą działać ze starszymi wersjami AngularJS.

Kompletny przewodnik dla programistów na temat składników jest dostępny na https://docs.angularjs.org/guide/component

Podstawowe elementy i haki cyklu życia

Co to jest komponent?

  • Komponent to w zasadzie dyrektywa, która wykorzystuje prostszą konfigurację i jest odpowiednia dla architektury opartej na komponentach, o to właśnie chodzi w Angular 2. Pomyśl o komponencie jak o widżecie: Fragment kodu HTML, którego możesz użyć ponownie w kilku różnych miejscach w swojej aplikacji internetowej.

Składnik 

angular.module('myApp', [])
    .component('helloWorld', {
        template: '<span>Hello World!</span>'
    });

Narzut 

<div ng-app="myApp"> 
  <hello-world> </hello-world>
</div>

Demo na żywo

Korzystanie z danych zewnętrznych w komponencie:

Możemy dodać parametr, aby przekazać nazwę do naszego komponentu, który byłby użyty w następujący sposób: 

angular.module("myApp", [])
  .component("helloWorld",{
    template: '<span>Hello {{$ctrl.name}}!</span>',
    bindings: { name: '@' }
  });

Narzut 

<div ng-app="myApp"> 
  <hello-world name="'John'" > </hello-world>
</div>

Demo na żywo

Używanie kontrolerów w komponentach

Przyjrzyjmy się, jak dodać do niego kontroler. 

angular.module("myApp", [])
  .component("helloWorld",{
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: { name: '@' },
      controller: function(){
        this.myName = 'Alain';
      }
  });

Narzut 

<div ng-app="myApp">  
  <hello-world name="John"> </hello-world>
</div>

CodePen Demo

Parametry przekazywane do komponentu są dostępne w zakresie kontrolera tuż przed $onInit funkcji $onInit przez Angular. Rozważ ten przykład: 

angular.module("myApp", [])
  .component("helloWorld",{
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: { name: '@' },
      controller: function(){
        this.$onInit = function() {
          this.myName = "Mac" + this.name;
        }
      }
  });

W powyższym szablonie wyświetliłoby się „Hello John, I'm MacJohn!”.

Zauważ, że $ctrl jest domyślną wartością kątową dla controllerAs jeśli nie jest określona.

Demo na żywo


Używanie „wymagania” jako obiektu

W niektórych przypadkach może być konieczne uzyskanie dostępu do danych z komponentu nadrzędnego w komponencie.

Można to osiągnąć, określając, że nasz komponent wymaga komponentu nadrzędnego, wymaganie da nam odniesienie do wymaganego kontrolera komponentu, który może następnie zostać użyty w naszym kontrolerze, jak pokazano w poniższym przykładzie:

Zauważ, że wymagane kontrolery są gwarantowane, że są gotowe dopiero po zakończeniu haka $ onInit. 

angular.module("myApp", [])
  .component("helloWorld",{
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: { name: '@' },
      require: {
        parent: '^parentComponent'
      },
      controller: function () {
        // here this.parent might not be initiated yet

        this.$onInit = function() {
           // after $onInit, use this.parent to access required controller
           this.parent.foo();
        }

      }
  });

Pamiętaj jednak, że tworzy to ścisłe powiązanie między dzieckiem a rodzicem.

Komponenty W kątowym JS

Komponenty w angularJS mogą być wizualizowane jako niestandardowa dyrektywa (<html> to w dyrektywie HTML, a coś takiego będzie niestandardową dyrektywą <WSZYSTKO>). Składnik zawiera widok i kontroler. Kontroler zawiera logikę biznesową powiązaną z widokiem, który widzi użytkownik. Komponent różni się od dyrektywy kątowej, ponieważ zawiera mniej konfiguracji. Składnik kątowy można zdefiniować w ten sposób. 

angular.module("myApp",[]).component("customer", {})

Komponenty są zdefiniowane w modułach kątowych. Zawierają dwa argumenty, jeden to nazwa komponentu, a drugi to obiekt zawierający parę klucz-wartość, która określa, który widok i kontroler będzie w ten sposób używać. 

angular.module("myApp",[]).component("customer", {
    templateUrl : "customer.html", // your view here 
    controller: customerController, //your controller here
    controllerAs: "cust"        //alternate name for your controller 
})

„myApp” to nazwa aplikacji, którą tworzymy, a klient to nazwa naszego komponentu. Teraz, aby wywołać go w głównym pliku HTML, po prostu umieścimy go w ten sposób 

<customer></customer>

Teraz ta dyrektywa zostanie zastąpiona przez określony widok i logikę biznesową zapisaną w kontrolerze.

UWAGA: Pamiętaj, że komponent przyjmuje obiekt jako drugi argument, podczas gdy dyrektywa przyjmuje funkcję fabryki jako argument.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow