Criação Altamente Reutilizáveis AngularJS Componentes
Preparando o AngularJS app Angular
Não pergunta se você vai construir um novo app de hoje você pode começar com Angular construído sobre Typescript (Angular 2+). No entanto, com milhares de AngularJS (Angular 1.X) aplicativos ainda em produção, AngularJS não vai a lugar nenhum ainda. Na verdade, AngularJS ainda vê desenvolvimento contínuo e apoio da equipe.
**atualização**
Angular está atualmente em v6 e é bem adequado para grandes aplicativos de produção. Se você está construindo um novo aplicativo hoje, por favor, olhe para Angular 6+.
confira nosso novo guia para a criação de componentes altamente reutilizáveis com Angular
os desenvolvedores também podem favorecer a comunidade de desenvolvedores ricos e bibliotecas de código aberto em torno de AngularJS em oposição a mergulhar em novos e limitados. Há várias razões pelas quais você pode querer criar um aplicativo em AngularJS. Se migrar o seu aplicativo ng1 para ng2+ está no radar, então considere componentizar o seu aplicativo um pré-requisito para a sua migração.
novas características desde 1.5.x foram adicionados retroativamente, principalmente o Suporte de componentes e ligação de dados unidirecional. Nós vamos olhar para fora como maximizar essas características para criar componentes altamente reutilizáveis para suas aplicações AngularJS que se alinham mais perto do novo framework Angular.
Organização de componentes
é fácil perder-se no componente este, componente que hoopla. Uma das peças mais críticas a entender é qual componente deve ser responsável por quê.
mantenha os componentes do nível de página como a força motriz por trás de uma vista, enquanto utiliza componentes reutilizáveis ou “mudos” para cuidar de uma tarefa comum.
isto mantém a lógica específica da página para um único componente enquanto encapsula todo o código de rotina e funcionalidade em pedaços reutilizáveis.
um dos maiores erros que vi foi passar dados para as crianças componentes que alteram os dados, assumem um caso de uso muito específico, ou se comunicam através de serviços por todo o lado. Isto, eventualmente, torna-os difíceis de entender/testar e não reutilizáveis de todo, uma vez que se tornam difíceis de codificar para casos específicos de uso.
o seu primeiro componente “Hello World”
o componente mais simples possível seria algo parecido com isto. Repare como estas directivas são semelhantes.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
vale a pena notar que as diretivas ainda estão disponíveis para os desenvolvedores. Existem algumas circunstâncias raras em que você ainda vai querer usar uma diretiva modelo sobre um componente. Possivelmente se dependesse de alguma fase de compilação ou ligação … mas as diretivas devem ser usadas como atributos para adicionar outras funcionalidades a um componente … por exemplo, talvez você quisesse adicionar segurança baseada em permissão se um componente deveria estar disponível ou não para um usuário.
quando em dúvida favorecem o modelo componente. Você quer construir o seu aplicativo como uma árvore de componentes. Veja os documentos AngularJS para mais informações sobre componentes vs diretivas. As directivas devem ser pensadas em componentes sem modelos utilizados para melhorar componentes.
as opções de ligação
os parâmetros dos componentes são passados através da propriedade bindings. Semelhante à antiga forma de atribuir variáveis de âmbito da Directiva.
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
comunicação componente
suponha que estamos fazendo um aplicativo mensageiro. A vista principal é um componente de nível de página com um componente reutilizável da lista de contactos. Queremos usar o componente de Lista de contatos em outras áreas da nossa aplicação, por isso é importante tornar isso tão reutilizável quanto possível.
o componente da lista de contactos tem uma única finalidade. Para renderizar a lista de contatos disponíveis do servidor e enviar as seleções feitas.
o componente mensageiro deve aceitar as selecções feitas a partir do componente da lista de contactos e adicioná-las à sua lista de destinatários.
