Master angular 2 - Parte 1 - Início rápido | Grant 'Angular' K | Skillshare

Velocidade de reprodução


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

Master angular 2 - Parte 1 - Início rápido

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 (32 min)
    • 1. Introdução a Angular 2

      3:10
    • 2. Como instalar Node JS e Angular 2

      4:01
    • 3. Crie uma aplicação angular 2

      10:35
    • 4. Execute um aplicativo Angular 2 e edite seu primeiro código

      12:31
    • 5. Como continuar 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.

1.237

Estudantes

--

Sobre este curso

Entenda o que o Yep, angular 2 fácil!

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 a Angular 2: Vocês estão usando angular para? Ainda? Se não está, deveria estar. E deixe-me explicar por que você deveria estar. Primeiro de tudo, você pode fazer coisas fantásticas com ele. Olhe para estes exemplos que eu tenho feito com ponto angular com. Temos Enciclopédia Britannica, Wolfram l para nós temos o Canal do Tempo, temos até o trabalho. Esse é um dos grandes. Eu não sabia que isso existia. Nós temos parceiros do Google, e é claro, o Google usaria isso porque eles meio que inventaram. E por que todas essas pessoas mudam para angular? O que há de tão bom nisso? Bem, angular é simplesmente um framework JavaScript, mas o que ele faz é levar todas essas funções que teríamos que programar em JavaScript e torná-las muito mais fáceis de usar como desenvolvedor. O que significa que você pode fazer mais coisas. Você pode fazer coisas mais legais. E bem, como você pode ver aqui, você pode fazer muito mais coisas snazzy. Este é mesmo o terceiro. É arejamento fora da Web três pontos. Oh, se você quiser. E eu vou ter direitos autorais disso porque eu acabei de inventar isso agora, certo? Então, o que é ótimo sobre angular também é que ele é algo que usamos para criar um aplicativo de página única . Agora, o que isso significa? Bem, tradicionalmente, se eu fosse até minha barra de endereços, coloquei um endereço e apertei Enter. Ele vai para um servidor, e ele busca algumas coisas agora angular para permite que você faça isso, mas geralmente apenas para a primeira busca. Então ele vai e busca este site. Então, quando eu clico coisas como de apenas ir para clicar neste NPR um e olhar, ele se expande e nós temos um vídeo pronto para ir. Estamos em uma nova página. Você vai notar lá em cima. Nada mudou. Talvez o endereço mudou, mas nada mais Se eu clicar de volta novamente, não havia nenhum contraste barra de carregamento que com quando eu clicar de volta novamente e nós temos que barra de carregamento. Então o que está acontecendo lá é que todo o aplicativo é baixado para o meu computador quando eu vou pela primeira vez para made with angular dot com, e cada página que eu vou a partir daí é renderizada por angular no meu PC. A única razão pela qual ele precisa ir para o meu servidor é para obter bits fora dos dados, e, como você pode imaginar, isso é muito mais barato de fazer em termos de servidor Web. Em seguida, reenviar tudo isso HTML e JavaScript toda vez que eu mudar a página. Então é por isso que o pescador é tão bom e por isso foi adotado por todos esses exemplos porque ele realmente relaxa a carga em seu servidor. Ele faz o que chamamos de um aplicativo de página única. Então todo este canal vai ser dedicado ao ensino angular e todos os seus conceitos relacionados . E eu vou especificar neste ponto que vamos ensinar ângulo para. Mas quando o Angular Três sair, vou mudar tudo para isso fora do curso. Então, sem mais delongas, vamos instalar angular e editar nosso primeiro código. 2. Como instalar Node JS e Angular 2: Agora. O primeiro passo, claro, é instalar o próprio angular, e o primeiro passo desse processo é realmente instalar o nó Js. Porque nenhum Js é o servidor que realmente vai servir nossa aplicação angular. Ele também faz um monte de outras coisas. E se você quiser saber mais sobre nenhum Js, então você pode simplesmente ir para saber que Jr parou. Ou como está, você vai lá de qualquer maneira e você vai para a seção de download e você vai instalar nenhum Js para sua plataforma relevante. Estou em um Mac, então vou pegar o instalador do Macintosh e instalá-lo agora. Não se preocupe se demorar um pouco para instalar. Isso é perfeitamente normal. Basta ir em frente, clique nele e instalá-lo direito. Depois de instalá-lo, vá em frente e abra uma janela de terminal ou uma janela de comando no Windows. Então, obviamente, eu estou usando, Mac, porque eu só acho bom de usar. Mas todos os comandos são praticamente iguais nas janelas. Então, se suas janelas apertar a tecla windows e são para executar e digitar CMD, que é uma janela de comando, e você deve abrir para o mesmo tipo de interface que você vê aqui. Agora, uma vez que você instalá-lo, nós vamos verificar se ele está instalado atingindo o nó Dash V, e isso nos diz a versão fora do nó que estamos executando, que é 6.9 ponto um. E se você quiser ter certeza de que seus aplicativos são executados corretamente, vamos voltar a conhecer J s e baixar. Eu só vou salientar que existem na verdade dois pacotes. Você tem suporte a longo prazo e o atual e geralmente queremos suporte a longo prazo, que agora está em 6.9 ponto um. Há um quatro pontos algo flutuando ao redor e você quer ter cuidado para não instalar isso. Certifique-se de que está acima de seis. Agora, também temos que verificar se o NPM, que é o gerenciador de pacotes de nós e o gerenciador de pacotes de nós, cuida de muitas instalações de pacotes para nós. Ele vai e recebe o código para nós, coloca-o em nosso projeto sem que tenhamos que fazer nada manualmente. É muito, muito bom. Queremos verificar a versão disso. Então, novamente, Dash V e que é a versão para e se novamente para voltar a este site que temos. Isso inclui o NPM 3.1, o que obviamente é incorreto. Mas eu acho que na minha máquina eu atualizei para a carga o gerenciador de pacotes de nó mais recente. Então, já que você está acima dos três, você deve estar pronto para ir agora. Eu só quero salientar que é sempre que você está desenvolvendo suas aplicações angulares e as coisas dão errado. Às vezes, ajuda a atualizar seu NPM ou atualizar seu nó. É auto. Basta fazer uma pesquisa no Google se as coisas correrem mal para você e descobrir quais são as respostas para seus problemas. Ok, então notas instaladas N PM instalados. O que vem a seguir? Bem, você pode ir para o ponto angular e nós temos algumas docas aqui que incluem um começo rápido . Há o endereço agora dentro daqui. Temos nossos passos para começar a executar um aplicativo pescador, e eu estou simplesmente passando por esta lista. Então, se ele mudar, você sabe onde ir para obter as mudanças de atualização porque ele muda com bastante frequência. Mas espero que seja muito menos agora. E agora. Claro, a primeira coisa que olhamos aqui é pré-requisito. Instale o que já instalamos. E então exigimos a versão quatro do nó ou superior. Temos seis, o que é bom. E NPM três X ou superior. E aí temos nossos comandos que acabei de mostrar a vocês como executar. Ok, então nosso serviço pronto, nosso gerenciador de pacotes de nós está pronto. Agora, estamos prontos para realmente começar a criar projetos angulares. Então é isso que eu vou mostrar a vocês na próxima palestra. 3. Crie uma aplicação angular 2: Certo. Estamos prontos para criar nosso projeto angular. Mas antes de o fazermos, vamos dar uma olhada no site de que te falei. Com o endereço que você pode ver agora, ponto angular io e ele lhe diz como criar um projeto angular. E nós já instalamos nó no NPM, o que é bom. Mas agora temos algumas outras coisas como temos que criar a pasta do projeto, criar arquivos de conflito e instalar pacotes. Agora, todas essas instruções nos levam através do que temos que fazer muito bem, mas eles realmente não explicam o que está acontecendo. Então eu vou apenas dar-lhe uma visão geral rápida, e então eu vou mostrar-lhe uma maneira muito mais rápida de fazê-lo. Então, primeiro de tudo, temos que criar este pacote, Doc, Jason, arquivo. E isso nos diz que tipo de dependências precisamos para nossos projetos. Que coisas precisamos ter lá dentro. E se rolarmos para baixo, este site nos dá alguns deles. Então temos um nome e temos uma versão, e isso é claro, nós nos estabelecemos. Temos alguns scripts que definem como acabamos servidor. Eu não me preocuparia com isso por enquanto. Temos licenças, então isso é importante. Se você não faz as pessoas para copiar ou codificar. Temos algumas dependências, nos diz que precisamos de coisas angulares. Precisamos de formulários comuns do compilador. Todo esse tipo de coisas. Não se preocupe com eles. Por enquanto, só estou a apontar que eles existem. Precisamos de muitas coisas como texto datilografado, servidor de luz , etc, etc. E então, é claro, temos outro arquivo. Ts ponto de conflito Jason. E isso nos diz como o compilador de texto gera JavaScript a partir dos arquivos de projetos . Agora, o que isso significa? Bem, isso significa que estamos realmente escrevendo em texto datilografado, que é uma maneira muito mais agradável de escrever scripts Java mais de uma maneira clássica de programação. E à medida que começamos a criar aplicativos, você verá como é muito mais fácil do que realmente usar JavaScript, porque o JavaScript , para mim, sempre foi meio livre, sem estrutura. Typescript dá-lhe aquela estrutura que eu acho que realmente precisa decolar para a multidão de programação clássica. Então, o que mais temos? Nós temos o ponto de conflito do sistema Js, e isso apenas define um monte fora global através desta função global aqui. Agora, não se preocupe com nada disso. Você não tem que criar nada disso. Houve um tempo há alguns meses em que você teria que criá-lo e então realmente instalar seus pacotes. Mas a partir de agora, vamos usar a nova maneira de sair, criando duas aplicações angulares através desta linha de comando. Agora, maioria das coisas que criamos através da linha de comando usa o que é chamado de interface de linha de comando, que é apenas um som de espinha. Usamos a linha de comando como uma interface. Angular tem uma nova interface de linha de comando, e aqui temos ela. Se formos a cli dot angular ponto i o podemos usar o Angelus CLI e aqui temos a primeira jornada de comando para ver NPM instalar Dash G Angular Dash C L. I. Então vamos para a nossa linha de comando e vamos fazer isso instalar NPM neste simplesmente diz, Use o gerenciador de pacotes de notas para instalar algo e instalar o quê? Bem, queremos instalar a CLI angular, mas você notará que há um traço G e isso significa globalmente. Agora, se você não usar Dash G, você só pode usar isso dentro de seu próprio projeto. Quando você cria um novo projeto, você precisa reinstalar a interface de linha de comando. Quando você usa Dash G. Você está dizendo ao seu sistema instalado isso em todos os lugares, para que cada aplicativo possa usá-lo. Então Dashti significa global, e depois tiramos o nome do pacote. Agora, o gerenciador de pacotes de notas é inteligente o suficiente para saber onde ir e obter o cli angular . Então, quando você aperta Enter, isso deve explodir, desaparecer e recuperá-lo para nós. Eu parei de gravar lá porque eu só queria cortá-la para que você tornasse mais rápido. Mas eu liguei-a de volta. Wells estava instalando porque você sabe o que eu vi? Eu vi. Bem, temos samaras suficientes agora. Mas se eu rolar para cima, temos esses avisos faltando, acesso certo e um monte de avisos. E se isso acontecer e você também obter um monte de erros, então você provavelmente tem que executar este comando como o super usuário tão pseudo e então você tem digitar sua senha quando você faz o que eu estou fazendo agora. Agora, se você está no Windows, você não deve ter esse problema. Você pode ter um pop-up que diz que ele precisa de acesso de administrador. Mas se você conseguir esse problema quando você abrir sua linha de comando direito, clique nele e clique em Executar como administrador e então você deve ficar bem, certo? E uma vez concluído, você não deve ter erros. Você pode ter um ou dois avisos, mas em geral, tudo bem, então eu tenho alguns avisos lá, e às vezes ajuda passar por eles. Então, se tiver problemas mais tarde, sabe que esses avisos apareceram, mas devemos ficar bem assim. Então, uma vez que isso é instalado, precisamos criar nosso novo aplicativo angular em vez de correr através de todas essas coisas, criando os arquivos por nós mesmos, que é perfeitamente bom para fazer. O que vamos fazer é usar o CLI angular para ir n g nu eo nome do PNUMA e o que eu vou fazer medo é primeiro, eu vou apenas ir para o projeto como deixe-me ver onde eu vou colocar isso, talvez em documentos, eu vou apenas ir para o projeto como deixe-me ver onde eu vou colocar isso, talvez em documentos, documentos inúteis para ir para a pasta onde você deseja armazenar isso, indo para ver o que está lá dentro. Deixe-me fazer um diretório fora do N G dois talvez, e então eu vou entrar nesse diretório de energia para a APS, e esse diretório deve estar vazio. Então o que eu fiz lá é simplesmente criar diretor. Claro, você poderia fazer isso manualmente. Isso é perfeitamente bom. Então eu vou para o seu mais tarde Não, podemos usar o comando e G como este site se refere a N g Novo e podemos criar um aplicativo. Então vamos chamar este primeiro aplicativo traço três hit Answer. A interface de linha de comando vai configurar tudo o que precisamos. Veja se ele criou todos esses arquivos que precisamos. Então, se agora vamos para esse diretório, eu vou mostrar que na pasta anexando temos agora a nossa primeira pasta APP, que está na energia Tuapse. E temos todos esses arquivos. Temos o arquivo do pacote. Lembre-se que ele nos pediu para criar e algumas outras coisas não se preocupam com o que eles são. Esta é a nossa aplicação angular básica. Lembre-se, é tudo javascript e texto datilografado. Então, a fim de editar esses arquivos e parar de brincar com as coisas, bem, isso ainda não foi encerrado. Às vezes ele faz isso, ele fica um pouco preso ou enquanto eu acho que ele está fazendo está realmente instalando coisas para nós . Então deixe-me ir embora por um minuto e deixá-lo fazer o que precisa fazer. Ok, isso terminou de instalar as coisas. Então, se olharmos em nossa pasta agora, temos agora algo chamado de pasta Módulos Node. E o que nossa interface angular de linha de comando fez foi ter todas essas dependências, todos aqueles bits de javascript que precisamos para executar nosso pescador para fora. Ele foi e recuperou-os automaticamente para nós, e eles estão todos armazenados dentro da pasta de módulos de nó. E como você pode ver , começa com, claro, angular. Temos o CLI. Temos ferramentas angulares e temos uma virada de coisas. Nós nunca entraremos nesta pasta ou usaremos a menos que seja um caso extremo, caso em que precisamos corrigir um bug. Mas prometo que nunca precisará fazer isso direito. Então, isso tem. Simplificou nossa vida na instalação de um tornozelo para cima. Agora está pronto para ir. Então, como vamos executá-lo? Bem, APS geralmente é executado em um servidor local. Se estamos desenvolvendo em nossa máquina e o servidor local é armazenado no host local no momento, ele nos diz que não existe tal coisa. E isso é porque precisamos iniciar nosso host local com este comando chamado N G servir. Então, primeiro de tudo, precisamos ir para a nossa primeira pasta APP e, em seguida, digite N G servir e angular ou a interface de linha de comando vai procurar todas as nossas coisas angulares. Compilá-lo juntos e servi-lo para fora e dizer ao nosso computador quando você vai para o host local, ir para este servidor Web que eu criei. Então, lá você pode ver que o comando Angular Live Dev servidor está sendo executado neste endereço em que o endereço está sendo executado na porta 4200 para que sua porta pode ser qualquer coisa. Você pode mudar isso se você quiser, mas não há necessidade de neste momento, vamos para o host local 4200 hit Enter e Walla. Nosso aplicativo funciona assim, graças ao cli angular foram tiveram que fazer nenhum lixo manual. Acabamos de criar o nosso invólucro angular. Nós o servimos em nosso servidor no Js, que está atualmente em execução. Então é assim que você cria um pescador para cima. E é assim que você o executa em um servidor. Agora, muito mais tarde em outras seções, eu vou mostrar a vocês como instalar isso em um servidor real. Mas todo o processo que você viu aqui ao iniciar o servidor é praticamente o mesmo. Então tudo funciona como deve ser na palestra final desta noite nesta seção, eu só vou mostrar a vocês algumas maneiras muito, muito básicas de editar alguns pedaços e peças na Europa só para que possamos ter um sabor de sentimento para o que é realmente construir e criar um angular para mapear. 4. Execute um aplicativo Angular 2 e edite seu primeiro código: Ok, na parte final desta seção, vamos apenas fazer um pouco de edição. Lembre-se, temos nosso aplicativo angular pronto e em execução no host local e na porta 4200. Nossa APP funciona. É um pouco plano no momento, então vamos mudar isso. Vamos para a pasta onde nosso aplicativo está armazenado e você notará que todos esses arquivos têm. Eles têm diferentes tipos intermináveis, mas basicamente são todos arquivos de texto, então você pode usar qualquer editor de texto para editá-los. Agora, eu tenho um monte instalado aqui e você pode ter o seu favorito. E na próxima seção, vou mostrar qual eu prefiro que você use porque eu uso. E eu acho que é ótimo, e realmente ajuda a reduzir os erros que você pode ter. Mas por enquanto, vamos usar qualquer editor de texto que você tem ir para a sua pasta APS e depois olhar dentro Aqui temos essas pastas e para E. Isso não soa como se fosse o nosso aplicativo. Temos a pasta de módulos, lembra? Eu disse, não toque nas coisas lá dentro. Temos a pasta Doc Jason pacote, que contém todas as coisas que precisamos para o nosso aplicativo. E também temos essa fonte de pasta. Agora, se você entrar lá, o que você vai ver são três outras pastas, talvez mais, talvez menos, dependendo da sua versão. Temos este ícone e aquele ícone. Se formos até aqui e clicarmos em nossa barra de endereços no topo logo antes do endereço, podemos ver esse ícone. Então isso está nos dando uma pista de que nosso APP é criado a partir desta seção porque é onde a imagem está. Basicamente é outra pista em que temos um arquivo html index dot e se eu abrir esse arquivo com apenas um editor de texto simples ou não temos, há carregamento. Talvez se eu abrir isso com deixe-me tentar o código visual do estúdio, vamos ver o que isso nos dá. Uh, nós temos um html básico pensar e dentro, se você tem um monte de tags que é apenas html simples velho, nós temos à frente. Você tem o HTML nós temos o tipo doc. Claramente, isso não é um aplicativo inteiro, então eu vou fechar isso. Vamos continuar olhando para isso agora. Se ele Se você sabe sobre desenvolvimento Web, você sabe que o índice sempre é carregado primeiro. E se eu reabrir isso na verdade e mostrar-lhe algo, o índice é carregado e todo o nosso aplicativo angular não está localizado dentro desta tag de rota do aplicativo . Então tudo o que vamos criar está contido dentro do desenraizamento. Isso é apenas algo para notar por enquanto. Então, ele está mesmo contido lá dentro? Bem, nosso aplicativo, isso é clique. E temos um monte de arquivos estranhamente nomeados aqui. Mas os nomes deles não importam porque quero que notem um padrão de nomes que acontece aqui. Temos um componente de aplicativo, Doutor. Sim, Nós temos um componente APP dot html e um componente de aplicativo ponto C s. Agora, se você está familiarizado com o desenvolvimento Web, isso é como javascript, mas ele está usando typescript. Daí o TS terminando HTML é uma espécie de linguagem de marcação de hipertexto layout e CSS é, claro, o estilo. Então você já pode começar a ver alguns elementos familiares do desenvolvimento Web. Temos uma página de estilo, temos uma página de layout e temos a parte comercial real fora da página. Então vamos abrir isso para fora componentes dot typescript novamente. Estamos apenas olhando para as coisas para ver o que está acontecendo. Então você pode usar qualquer editor de texto primeiro. Temos todas essas coisas muito estranhas. E o que temos aqui em cima? Bem, se você está familiarizado com qualquer outro tipo de programação orientada a objeto, temos essa instrução de importação e isso traz a classe componente. Se você gosta de angular e um componente é uma parte fundamental do angular, você pode pensar em tudo o que vamos fazer como componentes. Eles são como blocos de Lego, e vamos colocar todos esses blocos de Lego juntos nas aplicações que construímos. Não, este é o nosso primeiro componente para o componente aplicativo e note que temos algo chamado um seletor, que é a rota APP. Agora, onde já vimos isso antes? Bem, nós realmente vimos isso dentro deste arquivo html index dot. Então angular usa o que é chamado de seletor para carregar o que nós criamos dentro do ataque . E essa tag neste caso está na raiz, que está no arquivo html index dot Então, claro, cada componente precisa de um modelo e esse modelo está localizado neste arquivo. Os componentes do aplicativo dot html e cada modelo precisa de um estilo que é criar que está localizado no arquivo correspondente C. S. Então todos juntos, o que dissemos aqui é que temos um componente. É assim que você referenciou os componentes usando uma tag chamada Uproot. O modelo para este componente está localizado no arquivo html ponto componente e o estilo para ele está contido no componente dot CSS. Isto é apenas uma espécie de convenção e vamos nos acostumar muito com esta causa vamos continuar criando este cenário para todos os componentes que criamos. Finalmente, temos uma classe de exportação chamada componente APP com um título é igual a trabalhos de aplicativo. Onde você já viu isso antes? Bem, é a nossa página principal no trabalho, então se eu desenhar um pouco para você sobre o que está acontecendo aqui? Nosso aplicativo está carregando este arquivo HTML e o arquivo HTML. Vamos lá, carregá-lo está procurando a rota APP. Então o que ele faz é encontrar a fruta aplicativo, que é este componente aplicativo. Então, se eu apenas mostrar-lhe que na estrutura de arquivos, no aplicativo e é Estes três arquivos chicotes para três. Então ele vai para fora e ele encontrá-lo dentro fora do componente aplicativo. Doutor. Sim, e diz: “ Olha, Olha, eu tenho o desenraizamento. Em seguida, ele pede um modelo que nós fornecê-lo. Nós damos-lhe os componentes do aplicativo dot html que está aqui, e nós damos-lhe algum estilo, que é opcional. Você não precisa ter isso. Então temos essa parte muito importante que eu não vou abordar a exportação. E quando dizemos exportação e angular estavam dizendo tudo que isso está disponível para uso. Se não tivermos exportação, nossa sintaxe ainda será válida. Mas o aplicativo não saberá sobre o nosso componente de aplicativo, e não saberá sobre as tags apurate que receberão um erro. E dentro daqui, acabamos de fazer algo muito simples, que é intitulado Equal App Works. Agora, você deve estar se perguntando, como esse título é transferido para a nossa inscrição? Bem, aqui é onde nós vamos realmente abrir o arquivo html aberto com código Visual Studio. E olhe para isso de dentro para Curly Brace. É importante notar que há dois. Temos este título e esta é a beleza do angular. Ele está ligando este título de variável com o que está contido na classe. Então, dentro desta classe de exportação, eu posso entrar e nomear variável, por exemplo, e apenas servindo Grant, Salve isso E dentro daqui, abaixo de H um, eu posso dar-lhe um tag de parágrafo e o que não é Grant. Queremos colocar um nome, e posso fechar minha etiqueta de parágrafo. Agora vou guardar isso. E então eu vou para o meu terminal e olhar, Nosso terminal pega que as coisas mudaram e re compila para nós, que deve re compilar e dizer um navegador. Temos algo novo, e lá temos no Works e Grant. Ok, parabéns. Você editou seu primeiro ângulo para código E. Com licença. Agora eu posso entender que havia muita informação lá. Se você é novo nisso e angular, não funciona. Como a maioria dos outros frameworks que me deparei. Mas uma vez que você se acostuma com isso, é muito fácil trabalhar muito rapidamente. Então, só para ter certeza que eu tenho os conceitos básicos dentro de sua cabeça, eu vou apenas verificar algumas dessas coisas novamente. Vou ao meu localizador, e vou rever e dizer que temos o nosso ficheiro de índice. E dentro desse arquivo de índice temos É como um arquivo html usual porque este é o 1º 1 que é carregado. Temos nossa rota da maçã, Tague, e isso contém tudo em nosso aplicativo. Aconselho-o a deixar sempre isto como está. Então o nosso sistema angular desliga e procura a fruta app. E quando ele sai e o encontra dentro de um desses componentes que tem bean exportado, então sabemos que ele está lá e ele encontra este seletor o desenraizamento, ele então carrega um modelo. E este estilo, se nós os temos, carrega tudo o que precisamos dentro da classe. E se precisar, ele vincula algumas variáveis como título e nome. E então ele combina tudo isso e produz algo que podemos ler em nosso navegador . Então essa é uma visão muito rápida, muito básica sobre como angular fazer o que ele faz. E pouco antes de eu terminar isso, se você se lembra dos velhos tempos fora do desenvolvimento web e eu apenas uso isso. Não escreva no seu. Só estou escrevendo no meu. Nos velhos tempos, você teria que fazer o que é chamado Atravessando o Dom o modelo de objeto de documento. Então, se você tivesse algo como um H um nos velhos tempos de desenvolvimento, você diria que o I d era igual ao título. E então em algum lugar em seu arquivo javascript, você teria que ter algum tipo de função como sua consulta J funcional seja lá o que for para ir e encontrar, você sabe, item chamado título. E este cavalheiro é extremamente ineficiente porque você tem que percorrer todo o caminho por esta árvore de elementos. Você teria que procurar tudo até você encontrar este item de título e então você faria isso igual a qualquer sua variável waas E eu sei que eu não usei linguagem adequada aqui, mas você tem a idéia de que atravessar o amanhecer é incrivelmente caro para fazer em termos de poder de processamento e retarda as coisas. E o que angular faz é nos bastidores. Ele registra todas essas variáveis. Todos esses elementos dom se precisamos que eles sejam registrados e isso os torna livremente disponíveis para uso por nosso programa JavaScript ou tipescript, e isso significa que temos enormes benefícios em termos de desempenho. Então APS angular são realmente, muito rápido e angular Tuapse ainda mais. Certo, então isso conclui este modelo. Espero que se juntem a mim no próximo módulo quando vamos mergulhar um pouco mais fundo e criar nosso próprio componente. E uma vez que você tenha feito isso, você terá os blocos básicos de construção fora, sendo capaz de criar qualquer coisa que você possa imaginar na Web. 5. Como continuar 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.