AngularJS
składniki
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>
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>
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>
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.
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.
