Master Angular 2 - Parte 2 - Componentes | Grant 'Angular' K | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Master Angular 2 - Parte 2 - Componentes

teacher avatar Grant 'Angular' K, Crazy about Angular!

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

5 aulas (18 min)
    • 1. Introdução ao Angular 2 no Skillshare

      1:27
    • 2. 2 1 Introdução aos componentes

      4:14
    • 3. 2 2 Qual Editor de código você deve usar?

      2:16
    • 4. 2 3 Como criar um componente

      8:19
    • 5. Como continuar a aprender

      1:23
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

464

Estudantes

--

Sobre este curso

Entenda o conceito básico de componentes Angular 2 - .

Conheça seu professor

Teacher Profile Image

Grant 'Angular' K

Crazy about Angular!

Professor

A passionate Angular developer. Let's make cool stuff together!

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução ao Angular 2 no Skillshare: Olá e bem-vindo a este módulo em angular, também. Agora este módulo é tudo sobre tudo o que você pode ver em seu título. Eu selecionei o módulo de componentes, mas você poderia estar em qualquer outro módulo. Depende exatamente do que seu título diz. Se você está chegando aqui agora e você é novo em angular também, também, então você só vai encontrar o que está neste título. Então, neste caso, seus componentes, embora você possa estar olhando para enraizamento ou qualquer outra coisa. Se você não sabe nada sobre angular para, é melhor clicar no meu perfil clicando em um dos links da mão superior direita ou procurando angular dentro do navio habilidade e encontrar meus cursos. Depois de fazer isso, você pode ir em frente e começar no número um. É o primeiro curso que publiquei no meu perfil. Então volte para lá. Se você é novo em angular, também, é muito importante que você tire toda esta série fora tutoriais desde o início , então vá para lá agora. Caso contrário, se você estiver interessado no tópico que está aqui em cima componentes, então às vezes eu divido estes em duas seções, então você pode ter que clicar na seção número três depois de ter concluído esta seção específica . Em suma, você está no lugar certo para aprender angular, clicar e rolar, e vamos começar. 2. 2 1 Introdução aos componentes: Olá e bem-vindo a este segundo módulo sobre a criação incrível abside Web com angular dois. Agora, até agora, temos um aplicativo muito básico chamado APP Works and Grant. E se eu clicar com o botão direito, o que não posso fazer no safari. Então o que vou fazer é copiar este endereço. Vou abrir o Google Chrome, e vou colá-lo aqui. Hospedeiro local 4200. Temos este aplicativo agora se eu clicar com o botão direito e eu clicar em Inspecionar, eu vou abrir meu console no lado aqui e ele vai me mostrar como meu HTML é colocado para fora. E eu só estou te ensinando isso antes de continuarmos com as coisas de programação. Apenas você tem uma sensação de quão angular é colocado para fora. E como você poderia esperar, esta é uma página web básica. Temos uma declaração HTML no topo. Temos seção à frente onde podemos carregar folhas muito estilo e vários links. Então, se você quiser colocar bibliotecas javascript aqui, você pode fazer isso. Mas no geral, você não faria isso. Você procuraria uma biblioteca primeiro, e também temos esta seção corpo que contém o nosso aplicativo real e dentro do nosso aplicativo temos arrancar e lembre-se que arrancar foi esta tag que realmente foi especificado dentro do primeiro componente que olhamos e, em seguida, dentro de lá temos um H um e A P, e estes foram dados este esforço especial de traço conteúdo de energia, ver nota prato. Isso é apenas uma coisa angular, e isso nos permite colocar nossas próprias variáveis como App Works e Grant. Então isso é apenas uma breve recapitulação de tudo o que cobrimos na primeira seção. Então você sabe como angular funciona nesta seção. Vamos ver como criar outro componente, e por que quereríamos fazer isso? Bem, há uma razão muito, muito importante, e eu vou te mostrar se eu for para o relatório meteorológico de Manchester, por que não? Vamos para aqui agora. Isso provavelmente não está escrito em angular, corretamente escrito em PHP. Mas o que você pode ver aqui é uma mistura de informações, certo? E você também pode ver Manchester está congelando, é por isso que eu me mudei de Manchester e sempre chovendo. Mas isso de lado, o que você pode ver é toda essa informação. Mas como um desenvolvedor, você precisa começar a olhar tipo de além de todas essas informações, e você precisa olhar para as partes fora da página. Agora, o que eu quero dizer com isso? Quero dizer, aqui temos essa seção de compartilhamento e, em angular, você precisa começar a pensar de forma modular. Então, em angular, se você quiser compartilhar algo, você não criaria uma seção de compartilhamento em seu componente. O que você faria é criar um componente que é tudo sobre compartilhamento. Então esta seção aqui com os links de compartilhamento seria um componente. Então você pega esse componente e você colocá-lo dentro de qualquer página em que é necessário. E você pode ver imediatamente que você economizaria muito tempo de digitação de código e muito tempo para alterar o código. Se você precisar mudar as coisas no futuro, porque seu componente está em um só lugar, que é apenas uma boa prática básica de programação, realmente certo. E então você tem outros componentes, como você tem essa caixa de pesquisa, que é um componente. Você tem esses cabeçalhos. Você tem este menu superior que também seriam componentes separados, para que você possa ver como podemos separar as coisas em seus próprios módulos autônomos, que torna mais fácil usá-lo dentro de diferentes partes fora de nossa aplicação. Ou, de fato, podemos até levantá-los e colocá-los em novos aplicativos. Se assim o desejarmos, podemos compartilhá-los como módulos com outros desenvolvedores. Torna tudo muito mais fácil de lidar em termos de programação, certo? Então vamos agora ver como criar nosso primeiro módulo. Mas na próxima palestra, vou passar por algumas opções que você tem para editores de angulares, também, também, e vou te mostrar qual é o meu favorito. É completamente gratuito, e cabe a você qual você escolher. 3. 2 2 Qual Editor de código você deve usar?: Ok, vamos olhar para alguns editores para o código que vamos escrever. Até agora, você me viu usar um editor, mas vou mostrar algumas opções para que você saiba o que está lá fora. O 1º 1 é bastante popular, e isso é sublime, Tex. E isso também vai suportar angular para Se eu não estou errado, Eu realmente não usei isso, mas eu ouvi que ele faz, mas você precisa comprá-lo a menos que você está avaliando em vírgulas invertidas de graça. Então essa é uma opção de texto sublime. Outro é o átomo, e você pode baixá-lo do Mac, ou você pode obtê-lo para outras plataformas. E Atom é um editor muito bom. Eu acho que é feito por Can't get Hub tanto quanto eu me lembro, é seu próprio editor, e você pode obtê-lo para o Windows, também. Então, se nós rolarmos para baixo, você pode ver como ele fica. Parece muito doce. Tem muitas coisas. Obviamente, se for feito pela equipe do hub , terá suporte. Esqueça Hub, eu teria pensado. Deixe-me ver. Não, não vejo nada, mas isso é uma opção para você nele. O próximo é um velho, mas uma guloseima, que é nota pad plus. E isso vem dos dias em que as pessoas costumavam usar apenas um bloco de notas simples para escrever coisas , perceberam que não era bom o suficiente, então eles mudaram para isso. Se você é um programador da velha escola, esta pode ser sua xícara de chá, mas eu guardei o melhor para o fim. Na minha opinião, eu realmente gosto de código visual de estúdio. E, claro, isso é feito pela Microsoft porque é o mesmo nome de um estúdio visual, o grande ID que ID você provavelmente conhece. Este é o que eu baixei e uso no dia-a-dia. Eu nunca encontrei nada realmente errado com ele. Ele tem um monte de extensões que permitem destacar a sintaxe angular e criar atalhos para digitar código, porque algumas coisas angulares podem ser uma dor para digitar uma e outra vez. E esses atalhos só tornam as coisas muito mais fáceis para nós. Então, ao longo de toda a totalidade deste curso eu vou usar o código de estúdio visual. E se você não quer qualquer tipo de ambiguidade, então vá em frente, baixe e use esta, a menos que já tenha seu editor favorito, caso em que fique à vontade para usar esse 4. 2 3 Como criar um componente: Ok, é hora de abrir nosso projeto e começar a criar nossos próprios componentes. Vá em frente e abra seu editor favorito. Então, código visual de estúdio, no meu caso. E espero que, no seu caso, seja mais fácil acompanhar. Agora, a maneira como o editor de estúdio visual funciona é que você tem que abrir uma pasta para que você não abra nenhum arquivo necessariamente. , Basta abrir uma pasta. Agora, deixe-me pensar. Onde eu coloquei isso? Eu acho que eu colocar alguém conceder documentos e ir para a sua energia Tuapse, onde você colocar o seu primeiro fora. Agora clique duas vezes em seu aplicativo e você deve ver todos os arquivos que olhamos anteriormente. Não selecione nenhum. Basta selecionar aberto e eles estarão abertos para você no código do Visual Studio. E você terá um bom menos para baixo ao lado de fora de todos os arquivos e pastas em seu projeto. Então é muito útil para navegar o que está acontecendo agora. Apenas para enfatizar, não edite nada nos módulos de nota. Geralmente deixamos isso em paz. E também vamos falar de um modo geral, deixe isso em paz. Toda a nossa codificação no sentido geral que é três vezes disse General agora é feito dentro da pasta de origem e, em seguida, dentro de lá. De um modo geral, isso é quatro generais está dentro da pasta APP. Não, no momento temos uma sesta Componentes CSS, que atualmente não tem nada nele. Mas poderíamos colocar estilos lá se quiséssemos ter nosso HTML. Lembre-se, nós o modificamos com este nome Variável. E temos a nossa pasta datilografada. Agora, quando criamos um módulo, queremos tipo de armazenar isso dentro de sua própria pasta. Agora, o primeiro 1 o aplicativo, componentes, a rota APP, se você quiser, lembre-se, a saída é este seletor. Nós meio que sair em seu próprio primeiro nível fora da pasta raiz. Está tudo bem onde está. Mas se eu quiser criar outro componente, você pode imaginar com três arquivos por componente, isso seria preenchido muito rapidamente. Então o que fazemos é simplesmente criar uma pasta. Então, no topo aqui, há um pequeno botão de pasta novo, e vamos criar outros componentes. Agora, o que vamos criar? Vamos ver, Talvez este seja um componente de imagem, Então é uma boa prática de nomeação toe realmente chamar esta pasta algo como imagem, componente ou imagem. Você decide qual é o seu nome. Ah, convenção é, então é absolutamente com você, mas eu posso ter componentes de traço de imagem lá dentro. Eu não gosto de usar apenas a imagem antiga simples porque isso fica confuso quando se trata de armazenar imagens. Então, é sempre bom ser um componente de morte com imagem detalhada. Agora dentro daqui, vamos criar um novo arquivo e no topo temos alguns seletores. Deixe-me expandi-lo e apertar o novo seletor de arquivos. Agora chegamos à convenção de nomenclatura real, então os componentes de ponto de imagem ponto T s. Isso deve ser um professor, e isso é uma convenção de nomenclatura. Claro, você pode ver que é o mesmo que a maçã componente dot ts. Então vá para o componente de imagem e adivinhe? Isto ainda não é um componente. Só está no arquivo vazio. Agora, a forma como criamos componentes é geralmente nesta ordem. Não tem que ser desordem. Nós exportamos uma classe chamada componentes de imagem, então agora temos uma classe que angular pode usar. Temos que dizer Angular que tipo de coisa é essa, porque ele não sabe só pelo nome. Bem, queremos dar a este tipo de componente. E para isso usamos o que chamou de decoradores. E um decorador fica no topo com componentes. Agora, se eu colocar meus pequenos suportes para o componente, e então meu componente de chaves encaracoladas tem uma linha vermelha rabiscada sob ele, e se eu clicar nele, eu recebo essa pequena lâmpada e você não terá essa lâmpada ainda. Vou te mostrar como obtê-lo, mas nos diz que temos que importar o componente do núcleo angular. Então, se eu clicar nisso no topo, agora temos este componente de importação do tribunal, e isso está dando a vocês uma pista novamente do que está acontecendo em algum lugar angular. Um componente foi declarado como este, mas para usá-lo dentro da coisa que estamos fazendo, primeiro temos que importá-lo para este arquivo. É um pouco como a instrução usando em C Sharp ou o equivalente em Java. Esqueci-me do nome verdadeiro. É importação também eu esqueço. Tenho certeza que um de vocês vai me dizer. Agora temos essa importação que podemos usar. Componente. Temos um decorador e dizíamos que esta aula é um componente. Agora este conceito fora de um decorador vai se deparar de novo e de novo, e há muitos tipos diferentes fora de componentes. Mas, de um modo geral, são todos componentes. Então, nós quase temos nossos componentes de imagem prontos. Mas estamos perdendo algumas coisas cruciais. E se olharmos para os nossos componentes AP ponto tipescript como um guia, olha, precisamos de um seletor. Precisamos de um modelo. Nós não precisamos de um estilo ainda, então vamos deixar isso de fora. Mas estes dois são necessários para os componentes que vamos exibir. É diferente para outros tipos de componentes, mas uma vez que exibimos, devemos ter um seletor e devemos ter um modelo. Vamos voltar para os nossos componentes de imagem dentro de fora componentes. Nós simplesmente digitar seletor e colocamos um casaco em. E então, em nossas citações, damos um nome a isso. Agora o seletor. Se eu apenas chamar esta imagem seletor e, em seguida, eu fui para o meu HTML e eu usei a tag imagem que iria começar a ficar um pouco confuso com alguns dos HTML clássico que talvez você sabe tão convenção e angular com um seletor é colocar algo como AP imagem do traço. Então esta pequena prequela, essa é a maneira errada de entrar em conflito com o vermelho real está agora. Este pouco antes da imagem é uma espécie de identificação única, que significa que nosso HTML não vai se confundir com o HTML clássico que está disponível para todos os lugares sobre Então nós temos nosso seletor agora o que mais precisamos? Precisamos do nosso modelo e suas duas opções, um modelo e um modelo. U R l Agora um modelo simplesmente significa que podemos definir algum HTML aqui que define esta imagem. Então define este componente. Em vez de criar um arquivo separado, se o meu HTML é apenas um pouco pequeno, eu acho que manter tudo contido aqui. Então, se meu HTML é simplesmente um parágrafo que diz que isso é uma imagem, eu sei que um parágrafo está em uma imagem, então não me puxem para cima sobre isso. Então não adianta nada em seu próprio arquivo é muito feliz em viver aqui, certo? Então isso é a totalidade fora, criando um componente que temos as instruções de importação para que possamos usar componente. Temos um decorador para dizer Angular. Esta classe é um tipo de componente. Temos um seletor para que possamos usá-lo em algum lugar. E temos um modelo. Então nosso componente está pronto. Mas angular ainda não está pronto para usá-lo. Este um par de outros pedaços que temos que adicionar para dizer angular para ir e olhar para este componente. Então é isso que faremos na próxima palestra. 5. Como continuar a aprender: Parabéns. Acabe com isto. Um módulo muito rápido em angular para agora, se você quer continuar aprendendo e por que você não iria? Porque angular é incrível. Então há uma maneira fácil de fazer isso. Eu configu-o, por isso é agradável e simples. Poucos e compartilhamento de habilidade que você vê no canto inferior da imagem na tela, há um número que é um número sequencial. Você também pode vê-lo no título fora do curso. Então, por exemplo, esta é a primeira parte, mas você pode estar na parte cinco ou na parte 50. Não importa se você deseja acessar a próxima parte deste curso, então basta procurar o angular dois ou ir para a minha página de perfil clicando em um dos links relevantes no canto superior direito, e você verá uma lista dos cursos que eu ensino. Chances. Você está confinado? Você pode identificar imediatamente qual é o próximo, então, neste caso, é o número dois. Mas no seu caso pode ser o número 51. Então é assim que você continua. Basta clicar no curso agora e inscrever-se para continuar sua aprendizagem angular, mesmo que você não esteja indo para concluí-la agora. É uma boa idéia se inscrever agora. Então você sabe onde você está na próxima vez que você entrar em compartilhamento de habilidades e quiser manter a experiência de aprendizagem em andamento, eu vou vê-lo no próximo módulo.