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

Velocidade de reprodução


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

Master Angular 2 - Parte 3 - 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 (14 min)
    • 1. Introdução ao Angular 2 no Skillshare

      1:27
    • 2. 2 4 Registrando seus componentes para uso

      5:08
    • 3. 2 5 usando seus componentes

      4:25
    • 4. 2 6 Resumo de componentes

      1:31
    • 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.

395

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 4 Registrando seus componentes para uso: Certo, então temos um novo componente de imagem pronto para ir? Bem, está quase pronto para ir. E por que eu digo isso? Bem, angular não é exatamente como as linguagens tradicionais de programação, se é de onde você está vindo. E eu tenho certeza que você sabe que o javascript é meio diferente. É mais livre do que a que estamos acostumados. Mangula meio que lhe dá uma boa estrutura, mas em uma linguagem de programação tradicional, você criaria uma classe. E se você estiver usando C nítido, por exemplo, essa classe se sentaria e algum dentro de algum tipo de espaço de nome, e então você poderia acessar imediatamente esse componente em outro lugar. Você poderia apenas dizer novo componente de imagem, e ele iria criar um objeto para você, não é bem o caso com angular, porque não há nenhuma compilação riel fora do nosso programa. Acontecer em segundo plano é mais do que chamamos de tradução, que é apenas traduzir do nosso texto datilografado para JavaScript. Então, como sabemos onde está o componente de imagem? Se estamos falando de angular muito bem no módulo aplicativo dot ts angular vai e tem um olhar para todos os módulos que ele tem disponível. Pense nisso é o mapa ou a referência. É uma explicação melhor. Explicação a referência que ele deve ir para sempre que ele precisa encontrar algo que nós temos nomeado. E você já pode ver isso em ação aqui. Dentro deste no decorador módulo de energia, temos um array off declarações, e o 1º 1 deles é componente apt. Agora, obviamente, sabemos o que é, porque se formos para o componente do aplicativo Doutor, sim, lá está. Não é tão angular sabe que o componente do aplicativo está lá. Se voltarmos para o módulo, o que podemos fazer é agora importar dentro desta matriz de declarações, nosso componente de imagem. Mas antes que possamos realmente fazer isso, primeiro temos que importá-lo no topo em uma declaração. Então vamos ter componentes de imagem ok de e, em seguida, entre aspas, vamos colocar o endereço que o componente de imagem está em. Agora. Se olharmos para onde esta pasta é apt up módulo dot ts. O que queremos fazer é ir para os componentes da imagem e, em seguida, obtê-lo a partir daí. Agora, a maneira como fazemos isso é navegar até ele. Então o que queremos fazer é olhar para a pasta atual em que estamos, que é ponto barra e, em seguida, dar-lhe o nome da pasta porque a pasta componente imagem está dentro da mesma pasta. Então, digamos componentes traço imagem barra e, em seguida, damos-lhe o nome fora do arquivo componentes espera seu campo automático algo para o seu. Para mim lá. Nós não fazemos esse componente de ponto de imagem e você notará que não adicionamos no dock ts porque não precisamos de terminações de arquivo para esta parte. Em outros lugares nós fazemos. É um pouco frustrante. Eles não têm realmente permanecido verdadeiro Teoh algum tipo de estrutura. Mas eu suponho que essa é uma das grandes coisas sobre o ângulo dois é onde tem uma das coisas ruins , dependendo do seu ponto de vista. Então o que fizemos aqui é que entramos nesta pasta na mesma seção, e procuramos o componente de imagem. E se você não conseguir uma linha vermelha, por exemplo, se eu soletrar errado, eu tenho uma linha vermelha, então isso significa que o Visual Studio realmente encontrou. Isso significa que agora o temos disponível para importar na nossa declaração. Então temos o componente de imagem lá Agora nosso componente de imagem está registrado e pronto para uso. E na próxima palestra irá mostrar-lhe como nós realmente usá-lo. Mas, por enquanto, eu só quero te mostrar, uh o que eu esqueci o quê? Ia mostrar-te por um segundo. Vamos lá, recomponha-se. Certo. Temos os nossos componentes de imagem. Ah, foi isso. Se eu apagar isso, não deixe o seu apenas me ver componentes de imagem, e você vai notar que eu tenho esse pop-up que você provavelmente não tem, e isso me permite importar automaticamente o que eu preciso. E é um inferno de uma economia de tempo. Então deixe-me salvar isso e deixe-me mostrar-lhe onde você obtém isso no código de estúdio visual, você pode obter um plug in ou uma extensão, que é este pequeno ícone aqui quando você clica naqueles, Estes são os que eu instalei angular para datilografado. Am sua auto importação é o que você quer e talvez npm intelli uma vez que assim, se você procurar por auto importação, se eu apenas clicar que há o que você deve procurar e você verá quando ele coloca suas entradas nele. Auto importa para ele, como acabamos de ver. Então essa é uma extensão muito útil para saber. Certo, então vá em frente, instale isso se precisar. Mas agora eu mostrei onde angular mantém um registro fora de todos os componentes que você fez para que possamos usá-los em todo o nosso aplicativo. 3. 2 5 usando seus componentes: Tudo bem. É hora de realmente usar nosso componente. Nós declaramos isso em nosso módulo APP. Deixe-me fechar isso. E nós criamos ele mesmo. Então podemos fechar isso também. Agora, como usamos o componente? Bem, vamos usar isso em um lado do nosso componente APP ponto T s e dentro daqui Estamos agora olhando para este modelo u r l e o modelo Earl é onde você realmente usa o componente. Então vamos abrir o componente app dot html e, em seguida, dentro daqui podemos deixar todas essas coisas e abaixo. Vamos criar em pouco div frente barra rígida. Minha formatação está um pouco confusa. Lá vamos nós. E dentro daqui, vamos realmente alimentá-lo para o componente de imagem com criado. Agora lembre-se dos componentes da imagem. Neste ponto, apenas as saídas enfrentam uma imagem apenas para que saibamos que ela funciona. O que precisamos usar é este seletor na imagem. Então vá para o HTML e simplesmente use na imagem do traço e, em seguida, feche sua tag. Agora diga que ir para o seu aplicativo que deve descobrir que ele precisa re compilação. Vai recarregar a página para você e vamos ver, lá vamos nós. Temos Esta é uma imagem chicoteia dedo errado. Então isso agora está incluído o componente para nós. Mas isso não é tudo o que quero mostrar. Olha, o que acontece se eu copiar isto e deixar cair outro e guardá-lo? Voltamos, ele se compila e você obtém exatamente os resultados que você está esperando, que é para isso é uma imagem. Agora, por que eu fiz isso? Bem, você pode imaginar se você tivesse algum tipo fora de aplicação enorme e dentro dessa aplicação, digamos que você sabe, você comprou este curso Então é um bom exemplo. Digamos que você tem na tag sim curso e você fecha isso fora e, em seguida, dentro da tag curso app , você vai ter talvez o app favoritos tag Teoh mercado. Algo é seu favorito. Você pode ter detalhes do aplicativo e você pode ver como nós tipo de enfraquecer coisas ninho dentro de componentes? Então, mais tarde, se eu quiser criar uma lista de rolagem de 100 cursos, tudo o que eu precisaria fazer era incluir a tag do curso AP e que, por sua vez, incluiria os detalhes do APP que incluiria o favorito, e usaria todos estes componentes uma e outra vez de uma forma muito modular. E se você é um programador clássico de uma forma muito clássica de programação, porque é basicamente assim que fazemos as coisas em linguagens clássicas. Por isso, se eu guardar isso, vou mostrar-te esta parte. Veja o que acontece com a nossa APP. Re compilando, re compilando, recarregando e travando. A coisa toda vai cair. Sabe quando eu disse que era como uma programação clássica? Bem, em termos de acidentes, certamente é. E você não conseguiria isso em JavaScript antigo. Mas você faz em angular também. E ele diz que temos alguns erros anteriores de modelo, então vamos eliminar eventos e vamos cobrir a depuração um pouco mais tarde e, de fato, vai se livrar dessa imagem APP. Então, agora, se eu disser que o nosso APP deve voltar ao normal e assim que ele voltar ao normal , vamos olhar para esta seção nosso desenraizamento. Deixe-me expandir isso. Temos eu h um r p e temos o DIV que contém a nossa imagem. Então isso é o básico fora, criando um componente em angular para e, em seguida, registrá-lo para uso e, em seguida, usá-lo dentro outro componente. Então, parabéns você agora praticamente sabe tudo o que você precisa saber sobre angular. Para isso é a coisa fundamental que você precisa saber para APS básica, angular. 4. 2 6 Resumo de componentes: Ok, este é apenas um resumo rápido de tudo que você aprendeu. O que eu quero que você tire deste módulo é que tudo é um componente angular . Se você pode dividi-lo em um componente, então faça isso, especialmente se você estiver indo para reutilizar esse componente. E eu acabei de puxar para cima mega Boone dot com, que é um site de música onde você pode comprar música e este é um ótimo exemplo de criação componentes. Agora eu não sei qual é a arquitetura deles, mas você pode ver claramente que você tem um componente aqui abaixo, que é, você sabe, você sabe, provavelmente como pré-visualização do álbum. Temos componentes aqui em baixo, que é uma grande antevisão do álbum. Talvez tenhamos rastreado prévias ao lado, e estes são todos componentes reutilizados. Então isso seria realmente muito simples de fazer em dois angulares. Apesar de quão complexo parece. É só um monte de Dave que tem um monte de fora. Ah, o que você chama de “tags”. Uma palavra tão grande, não é? Ter um monte de tags que fazem referência a todos os componentes que você vai usar, Então, se você tirar uma coisa, é todos os componentes que você cria em angular, você precisa começar a olhar para sites como você olharia para a Matrix, apenas um monte de código em um monte de componentes que todos os slots juntos. Está bem. Com isso dito, agora estamos prontos para seguir em frente e começar a aprender alguns conceitos mais fundamentais fora angular para no próximo módulo. 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.