AngularJS
Компоненты
Поиск…
параметры
| параметр | подробности |
|---|---|
| знак равно | Для использования двусторонней привязки данных. Это означает, что если вы обновите эту переменную в области вашего компонента, это изменение будет отражено в родительской области. |
| < | Односторонние привязки, когда мы просто хотим прочитать значение из родительской области и не обновлять его. |
| @ | Строковые параметры. |
| & | Для обратных вызовов в случае, если ваш компонент должен вывести что-то в свою родительскую область. |
| - | - |
| Крючки LifeCycle | Подробности (требует угловой.версии> = 1.5.3) |
| $ OnInit () | Вызывается на каждом контроллере после того, как все контроллеры на элементе были созданы и инициализированы их привязки. Это хорошее место для ввода кода инициализации для вашего контроллера. |
| $ onChanges (changesObj) | Вызывается каждый раз, когда обновляются односторонние привязки. changesObj - хэш, ключи которого являются именами связанных свойств, которые изменились, а значения являются объектом формы { currentValue, previousValue, isFirstChange() } . |
| $ OnDestroy () | Вызывается контроллером, когда его сдерживающая область уничтожается. Используйте этот крючок для освобождения внешних ресурсов, часов и обработчиков событий. |
| $ postLink () | Вызывается после того, как элемент этого контроллера и его дочерние элементы связаны. Этот крюк можно считать аналогичным крючкам ngAfterViewInit и ngAfterContentInit в Angular 2. |
| $ doCheck () | Вызывается каждый ход цикла дайджеста. Предоставляет возможность обнаруживать изменения и вносить изменения в них. Любые действия, которые вы хотите предпринять в ответ на обнаруженные вами изменения, должны быть вызваны из этого крючка; реализация этого не влияет на то, когда вызывается $ onChanges. |
замечания
Компонент - это особый вид директивы, который использует более простую конфигурацию, которая подходит для структуры приложения на основе компонентов. Компоненты были введены в Angular 1.5, примеры в этом разделе не будут работать со старыми версиями AngularJS.
Полное руководство разработчика о компонентах доступно на https://docs.angularjs.org/guide/component
Основные компоненты и крючки жизненного цикла
Что такое компонент?
- Компонент в основном представляет собой директиву, которая использует более простую конфигурацию и подходит для архитектуры на основе компонентов, что и есть Угловая 2. Подумайте о компоненте в виде виджета: фрагмент кода HTML, который можно повторно использовать в нескольких разных местах вашего веб-приложения.
Составная часть
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
наценка
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Использование внешних данных в компоненте:
Мы могли бы добавить параметр для передачи имени нашему компоненту, который будет использоваться следующим образом:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
наценка
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
Использование контроллеров в компонентах
Давайте посмотрим, как добавить к нему контроллер.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
наценка
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
Параметры, переданные компоненту, доступны в области контроллера непосредственно перед тем, как его функция $onInit Angular. Рассмотрим этот пример:
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;
}
}
});
В шаблоне сверху это отобразит «Привет, Джон, я MacJohn!».
Обратите внимание, что $ctrl - значение Angular по умолчанию для controllerAs если оно не указано.
Использование «require» в качестве объекта
В некоторых случаях вам может потребоваться доступ к данным из родительского компонента внутри вашего компонента.
Этого можно добиться, указав, что наш компонент требует этого родительского компонента. Требование даст нам ссылку на требуемый компонентный контроллер, который затем может быть использован в нашем контроллере, как показано в следующем примере:
Обратите внимание, что требуемые контроллеры гарантированно будут готовы только после крючка $ 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();
}
}
});
Однако имейте в виду, что это создает плотную связь между ребенком и родителем.
Компоненты в угловом JS
Компоненты в angularJS могут быть визуализированы как настраиваемая директива (<html> this в директиве HTML, и что-то вроде этого будет настраиваемой директивой <ANYTHING>). Компонент содержит представление и контроллер. Контроллер содержит бизнес-логику, привязанную к представлению, которое видит пользователь. Компонент отличается от угловой директивы, поскольку он содержит меньшую конфигурацию. Угловой компонент можно определить следующим образом.
angular.module("myApp",[]).component("customer", {})
Компоненты определены на угловых модулях. Они содержат два аргумента: один - это имя компонента, а второй - это объект, который содержит пару значений ключа, которая определяет, какой вид и какой контроллер он будет использовать следующим образом.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
«myApp» - это имя приложения, которое мы создаем, а клиент - это имя нашего компонента. Теперь для вызова его в основном html-файле мы просто поместим его вот так:
<customer></customer>
Теперь эта директива будет заменена указанным вами представлением и бизнес-логикой, которую вы написали в своем контроллере.
ПРИМЕЧАНИЕ. Помните, что компонент принимает объект как второй аргумент, а директива принимает фабричную функцию в качестве аргумента.