Construa aplicativos da web incríveis usando o Angular 7 | Vinod Kumar | Skillshare
Menu
Pesquisar

Velocidade de reprodução


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

Construa aplicativos da web incríveis usando o Angular 7

teacher avatar Vinod Kumar, Software trainer, developer & consultant

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

    • 1.

      Bem-vindo a este curso

      2:18

    • 2.

      O que você deve saber?

      1:15

    • 3.

      Configuração de software necessária

      5:56

    • 4.

      Como usar exemplos?

      3:28

    • 5.

      O que é angular?

      1:31

    • 6.

      Criando nosso primeiro aplicativo usando CLI angular

      24:30

    • 7.

      Criando um aplicativo angular do zero

      12:36

    • 8.

      Visão geral de uma compnent angular

      3:47

    • 9.

      Usar CLI angular para gerar novos componentes

      7:19

    • 10.

      Demo - Clique no aplicativo de contador

      7:05

    • 11.

      Visão geral de diretivas

      3:09

    • 12.

      Demo ngForOf, ngIf, ngStyle e ngClass

      16:31

    • 13.

      Demo ngSwitch

      9:18

    • 14.

      Demo - diretiva personalizada

      7:35

    • 15.

      Como criar a estrutura básica do nosso aplicativo de agenda

      11:05

    • 16.

      Criando o componente de ContactDetailsComponent

      12:01

    • 17.

      Introdução aos tubos e criação de um tubo personalizado

      6:00

    • 18.

      Criar um tubo personalizado para exibir a idade a partir da data de nascimento

      8:06

    • 19.

      Atribuição - Crie tubos personalizados para preenchimento de uma cadeia com alguns caracteres

      2:31

    • 20.

      Criando o curso de injeção de ContactsService

      7:56

    • 21.

      Configurando o ponto de extremidade de /contatos

      8:37

    • 22.

      Consumir o ponto de extremidade REST, no nosso serviço

      6:07

    • 23.

      Como escrever operações de CRUD no injetável de ContactsService

      7:22

    • 24.

      Exibindo a lista de todos os contatos usando diretiva NgForOf

      9:00

    • 25.

      Configuração de rotas e visualizações de mudança

      11:32

    • 26.

      Acessando os parâmetros de rota no ContactListComponent

      3:28

    • 27.

      Deletar um contato

      3:27

    • 28.

      Formulários orientados por modelos vs modelos (reativos)

      1:19

    • 29.

      Trabalhar com um formulário orientado a modelos para adicionar novos contatos

      14:41

    • 30.

      Validar entradas de usuário em um formulário orientado a modelos

      16:46

    • 31.

      Editar um contato usando formulário reativo

      16:51

    • 32.

      Validar entradas de usuário em um formulário reativo

      14:03

    • 33.

      Integrando jQuery (para paginação no rolo)

      9:30

    • 34.

      Usando o SweetAlert para belas caixas de diálogo

      11:58

    • 35.

      Criação e implantação

      14:29

    • 36.

      Compilação de JIT e AOT

      7:29

    • 37.

      Conclusão

      0:29

  • --
  • 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.

603

Estudantes

--

Projeto

Sobre este curso

Aprenda o Angular 7 do zero. Seu nível de confiança aumenta de 0 para 80% em 5 horas.

A estrutura angular é usada para criar aplicativos de web de lado cliente escaláveis, empresariais e performantes. Ele fornece um ecossistema para desenvolvimento de aplicativos de web do lado do cliente. O ecossistema de desenvolvimento também pode incluir ferramentas externas ou bibliotecas. O processo de ecossistema inclui inicialização de projetos, operações/ferramentas de desenvolvimento, testes e suporte de compilação.

Uma das melhores características do quadro angular é que ele é bastante flexível quando se trata de uso de bibliotecas externas além da escalabilidade que ela proporciona. Com a adoção de framework angular, o gerenciamento de desempenho do aplicativo é impulsionado pela comunidade indiretamente gerando melhores oportunidades de trabalho. O Treinamento de Certificação Angular visa abranger todos esses novos conceitos em torno de Desenvolvimento de Aplicativos Empresariais.

Conheça seu professor

Teacher Profile Image

Vinod Kumar

Software trainer, developer & consultant

Professor

Hi, my name is Vinod, and I am a software trainer, consultant and freelance developer. I am also the creator some of the highest rated courses on Udemy and SkillShare. In my professional teaching career (spanning over 23 years), I have trained hundreds of thousands of software engineers. Teaching is not only my profession, but also a passion. Creating online courses gives me the opportunity to reach and help students across the world.

Visualizar o perfil completo

Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas 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. Bem-vindo a este curso: angular é um framework de aplicação Web de código aberto têm vivido pelo Google e uma comunidade fora de indivíduos e corporações. Se você está familiarizado com nosso coração de retrabalho angular Jay, o novo Anglo DreamWorks é um completo relacionado da mesma equipe que constrói impulsos angulares. Originalmente, isso realmente era chamado angular, também. Mas isso levou à confusão entre os desenvolvedores para gratificar a equipe anunciou que separado feito deve ser usado para cada trabalho quadro com prisões angulares, referindo-se dedo do pé, as explosões maravilha e sofrimento angular toe piorar loja nable. partir desta gravação, Angular Russo 7 é o mais recente. Uma aplicação angular é para baixo abusando dactilografia, que, você pode dizer é o vídeo mais sofisticado de Charles Strict. Isso é bom para nós. Algumas das regiões de idioma que atualmente não estão na especificação JavaScript nele devem deslizar. Mas desde que os protestos só entendem saia Java, o Famer angular vem com um compilador que transforma seus tipos poderia chamado em um núcleo igual em JavaScript. Para este usuários angulares, aplicações angulares de volta são surpreendentemente farsa. Major levá-lo para o conceito de aplicações pagas individuais no SPE. Isto é conseguido usando um modelo de roteador alimentado por angular que cancelar ou componentes preguiçosamente. Isso é principalmente uma mão sobre, é claro, claro, que significa que vou mostrar-lhe o processo de desenvolvimento de aplicativos passo a passo a partir do zero. Enquanto eu estou usando um par de exemplos básicos para fazer você se sentir confortável com o conceito, eu também vou estar desenvolvendo uma lista completa para o bom dedo do pé aplicação tubo. Demonstrar os principais conceitos fora angular. Sete. Todo o bem que desenvolvi neste curso está disponível para você não escrever, Instalar e executar esse passo para fazê-lo são mostrados nas palestras subsequentes. No entanto, se você quiser chamar a si mesmo o que eu recomendo fortemente, você pode fazê-lo digitando comigo e pausando o vídeo sempre que necessário. Meu nome é, você sabe, eu sou um treinador mais suave, consultor de desenvolvedores com uma experiência na indústria há mais de 20 anos. Dou-vos as boas-vindas a este curso excitante. Há muitas coisas para aprender, então vamos começar 2. O que é esperado saber?: Como angular é usado para criar aplicações Web, HTML torna-se o pré-requisito número um para fazer este curso. Você não precisa ser um mestre no tópico, mas você deve estar ciente de alguns dos ataques básicos de sua equipe para criar títulos. Dusan Spans ordenou outras listas, inserindo imagens e hiperlinks. Eu não usei muito de CSS neste curso, mas ter uma boa idéia fora CSS ajuda você a desenvolver bons aplicativos Web para styling. Nossos aplicativos Web geralmente reutilizam alguns bons frameworks CSS, e neste curso eu usei Twitter bootstrap trabalho sistema CIA. Se você tem uma idéia sobre o mesmo, é fantástico. Mas eu não estou esperando que você saiba sobre isso. Onde quer que eu esteja usando bootstrap, eu vou explicar o que essas classes CSS para. Enquanto HTML e CSS compõem a camada de apresentação de aplicativos Web inteiros, a parte do mecanismo do aplicativo é retornado usando o texto tipográfico. Para todos os fins práticos, podemos considerar o texto datilografado como uma extensão de Charles Bridge, então se você tem um conhecimento básico de javascript, você está pronto para ir. As principais características, como funções de Adam e decoradores serão explicadas à medida que vamos 3. Configuração necessária de software: neste vídeo, vou mostrar-lhe o conjunto básico de necessário para começar com uma aplicação angular . Primeiro, exigimos Norges que vá para North Chester org e vemos algumas opções aqui . Há uma ideia. Suporte a longo prazo terminam para jantar ou dois na atual luta Levin Dirt ou onda zero. Durante a instalação, você pode encontrar algo em sua lavagem aqui, então clique sobre isso para baixar. Deixe-me ver. Não nos importamos com este estoque e abrimos o que inicia o processo de instalação. Esta instalação é produzir em linha reta. É bom para as opções padrão, ok? E isso está feito. Não muito longe eu posso ir toe terminal são Windows Command Brunt, Andi, procurar pelo Northern Test Affliction e esse é o seu 11.5 ponto zero. Ao insultar Norges, nós também teria conseguido NPM usando o que podemos instalar o quadro angular necessário e suas dependências em NPM destinado lavagem e também ter certeza de que você algo como isso. 6.4 ponto um. Você pode atualizar o NPM toe novo russo digitando NPM atualizar que g n, p m e em computadores Mac. Você pode querer usar Sudo que pode pedir a senha do administrador no Windows em B m da mesa. G índio é bom o suficiente. Isso realmente não vai deixar o mais recente russo off npm da Internet Onda faz isso como sua instalação global cozinheiro. Isso pode levar alguns segundos, e uma vez feito, mais uma vez, podemos verificar El Bien de stash russo. Andi deve ver 6.550 agora. India Minutes North Package Manager usado para instalação fora de pacotes globais, frameworks e dependências do projeto para o segundo aspecto fora para projetos que seria para instalar angular. Agora, quando é o angular angular é na verdade um monte de lançamento de vôo, Mas, a fim de começar com um projeto angular, temos poucas opções. Número um, se um bom recursos aqui eu tenho poucos IDs que podem ser usados para criar um projeto angular em, e as idéias vão cuidar de todas essas coisas. Nós estaremos usando Visual estúdio tribunal, mas que é mais como uma ninhada extra, Mas é uma ferramenta muito boa para trabalhar com angular. Mas há um fazer para colocar para teto angular é a interface de linha de comando, que nos permite criar produtos angulares rapidamente. Andi também tem muitas e muitas opções fora para US toe gerar poucos JavaScript ou núcleo de texto além de construir e implantar aplicativos também. Então vamos usar isso. E para este propósito, precisamos voltar para a frente de comando e instalar a luz angular ver. E para fazer isso, morrerei a cada surdo. G você pode dizer instalado. O Jack. Taquicardia é o papai G. Instant não importa. E então eu fiz em Angulo. Foi no ano passado. A vida. A Andi. Se você quiser especificar um Washington particular, você pode dizer em, por padrão, ele está apontando o dedo no mais tardar e novamente, Eu sou um obrigado a usar. Portanto, devido à instalação do Dash G para uma instalação regular, você não precisa da pseudoopção. E desta vez não faz o buster, porque ele apenas perguntar anteriormente. E este Angular Seelye olhos uma ferramenta muito útil, como uma menção que perverte lotes e lotes de opção. Para começar, ele tem uma opção para criar um novo projeto. Ele tem uma opção para iniciar um servidor Web de desenvolvimento e assim por diante. Então, muito bem. Se as coisas são feitas, podemos digitar n g morte stash Washington na GE é o comando que foi instalado quando fizemos a instalação CLI angular. E aqui está a CIA angular, como Washington, 7.1 ponto quatro, nem a Pergunta de Jay, 11 pontos por 11.0.0 e poucas outras lavagens básicas estão listadas aqui, que é o que estaríamos usando. Embora existam muitas idéias disponíveis, uma fora do moster, provavelmente idéias poderosas são a pedra da Web, que é uma pedra comercial. Há se também há idéia inteligente, que é principalmente homens para o trabalho, mas também é usado para o desenvolvimento de aplicativos JavaScript. Há um angular ocioso por. Babic vive, então as pessoas estavam familiarizadas com o eclipse que isso é em i d construir em cima de um clipes. Então, o que também é muito bom. Mas o mais comumente usado é Visual Studio Core, que diferente editor XT tástico para brincar por trabalhar com o script de trabalho aplicações industriais em que este é o que estaríamos usando. É a partir da Microsoft baseado Off Atom, para que você possa visitar court dot visual studio dot com. Onda decidiu antes são seus advogados e lista os seres de download, então eu já tenho isso. É uma instalação simples. Basta baixar isso. É um arquivo ZIP, descompactado e começar a usá-lo. Tão simples quanto isso. 4. Como usar exemplos?: neste vídeo. Vou mostrar-lhe como usar este zip encontrar que você fez sobre isso. Então eu tenho que tirá-los aqui, contrariar os atores e a lista telefônica sequestrá-lo. A primeira coisa que você tem que fazer é rebocar o zíper. No meu caso, eu posso apenas clicar duas vezes nisso e ele é extraído aqui mesmo. Então eu abro uma frente de comando nesta pasta particular. Então, estou abrindo. Não me diga nada. Veja a melhor conversa e depois desça. Se você ver o conteúdo deste, você vai ver que há um pacote muito núcleo ou Jason, que tem muitos dependentes, está listado, instalado as diferenças no pacote ou Jason você tem que tomar no comando e b m em parada. Uma vez concluída a instalação, você pode dobrar um comando. Ng servido traço cheio. Isso irá executar os desenvolvimentos. Houve e abre o aplicativo em seu padrão congelado. O aplicativo está em execução. Posso clicar no incremento são determinados botões para testar o aplicativo. Talvez feche o navegador. Isso é controle. Veja sobre a Guerra Civil para parar com isso para executar o aplicativo de lista telefônica mais uma vez, eu vou entrar na mesma e abrir novos 10 minutos. Assim, a cidade na pasta do aplicativo e sob o comando NPM sentir parar para instalar todas as diferenças. Eu sei que a instalação é realmente vamos ver como executar isso. Ao contrário do aplicativo anterior, este depende de um ponto final de descanso, que, se você verificar as tochas de pacote em, há um comando. Milho Jason, senhor, foram adicionados, que começa um Jason. Havia em 43 duplo número de porta zero, que lê os dados de DB barra mais tarde Jason. Então a maneira que você pode fazer isso é por qualquer PM executar Jason Server, e isso irá executar o ponto de restaurante neste Yuanan particular. E agora posso abrir outra frente de comando ou posso abrir na sua cidade pela comunidade prisional. E então eu posso dizer em geezer Dash completo, Não, o aplicativo está em execução. Eu posso ser a lista de contatos. Eu posso clicar em qualquer pessoa de contato em particular, e é. Eu posso ir para o nosso novo contato e tentar adicionar em sua pessoa de contato também 5. O que é angular?: angular é uma das estruturas mais populares para a construção de aplicações clientes. Ao contrário dos dias angulares originais, o novo angular usa texto tipográfico para o desenvolvimento de aplicações juntamente com HTML e CSS. Os blocos de construção básicos de uma aplicação angular consiste em diretivas de componentes, tubos em injetáveis, que também são conhecidos como competência de serviços. Exibições definidas, que são define elementos de tela junto com o seu programa. Diretivas de lógica e dados são amantes de controlar a aparência e comportamento fora de elementos HTML . Tubos, outro lado, são usados para transformar dados de componentes em diferentes formatos, por exemplo, e onde o valor da string em injetáveis maiúsculas são classes tipescript reutilizáveis que definiu a lógica de negócios fora de seus aplicativos Os serviços são de Singleton e geralmente injetado componente tau triangular. Para que possamos usar qualquer um desses em nossa aplicação, devemos agrupá-los em um modelo N G. Todo pescador tem um módulo rude, convencionalmente chamado de Marty. Isso fornece o mecanismo de bootstrap que inicia o aplicativo. Normalmente, esse modelo importa outros modelos funcionais, organizando seu núcleo em modelos distintos dos estáticos, ajudam no gerenciamento de desenvolvimento de aplicativos complexos e no projeto para usabilidade. Além disso, essa técnica permite que você faça um carregamento lento digital que está carregando modelos sob demanda para minimizar a quantidade de tribunal que precisa ser carregado na inicialização. 6. Como criar nosso primeiro aplicativo usando CLI Angular: Agora que temos todas essas configurações básicas necessárias, vamos começar criando uma nova aplicação angular. Agora é aqui que você tem que decidir. Queremos criar nossas aplicações. Eu gostaria de criar meu aplicativo na minha área de trabalho e digamos que eu queira criar um novo projeto. Projetos angulares são criados é em N. G. Então vamos dar uma olhada no lixo da mesa de energia, dedo do pé da saúde. Identifique uma das várias opções que temos. E é essa lista de comandos disponíveis em suas descrições nítidas, e você pode tomar N G ajuda, seguido de opções Agora em G nu é opção para que eu possa dizer motor você ajuda e, em seguida, isso vai me dar ajuda na nova opção. Como você pode ver lá, há uma abundância de opções que temos. Mas a única coisa que temos que fazer é o primeiro 1 é o nome que tivemos que dar, que é o nome do novo espaço de trabalho. Basicamente, vai criar uma pasta, que é o seu produto. Pasta também faz isso como seu projeto pelo nome, bem como, e há algumas outras opções. Eu acho que não. Qualquer uma dessas opções é gravada. Hora do desânimo. Vamos em frente e explorar isso. Então pegue o seu Benji novo em Digamos que para um jumper primeiro podemos mudar o nome que então você quer no futuro. Então isso vai fazer algumas perguntas. Apenas alguns deles. Número um, ele perguntou. O que você quer? Um eso de arredondamento? - Não. Agora o roteamento é o que escreveu basicamente no modelo de roteamento que permite que aplicações angulares sejam aplicações de trança única e todo o propósito fora. aplicações Angulares Web são para criar aplicações de um único lugar. Aplicações de bit único basicamente significa que você tem um único HTML encontra nos lotes e lotes fora de arquivos parciais que estarão lá nos senhores do navegador. Apenas um arquivo html em todo o resto é carregado. Um aplicativo de fazer sincronicamente olhar muito rico em experiência. A experiência do usuário será muito agradável em. Há muitos e muitos exemplos hoje no mundo que você pode ter um olhar It, incluindo Gmail, Facebook e alguns outros. Nós estaríamos fazendo isso em nosso projeto, então, apesar do tempo, não queremos interferir no dedo angular, mas estaríamos configurando manualmente essas informações de roteamento. Então eu vou simplesmente dizer não, eu não quero que esta flutuação seja adicionada. A segunda questão é sobre a folha de tempo em. Eu vou estar usando bootstrap para este projeto em particular, que é um dos mais populares que você pode dizer o no quadro CSS. É criado pelo Twitter. Andi em. É muito fixe. Então vamos usar isso em apenas vamos deixá-lo no CSS Chris Ender, e então ele vai criar o projeto. Andaimes também todos os tipos de encontra a sua criação. Às vezes isso pode parecer um pouco intimidante, mas vamos olhar no reboque. A maioria disso é o que eles estão em nosso projeto. Ele também executa o que o NPM instala. O que ele faz é que teria criado um arquivo chamado Package Dodgers. E como você pode ver, os médicos pacote e está aqui, o pacote começar. Jason é o lugar onde você tem toda essa dependência está listada, e é insultante. Todo o dependente é atualmente essa dependência é incluir algo como uma eleição de transferência do trabalho tipográfico para JavaScript estão construindo fora. CS é que há um Há um jays Rx que é usado para chamadas Http assíncronas, e há uma abundância deles que estão em estoque agora. Dependência adicional é como bootstrap. Por exemplo, podemos ter que nos instalar se você quiser incluir nossa consulta J combinada junto com o angular. Você pode fazer isso também aqui e agora que ele fez, podemos abrir uma guerra civil que eu ainda estou na minha área de trabalho. Eu tenho que entrar na pasta chamada como primeiro na Teoria. Primeiro, eu me sinto usando visuais para o acordo. Você deve ser capaz de dizer Poor ensinou toe abrir esta pasta em particular em seu editor. Se não, você sempre pode abrir visual Studio Court e, em seguida, você pode dizer que eu quero abrir esse arquivo em particular. Então eu tive opção de pasta aberta aqui. Clique nisso. Eu vou para a minha área de trabalho na área de trabalho. Eu tinha esta primeira vez a dizer “Abra agora”. Aqui podemos dar uma olhada em todos os outros achados que são gerados. Como nosso aplicativo angular é criado usando typescript, que é um super set off JavaScript, ele tem poucas opções aqui. Elegir es toque fiapos, e isso é basicamente sobre as regras e regulamentos a serem seguidos. Quando você está trabalhando com o texto datilografado em você pode habilitar algumas opções visíveis deste Jason em particular. Encontre algumas das regras básicas, o conflito óbvio. Jason basicamente tem algumas informações como Onde você acha que o arquivo de saída deve ser criado? Mas isso é tão inteligente que deve ser usado. O que é o Qual é o alvo a ser usado? Isso significa que se você estiver compilando seus achados datilografados em JavaScript. O que é a lavagem? A transcrição padrões que você deseja seguir para que rosas mais velhas obter apoio a partir daqui e assim por diante. A não ser que esteja muito quieto, não precisamos voltar aqui para que possamos fechar isto fora do curso. Eles me lêem Dot MD que realmente se você está publicando isso no reboque, pegue banheira. Você seria capaz de ler todos os do Norte sobre este projeto em particular. Você pode ignorar isso. Eles são o começo do pacote, Jason, que é uma das descobertas mais importantes que você pode querer estar que é uma das descobertas mais importantes que você pode querer estar olhando para o reboque. E isso tem algumas dependências sobre o desenvolvimento. Dependências e dependências de desenvolvimento pessoalmente. Algo como estrutura como Jasmine são carmim e tipografia. e coisas assim. Então, o que só é necessário durante o desenvolvimento. Mas isso também vai ser empacotado em suas fogueiras. Estes são necessários em seus alguns comandos de atalho aqui. Então, quando eu n g, este é o comando que vai ser usado. O comando N G faz parte dos Módulos Norte. Andi há um pequeno diretório de lixo escuro. E como você pode ver que por dentro você vai ter um N g no Windows, você vai ter lesões. Dúvidas. CMD Então é isso que ele vai executar. Mesmo que tenhamos instalado globalmente, ele escolherá aquele que está disponível localmente sempre que estivermos sob comando. E é isso que está aqui. Então é aqui que você pode voltar e renomear seu projeto. Se você quiser publicar este projeto em alguns repositórios públicos, é aqui que você pode querer alterar o nome em abortos, se quiser. Então esta é a coisa é o Jason angular. Este é um arquivo importante. Nós estaríamos vindo aqui em um dedão de cama, entender o que está acontecendo são quais são as configurações básicas que talvez queiramos mudar. Então aqui, por exemplo, diz que outras opções de compilação, você sabe. Então algo como qual é o seu HTML inicial que é isso? SRC barra índice HTM unzip goto SRC Você vai ver que há um índice html eu inserir fora deste HTML se você quiser assim dizer, por exemplo Holmdel html você pode voltar e mudar que você estava aqui Então há também o principal que diz que é o arquivo principal que o seu selo angular eu deveria começar a olhar agora. O que acontece é que por trás das costas finas e angulares CLI EUA que é um empacotador modelo Então, o que significa que o único achado que ele vai olhar é este médico principal Sim, que está bem aqui sob SRC temos um s principais sujos e então ele começa a olhar para este arquivo em. Em seguida, ele vai para este núcleo de pescador em particular. Acho que posso fazer um clique de controle. - Não. Então, se você olhar para isso, se você olhar para este módulo nota em angular, há um núcleo em que tem um indexado ou fez RTs essencialmente que vai ser indexado R Js . Agora ele vai entrar nesse arquivo e então ele vai abrir esse. Então, assim. Ele começa a partir dos principais 30 anos em diante, em seguida, vai para toda a estrutura de árvore e carrega todos os amigos que são que eles estão em sua aplicação e, em seguida, se pergunta que em um único arquivo ou um monte de arquivos. Na verdade , tem. Então há um achado principal que o pólen sente cinco vezes. Se é basicamente nossos arquivos que são necessários para apoiar o irmão mais velho, especialmente o Internet Explorer você ganhou cinco aqui chamado Hollifield começar dois anos. Você pode ver que isso está aqui, e muitas coisas foram cometidas aqui, e você pode ver isso muito claramente. Eu 9 10 11 e Crume menos de 55 solicitar todas essas políticas. Tudo o que temos que fazer abusar do dedo do pé. Selecione isso e, em seguida, controle de arma de mama. Barra no Windows e comando Slash no Mac e que esboço un elogiado. E agora, se você salvá-lo e quando você estiver em seu aplicativo, você verá que até mesmo seu aplicativo é executado em nosso Internet Explorer ou 1911, bem como a lavagem mais antiga em menos de 55. E então há algumas instruções lá todas auto-explicativas, então não temos que nos preocupar com isso. Vou apenas dizer, desfazer e sair desta luta em particular. Então, basicamente, você tem todos esses arquivos que podem ser gerenciados em seu aplicativo. Algumas outras coisas. Por exemplo, bens que significam qualquer coisa em seu sexo. Geralmente, a pasta Ativos. Convença os imagers sobre imagens em geral. Ícones são Você pode ter alguns vídeos e assim por diante para que eles seriam mantidos aqui. Então, neste momento, em um sexo, você pode ver que não há nada neste momento. Mas em Calif seus arquivos. Se o seu projeto solicita e não pode suportar imagens estáticas, é uma boa idéia manter isso nesse sentido mais completo. E consulte os seus e-mails HD onde quer que isso seja necessário. Ele também tem uma referência fora de greves. Este é o lugar onde vamos voltar e adicionar outra entrada para ou bootstrap. E no caso de você ter 1/3 scripts de partido, você pode especificar que você também é. É uma área fora de todos os scripts que você precisa, e eles serão agrupados em seu jantar de aplicativo. Tem também outras opções para, por exemplo, internacionalização, que é outro tema que abordaremos no Departamento. Mais tarde. Vamos fechar isso e se você vai para o SRC pontos principais Ele diz aqui algumas coisas básicas, mas não se preocupe com isso. Voltaremos e olharemos para este médico principal. Sim, de fato. R. Mas, na medida em que a nossa extensão de aplicativo, os arquivos que importa é o armazenamento de índice TML novamente regionalmente. Não venha nele que você é, mas você pode voltar e adicionar alguns CSS que não são acessíveis. Por que o norte são NPM? Você pode adicioná-lo diretamente aqui, o que geralmente não é uma boa idéia. Mas vamos fazer isso no caso, se necessário, cardos. A única parte do é o único conteúdo em HTML. Você não tem que adicionar mais nada agora, surpreendentemente são estranhamente. Você pode ver que há algo chamado uma fruta barra de frutas, que é que não é um HTM disso, mas parece HTML agora, basicamente, basicamente isso é, uh idealmente, isso é deveria ser algo como uma porta traço até traço rota. Mas, em seguida, os navegadores não reclamam sobre os tempos que não são conhecidos. Agora o que realmente acontece é quando você corre. Por que, quando o Irã, seu projeto angular, haverá arquivos de script adicionais injetados aqui. Você verá isso em um minuto. Estes incluem quadro angular. Então, quando o quadro angular é carregado no ópio de Charleston, ele irá procurar mais uma vez por todas essas tags e procurar por esse tipo particular, em seguida, começa a injetar componentes aqui agora onde os componentes que são geralmente mantidos na árvore Abdullah. É uma convenção. Podemos sempre dizer: “ Não, Não, não vai ser um cochilo. Vai ser em outro lugar, mas isso é considerado a nossa pasta do projeto. Então, tudo o que vamos gravar está dentro deste aplicativo. E, como você pode ver, há poucas lutas já criadas para nós. O 1º 1 é o TS modelo at. Agora angular é tudo sobre a otimização modular. Diz que você chama muitas coisas assim, mas você as agrupa em módulos. Há um modelo que é criado em, mas este modelo é modelo de motor de carro é certo como módulo de motor em seu chamado naquele modelo. Neste ponto, podemos sempre renomear isso se você quiser, mas isso tem um monte de referências aqui. Por exemplo, este bloco de declaração consiste nos componentes que criamos aqui no Google. Gastar muito tempo com este, e então há outro modelo que meus modelos podem depender, que é, como, neste caso, é mercado de navegadores. Então, o modelo atual basicamente é sobre fornecer o navegador estão para baixo manipulação, Você pode dizer, porque nós não fazemos qualquer manipulação feita única a menos que você queira indicar consulta g e coisas assim. Mas, caso contrário, não usaremos nenhum na manipulação do Don. Então, isso é por aqui. Então as importações iam se referir a alguns modelos externos. Poderia ser nossos próprios modelos adicionais, também para nós brancos. Este é um lugar onde você vai começar todos os serviços que vamos ter. Voltaremos e investigaremos isto. Um em bootstrap. Ele diz que Ei, este é um componente que será olhado na estratégia de índice TML. Agora, se você apenas por acaso olhar para o índice dot html por um minuto, é o seu aplicativo. Rude corte Uproot. Então é aqui que ele vai dizer quando angular começa a bootstrapping ele diz, Ei, eu tenho que olhar para este componente aplicativo no índice. Html no componente AB é identificado usando esta pilha. A questão é, como assim se eu ir para o componente aplicativo Então este é um Este é basicamente um algo que é importado a partir deste componente abdur, que é este componente Abdur RTs para abrir posteriormente tortillas componente. Você pode ver que ele está exportando um componente clássico em, mas está decorado com esse componente. E uma outra coisa que você verá aqui é que é ab traço rota e este é um seletor. Então, uma vez que não há nenhum símbolo especial associado a este como ponto nosso hash, ele assume que ele vai ser usado como ataque em rotas cortar desenraizamento. E isso é o que realmente vemos aqui no esconderijo arrancar. Então, se eu tivesse dito aqui, não, por exemplo, então ele procura uma tag a qualquer momento com uma classe CSS fora desenraizado. Então isso não vai funcionar neste incidente. Isso eu poderia ter que dizer negócio último é igual a dedo após barra de raiz de cinzas fazer. Isto é como ele deve ser dado em get. Se eu tivesse usado o haxixe em vez, ponto caso, então eu devo ter que dar o seu I V igual a dois igual dedão desenraizado. Então, basicamente, esses seletor fora de um componente determina como esse componente é identificado em seu HTML, então eu vou deixá-lo como ele está. Voltaremos e veremos isso mais tarde. Mude essas coisas ao explorar, experimente essas coisas. Mas, por enquanto, vou deixar como está. Vou salvar este arquivo para salvar este arquivo para Andi. Você pode ver que este é um plano simples com uma variável membro chamada Title. O título deste Primeiro aqui em cima no dia. Este título é uma variável que pode ser usada no HTML correspondente a este componente. Portanto, cada componente terá um ID de associado HTML. Agora você pode ver que diz Template. Você está nesse modelo. Ural corresponde à mesma pasta que consiste no demônio do conhecimento do Componente Abdullah, que está bem aqui. Se eu abrir isso, você pode ver que é um arquivo HTML que consiste em alguns fazer com uma imagem, em seguida, o bem-vindo e você vê esta variável. Essa variável vem desta parte particular neste símbolo especial aqui, colchetes, colchetes, colchetes duplos chamados interpolação O R. Guiadores. Guiador é o A B I que fornece suporte para este modelo, Parsi. Mas de qualquer forma, o valor do título será injetado aqui. Temos alguma vantagem do que temos algumas ligações aqui. Então, não vamos tocar em nenhuma dessas coisas. E vamos executar nosso aplicativo e então olhar para como isso vai ser. Então eu abri um novo terminal. Tudo bem? Vou abrir um novo terminal agora mesmo. Já estou naquela cidade. Primeiro. Já fiz pelo Stan. Eu vou dizer n g resolver isso está realmente indo toe iniciar um servidor Web de desenvolvimento. Quando começar, vai usar isso de volta. Dwight volta vai agitar toda a luta que temos. O html que o DS arquiva tudo. CS diz tudo em um único desempregado. Bom. - Tudo bem. Andi entra. Também iniciará nossas aplicações. Se você quiser. Você também pode dizer traço para dedo do pé abrir o navegador padrão em DSO os extremófilos, o índice, é equipe ele. Então, se eu fizer isso, pode levar um tempo porque é a primeira vez que está abrindo. Mas ele vai olhar para todos os amigos que temos combina a partir da porta principal 30 anos e, em seguida, entrar em toda a reestruturação e construir a luta residente. Uma coisa que ele também faz é manter esse servidor funcionando aqui. Como você pode ver, ainda está funcionando. Mas como cada vez que eu fizer algumas mudanças, vocês verão que as mudanças serão imediatamente afetadas aqui. Por exemplo, se eu voltar ao visual do tribunal, deixe-me reduzir a altura disso. Então, em vez deste dedão de boas-vindas Titã, eu posso dizer olá. Este testamento está mentindo. E então eu apenas usei o título, e assim que um eles salvá-lo, você vai ver que há uma compilação acontecendo, e que a compilação vai. Uma vez que a compilação é feita, ele vai acionar muito fresco no navegador. Tudo que eu tenho que fazer é pressionar o comando como nossos controladores e janelas, e você vai ver que é uma compilação re, e em um em um tempo você pode ver que ele começa em reinícios pelo navegador, e é Olá, este é o meu Primeiro, e em vez disso, posso ir para casa. Volto para a minha fonte marcou fora este ano, e posso dizer que este é o meu sete angular forçado em A e salvá-lo em. A mesma coisa acontece em você pode ver que a variável está agora impressa aqui. Meu primeiro aplicativo Angula Sete. E se você quiser remover esses links e coisas assim, o que vemos aqui para que eu possa colocá-lo lá em cima inteiramente. Se você cortar Julia, poupe. Você pode ver que ele se foi, certo? Claro, isto está ligado. Então eu não preciso, então tire isso da Síria. Está feito. Como você pode ver, é creme rápido. Andi, aqui é onde você pode continuar mudou muitas coisas. Então, por exemplo, eu posso voltar e adicionar um novo componente e os componentes novamente. Um monte de arquivos CSS html ds. Essa é a coisa toda que queremos fazer aqui na aplicação subsequente. No caso de você querer o nosso bootstrap, por exemplo, digamos, para digitar o seu aeroporto em, Eu posso dizer parceiro. Agora isso tem uma abreviação de imagem para que Visual Studio tribunal suporta Emmett Abreviation , que significa que eu posso limpar algo como PT e botão ponto bt e escuro 50 e primário. E então eu posso ouvir os colchetes cacheados dizer Isso é manteiga e eu posso primeiro ender e você vai ver que o Tribunal HTML completo é gerado a partir disso em Esta é uma opção realmente, realmente super legal vamos estar usando esta turnê são aplicação angular em Do Você? No final disso, você deve estar muito confortável com isso e salvar isso. Volte para um navegador. Eu vejo um botão que é bastante comum, mas se eu ir para uma boa parada ponto com em, você vai ver que há um Este é de Tudor, que, que é um nadador CSS muito popular em Se eu ir documentação aqui em lá é um botão. Como você pode ver em componentes, eu deveria ver botões em. Há esses botões Sucesso secundário primário, Perigo. Então eu vou ter que usar os nomes de classe CSS apropriados. Sim, obediência é necessária em Bt e sucesso primário secundário, Perigo, Perigo, advertência e assim por diante. Andi, isso é muito bem documentado, então você sempre pode voltar e ter um olhar como como trabalhar com um botão ou qualquer coisa para esse assunto. mas, a fim de trabalhar com isso para que eu preciso instalar. Então, o que? Eu vou fazê-los, você sabe, controle, veja aqui primeiro. Então, os desenvolvimentos já estão parados em então eu realmente nt m i para instalar neste momento . Sem traço G porque não é um quadro. Cenouras dizendo. É apenas um conjunto de lutas de biblioteca, seu instalador, e é assim que você faz pull struck, e isso é instalado localmente. Por exemplo, uma vez que pressionei Enter, você verá que ele vai para a Net e baixar as lutas prováveis necessárias em Also Objects Packaged ou Jason. Então isso vai dar uma olhada nisso em nosso editor. Então eu tenho o seu pacote. Comece a alguns e você verá que Packaged ou Jason agora foi atualizado com bootstrap para médico, escreveu um. Eu tenho um modelo de nota. Você verá que há bootstrap em algum lugar. Será listado sequencialmente em ordem alfabética. Eu vou para bem, Às vezes não atualiza o seu lá a opção de atualização. Clique nisso em Agora eu deveria ser capaz de ver sob modelos do Norte. Eu vejo que você vê botas parar aqui A essência e há um CSS e Js. Vou selecionar ver Assis você contra como este bootstrap significa doxy. SSO é o arquivo que temos que atualizar em ponto angular Jason, eu vou rebocar o ângulo que você pode comandar ser o nosso controle, estar nas janelas e você pegar o seu angular. Você pode ver que eu sou angular do que Jason. Vejo que aqui é o local. Muito pode adicionar alguns CSS, por exemplo. Eu posso ir aqui e dizer que Lord sublinhou modelos. Esse é o local onde temos sob o qual temos o chamado Boonstra. Então temos booster dissed CSS e, em seguida, boa correia dar lin dot CSS E com uma vírgula na Síria , ele em quaisquer alterações para o site Georgeson angular que você fez Para que isso entre em , vigor, você deve parar o desenvolvimento desse servidor que eu será feito e, em seguida, reiniciado. Você pode fazer qualquer Engy para que tudo o que você pode dizer npm começar um no mesmo desta vez eu não preciso da fortuna pash navegador porque ele já está aberto em. E quando eles fizerem isso, se eu voltar para o navegador Andi, verifique meu aplicativo. Eu deveria ver um botão mudando com CSS aplicado em que é ele. Diz combinado com sucesso. Não atualizei aqui. Então vamos fazer isso manualmente. Então, quando eu faço uma atualização, você pode ver que agora o botão é um botão de colarinho azul ligado. Claro que, se eu voltar para a minha pontuação traseira, mude isso do dedo primário para salvar perigo, por exemplo. Guarde isso. Você pode ver que vai estar embaixo dele, mas de certa forma, certo. Então 20 de opções em bootstrap. Vamos explorar isso à medida que avançamos. 7. Como criar um aplicativo angular do zero: No vídeo anterior, vimos o centro de software necessário para trabalhar com um projeto angular ser construído, um projeto angular usando o N. G ou CLN angular. Fizemos algumas alterações em nossas aplicações. Então, como a coisa toda funciona neste modelo em particular, eu quero mostrar a vocês como o que é um componente angular. O que é um módulo? E como se faz para parar esse componente? Tudo desde o zero. Então, para isso e você usa o mesmo projeto que usamos no vídeo anterior. Mas vou apagar todas as coisas que são 100, especialmente a parte de cima. Então eu vou selecionar um monte dessas multas aqui. E se eu selecionar em excluir, você deve ver que haverá editores projeto. Então, se eu disser ver desenvolvedor em ferramentas de desenvolvedor são Charles manteve preocupação, que é, Ah, navio de comando J Controle Shivji. Então é aqui que você vai ver outros comparados falar isso no lado direito para que possamos ver a página assim como esta. Então, se eu for aqui e deletar esses arquivos, vocês verão que isso vai causar um e um bando de adultos em um minuto porque a história final existe é compilar rua, e está voltando com algo que falhou com o Senhor. Nem sequer temos um módulo de “at” ligado. E isso é meio que isso é Isso é uma outra vinda porque nosso principal Doherty s que é o ponto de entrada agora, onde é mencionado como um ponto de entrada em Jason angular? Vimos que os cinco principais não são nada mais que SRC ponto médico principal. Sim. Se atrás domaine dot ds, você verá que ele se refere módulo app toe que só sabe ser excluído. Então o que eu vou fazer é tirar de todas essas coisas em uma importação. Então vamos dizer importar nosso cão barra ab barra Vamos ouvir, por exemplo, meu exemplo, , como um samadi, como você sabe, que ele não existe. Isso é criado um aqui, Então eu vou ir para o aplicativo andan eu vou dizer novo bom carro mente exemplo APD RTs E se eu vendê-lo? Se demorou tanto tempo, Andi, então tomo sua palavra do meu exemplo Savage. Vamos ver o que acontece quando realmente fresco. Deixe-me reiniciar os vários Angie So? Então não há nenhum endereço que possamos voltar para o navegador. Você verá essa saudação do meu aplicativo de exemplo. A saída vem, mas neste momento, não é mais uma aplicação angular porque não há angular para dentro. Então, a única coisa que está em ordem é que sua mochila olha para a porta principal, rasga sobre as importações deste arquivo, e nesse arquivo, tudo o que eu tenho para o registro de pontos do console. Não há nenhum ângulo para dentro aqui. Então era aqui que queríamos obter uma aplicação angular. Então eu vou sair e limpar essa aula. Então é uma aula. Digamos que se chama “Olá, componente mundial”. Andi, não há nada aí. Vou te dar uma mensagem para mais tempo. Qualquer coisa. Eu só vou ter uma aula. Mas essa classe se torna um componente adicionando em componente ao seu plus. Eu sei disso porque este é um projeto angular. Lote fora suporte angular é fornecido por via pontuação, e também é automaticamente me dar auto importação do núcleo angular em. Quando eu faço isso, ele surge no decorador em tipografia é sempre dado com colchete encaracolado e um monte de opções em. A única opção que estou olhando agora será um seletor. E desde que o nosso seletor waas já e arrancar no índice afiado humano provavelmente pode ver que no índice HTM e temos essa abordagem cortar desenraizamento. Vou usar o mesmo seletor fora do curso. Se eu fizer algumas mudanças aqui, talvez eu tenha que fazer a mesma coisa no início do índice. É humano também. E mais uma coisa que eu quero dar aqui é um modelo. Eu posso dar um modelo, que é um conteúdo html borda dura aqui ou eu não posso me referir a um vapor externo e arquivo. Então, por enquanto, eu vou dar modelo e eu vou usar esta string modelo, que é chamado Ptolomeu Type várias linhas. Então, vou continuar puro. É um e então eles cortariam a borda um no Ender oprimido. Esse parágrafo de grampo em um PR uma mensagem de você sabe, barra B em. Essa é a minha saída para os componentes. Onde quer que este componente desenraizar-se esconderijo se aproxima lá, eu quero que esta mensagem em particular para aparecer assim, neste momento nós criamos uma classe na classe é um componente, mas nós temos que dar este dedo angular em Say That Hey, injectar isto neste local específico. E para fazer isso, você tem que fazer um componente de um modelo. E um modelo não passa de plantas. Vamos chamá-lo de nós depois do que você é. Qualquer nome fora da nossa escolha. Meu modelo, por exemplo. Mas é só que as plantas como esta é uma classe regular convertida em confiante. Usando este decorador, temos que usar o módulo do motor mais uma vez. Importação automática daquela corte angular. Andi, é aqui que você diz isso. Ei, nós temos que bootstrap este componente em particular, às vezes um booster em Não diga que Olá eram componente. Mas agora, todo o componente oral não faz parte desse modelo. E para dizer que isso vai fazer parte do modelo que dizemos aqui declarações. Andi, nas declarações ia dizer uma lista de todos os componentes que você vai ter aqui . Parte deste modelo será listado aqui, mas bootstrap é apenas o que vai ser usado no índice. É humano. Então é aqui que eu digo “olá”. Componente do mundo é um dos meus componentes agora, um requisito mínimo aqui é que o suporte do navegador porque, em última análise, queremos dedo angular modificar essa cúpula para que eles não o façam. Manipulações são feitas usando um módulo que é chamado como um módulo do navegador. Ok, então ele não parece capaz de sentar em vem automaticamente. Sem problema. Nós sempre pode importar fora de você pode dizer no navegador barra angular off de mais perto no dia em que você pode ver que há um chamado um módulo congelado. Isso é o que queremos que você saiba, incluindo a nossa aplicação que chegou agora que temos um componente, um componente esta parte do módulo angular chamado Marty. Você vê, eles ainda estão lá não é tudo colocar seu refrescado, mas não há nenhum estranho. Isso é principalmente porque nunca contamos modelos angulares tão desocupados. Podemos limpar um número de modelos angulares, mas nunca dissemos isso. Use este modelo e bootstrap que, e é aqui que precisamos de uma função. Ligue. Esta é a última parte do quebra-cabeça. Então eu digo, importar a partir de uma barra angular plataforma navegador dinâmica. Isso fornece uma função. É usar que isso de cresce uma dinâmica que é uma função. Então vamos usar esta função. Andi chamar isso e, em seguida, retorna no objeto. E nós dissemos que Ei, aumentar o modelo para no mercado. Então, se eu for aqui e depois disser, quais são as modelos? Chama-se no módulo. E agora, se eu salvar isso, você deve ver que nós temos nosso componente. Eles podem ver que grande nossa mensagem Olá mundo de nós sabemos Black Form Brother Dynamic é o único que está fazendo o trabalho. Então este basicamente escaneia dinamicamente seus demônios afiados. Por que é que índice html olhou em? Se você olhar para a porta angular Jason, nós dissemos que , Ei, este é um arquivo que deveria ser arrancado. Então, quando você diz plataforma navegador dinâmico ponto bootstrap modelo, ele vai tomar este modelo e descobre o componente bootstrap. E é uma empresa “Olá Mundo”. O componente terra oca é identificado como uma tag chamada Uproot, e ele vai olhar no índice html para este aboot particular. Se for encontrado, então é para aqui que vai. Injectar o dedo neste conteúdo em particular será colocado no local onde Absolute Slash aprovado em vez disso. E isso é o que está acontecendo agora é até mesmo o componente gravado primeiro e depois ele ligado, então talvez faça uma parte de um módulo. Mas Angulo começa o trabalho uma vez que isso é dado, então ele vai procurar um modelo. E esse modelo tem um componente bootstrap, e esse componente é status. Então a questão é, posso ter vários componentes? Em um HTML? Por exemplo, posso salvar o seu índice Vamos tocar html? Deixe-me ouvir uma barra de boas-vindas murchou para produzir qualquer colocar como tal. Não há erros, e não há nada acontecendo neste momento. Mas posso limpar outro componente aqui e torná-lo parte do mesmo modelo nele é possível . Por exemplo, posso dizer que o seu componente de boas-vindas, Andi. Eu só digo aqui, reclamando um componente e eu tenho que dar seletor mínimo em um modelo. Vou te dar um seletor é ab bem-vindo. Isso é o que usamos agora no índice html aqui e então eu diria que o modelo para que é um simples H um ou H três. Bem-vindo à Angular. Então, no treinamento barra extrema, eu salvá-lo. Eu criei um componente. Não vai aparecer principalmente porque não faz parte deste modelo em particular. Então, a fim de torná-lo parte do modelo, eu tenho que dizer que é um componente bem-vindo. Agora você vê que eu fiz isso como parte disso, mas no índice html, ele está lá. Ele não aparece aqui principalmente porque temos assim dizer que ele tem que ser uma das empresas bootstrap em. Agora, Se eu fosse bem-vindo, componente afirmou, espero que eu deveria ver uma mensagem de boas-vindas. Também então componente bootstrap é o único que vai estar procurando índice. É alemão. Então, se eu não fizer isso aqui, deixe-me tirá-lo do índice, é demônio ligado. Então agora eu ainda posso fazer este componente apresentado para o usuário, fazendo este componente parte dos componentes Olá mundo como não tem, você pode ver que ele não está incluído no meu pé. Mas eu posso ir para o meu componente “Olá “no componente do helicóptero. Eu sempre posso prover. Aqui estamos nós. Eu não sei. Talvez também porque de qualquer maneira, vai imprimir extremo. Então eu vou dizer aqui, ak tash, bem-vindo slash. Então, como você pode ver isso agora. Eu não preciso que isso seja uma parte da lista de bootstrap aqui porque ele não vai ser visto no índice HTM. Mas em vez disso, vai ser parte de outro componente. Olá, er, componentes. Então, como uma questão salva agora, não está lá. Se eu salvar e voltar aqui, você deveria ver isso. Bem-vinda. Treino triangular sete aparece. Então é assim que você pode criar um componente, torná-lo parte de um módulo N G. No nosso caso, é o modelo APP e, em seguida, bootstrap, que é o que a Apple vai realmente ser injetada. Os componentes serão injetados. Tau nosso índice html. Claro, muitas coisas podem ser refletidas aqui. Por exemplo, não é uma boa idéia manter todas essas aulas em um só lugar. É uma boa idéia manter isso em um aspecto de trabalho ou texto datilografado. Módulo exportado. Exportar este aqui. Tudo bem. Outro modelo onde você importa tudo e, em seguida, começar a usar isso. Então é isso que estaríamos fazendo essencialmente. Mas apenas toe fazer você entender em um real o basicamente no módulo do motor é o que é bootstrapped pelo modelo de motor angular tem no grupo de componentes que se refere a Andi. Em seguida, ele pega um dos componentes para ser loop no índice. É o time, é o que realmente está fazendo. 8. Visão geral de uma compnent angular: congruente é o bloco de construção fundamental, muitas vezes aplicação angular. Ele prova a interface do usuário, dados correspondentes e até mesmo funções de manipulação. Além disso, uma aplicação angular pode ser considerada uma árvore de componente, com o componente raiz tendo mais um componente-filho e cada um desses componentes tendo componentes-filho por conta própria e assim por diante. Um competente geralmente consistem em. Três Aspectos número um, um texto tipográfico são classe do ano seis com variáveis de membro que representam os dados do modelo e métodos que representam o comportamento fora do componente. Número dois, um modelo HTML que representa a interface do usuário que pode capturar as entradas do usuário no modelo. Mais tarde, nosso presente, os dados do modelo para o usuário e, finalmente, número três, uma folha de estado opcional biqueira melhorar a aparência fora da interface do usuário. Vamos tentar entender o mesmo com um exemplo. Considere a classe no componente contador é apenas um ano comum. Seis classes com um membro, contagem de carros variável e duas funções incremento e equipamento. Como o nome sugere. Quando você chama essas funções, os incrementos são prejudiciais. O valor fora do jacaré membro Juntos, esta classe compreende fora do estado e comportamento da empresa, a fim de apresentar o mesmo para o usuário. Precisamos de um núcleo HTML. Dê uma olhada neste trecho HTML. Como você pode ver, estamos incluindo a contagem valiosa e o método chama a concordância e incremento. Este demônio tem acesso ao estado e comportamento competentes. O diabo colchetes Curly, também conhecido como guidão, liga os dados do modelo sobre o U. N. N. Alterações para os dados modernos é refletido imediatamente. As funções de confiança são ossos para o que você está usando as suas próprias. Do Brackett. Por exemplo. O clique disparou. Os botões aqui estão associados a funções de acordo e incremento definidas na classe de competência, portanto, clicar em um botão aciona o método atribuído. Chamada alterando os dados Morgan, que serão refletidos instantaneamente sobre o que você está, a fim de combinar a vantagem em HTML para fazer um componente, usamos tipos de grupos, decorador. Isto é semelhante às anotações de Joe e atributos de escuridão aqui. A vantagem no balcão é decorada com esse componente. Decoradores em Desesperado são passados um objeto como perímetro para o decorador componente. Aqui estamos especificando duas propriedades importantes. Primeiro, o seletor define a forma como o componente é usado. Por exemplo, no contador sem qualquer prefixo para símbolo implica que o componente deve ser usado como um elemento HTML. Se você usar dark at counter para a propriedade selector , o componente será usado como uma classe CSS. Se você usar o registro quadrado em torno do contador para a propriedade selector, em seguida, o componente é usado como um atributo, muitas vezes elemento html e um último. Se você usar hash up contador para a propriedade seletor e o competente é usado como uma idéia. Muitas vezes é elemento do Gmail. Prática geral e recomendação angular é que os componentes são usados como elementos HTML . O segundo modelo de propriedade corresponde à parte html do componente. Como você pode ver, temos usado modelos do ano seis. String para incorporar núcleo html multilane. Em última análise, a definição de classe em HTML pode ser mantida em arquivos separados. Esta é toda aquela modularidade e separação de consentimentos. Para este uso o modelo Ural em vez da propriedade do modelo e atribuído as partes relacionadas muitas vezes externo. Html cinco 9. Como criar CLI Angular para gerar novos componentes: vamos tirar exemplos da criação de novos componentes usando a CLI angular ou o Comando Engy no monstro. O trabalho de componentes Eu já criei um novo projeto angular chamado Contador em um Zoo Conceit Salário executado em anos, então bem-vindo ao contrato e tem os links básicos aqui já abriu a mesma coisa no núcleo de estúdio visual. Esta é uma nova aplicação. Nada mudou, exceto que eu adicionei bootstrap CS é para este. Além disso, não há nada que por isso temos aqui no aplicativo SERC e temos o seu componente aplicativo de lágrimas que tem este título. Podemos mudar isso a qualquer momento que temos o html correspondente à mesma coisa que tem ido sobre este material. Vamos obtê-lo todas essas coisas e nosso próprio rodapé cabeçalho em outro componente para aplicação contador . E depois, a CIA diz, vou mostrar-vos como este ano diz que pode afectar a nossa visão também. Não, é claro, nós não queremos alterar nada neste momento, mas queremos adicionar um novo componente à nossa aplicação agora, lembre-se, lembre-se, cada vez que adicionamos um novo componente, ele tem para ser registrado com nossos módulos de motor, que está lá em idéias modernas. Neste momento, há o único componente, como você pode ver esse componente. Agora, eu vou criar outro componente aqui, e isso vai ser chamado Deixe um cabeçalho de aplicativo no rodapé no campo de golfe o componente contador . Agora, para criar esses novos componentes, eu tenho que ir para uma frente de comando, que é terminal aqui. Agora. Eu posso parar com isso. Não preciso parar, mas posso. Mas no Mac, eu posso abrir uma nova guia em pelo comando presente t em. Então eu tenho um novo prompt de comando aqui. Então minha estrela ainda está correndo aqui. Mas eu tenho outra torneira que está aberta, que está no mesmo local. Eu disse que você pode ver que eu estou no aplicativo contador aqui agora para criar uma nova empresa, você pode usar o comando n g gerar em, em seguida, salvar componente. Agora, é claro, temos um brilhante mais curto fora a mesma coisa. Você pode simplesmente dizer n g g c g para gênero, t para componentes e, em seguida, você precisa dar o nome do componente que deseja criar. Suponha que se eu quiser criar um componente de cabeça, então você começa a digitar. Cabeçalho são se o seu cabeçalho app dar capita Agora eu posso dizer por exemplo Rapido Mas o que acontece é que ele vai criar tudo neste local tornando esta uma luta maior. Então, o que? Podemos organizá-los como um quatro que eu considero componentes cortar. Então ele vai limpar o novo para componentes de licor e intacta que eu posso dizer que é suposto para me criar um componente de cabeçalho de traço. Agora ele também irá adicionar um traço de aplicativo perfeito para cada seletor nesta demonstração. Eu acredito que como ele é e eu pressionei Enter Onda mais tarde. Eu também vou dizer que eu não quero qualquer prefixo, porque de qualquer maneira, Eu dei o seu aplicativo Dash outro vai criar abdução traço ABX como o perfeito. Veremos isso em um minuto. Vamos uma imprensa Enter Itália gêneros quatro arquivos diferentes Os arquivos compreende fora de um CSS e HTML, um Esther Spectacor e, em seguida, o seu tribunal componente real. Agora, se você não quer respeito, por exemplo, por exemplo, você sempre pode dizer que o respeito em dinheiro é igual a dois fundos. Você não pega esse arquivo. Você também pode verificar se o arquivo após tortillas modelo foi atualizado com você pode ver que ele foi adicionado após seu componente para nossas aplicações. Isso é realmente preciso, porque caso contrário eu tenho que manter o controle de adicionar cada um lá em cima. Agora, se eu for lá se eu controlar clique nesta luta particular em DSI. O que há nisso? Você pode ver que ele adicionou um traço AB perfeito à nossa aplicação, o que não parece agradável. Vou remover isso. Vou deixar-nos no campo de golfe. Isso é só um cabeçalho aqui. Então não há nada nisso, e é apenas uma nova empresa anunciada em sua data de retorno aqui na NGC neste momento, é um componente barra rodapé. Angular tem algumas recomendações sobre como a convenção de nomenclatura deve ser seguida. Então eles dizem usar um perfeito para que ele não vai colidir com qualquer um do edifício. HTML tags são alguns outros frameworks pilha, por isso é sempre melhor especificar o seu humor livre específico Perfeito. Aqui neste tempo limite, então digamos que isso é apenas especificação igual a duas quedas que é apenas prefixo igual a uma string vazia. Se você não der uma string vazia. Então, é claro, ele vai pegar dinheiro. Então desta vez você verá que há apenas três feltros que são gerados. Andi, há atualização, é claro, no modelo DS ligado. Além disso, apenas para ter certeza de que temos o gerador, você pode ver o rodapé do aplicativo o componente. Se você olhar para o componente para ts você vê que ele é agora necessário. Não é o Ab Dash e o Dash iriam raptar o atirador. Então vamos ter mais um componente. E desta vez eu vou apenas você do que um remo em. Então eu vou dizer, uh, uh, contador. E então, é claro, temos um componente contador também. Então, já os usaram. Este é o seletor que deve ser usado. Então eu tenho o seu cabeçalho no rodapé. Então eu vou para o “Don't componente html “, tirá-lo de tudo aqui e então eu posso dizer aqui que eu vou Você pode ver que vai me ajudar com isso. Eu ouvi e, em seguida, eu posso dizer agir contador de cinzas barra fora curso um rodapé barra rodapé como outro serviço e voltar para o navegador. Eu deveria ver que os três componentes colocados lá, mas tudo o que ele faz, é apto. Cabeçalho funciona no balcão funciona até pé ou obras. Claro, nós Este é um tribunal gerado automaticamente para cada componente. Olhe para que componentes cortar cabeçalho. Há a parte HTML dele, e Simples é para cima. Palavras de Heather. Sabes, podemos tirá-lo disto e depois pô-lo. Provavelmente dentro que eu posso dizer h um. Bem-vinda à passadeira, Andi. Eu posso adicionar um nome de classe CSS aqui dizendo algo como Alert Honor, Dash em quatro Onda separados. Devemos ver um belo cabeçalho fora do curso nas obras de rodapé. Vamos ter um tipo básico de informação de direitos autorais. Então vamos com um rodapé para o HTML. Vou tirá-lo deste aplicativo para os trabalhos deles. Claro, podemos dizer ser um centro extra. É como a linha central extra. E então, é claro que eu posso ver aqui que todos os direitos por quê, isso é um https. Nós sabemos que neste final que vai ser a comida é suposto ser um remetente forrado. Andi começa sentado lá agora, é claro, o balcão no balcão funciona. E isso é o que eu acredito que você quer criar 10. Demonstração - Clique em counter: neste dinheiro. Vamos e criar isso no componente contador. Então, onde queremos toe fornecer um valor inicial número em fornecer um par de botões para implementar como limite elástico a mesma coisa Desta forma, entendemos o conceito off ligação de dados . Então vamos dar uma olhada nisso. Deixe-me fechar todas essas multas na minha perna direita. Temos um colapso em abundância. Isso é realmente necessário agora. Então eu tenho meu código-fonte visível corretamente. Eu vou para o meu AB e então eu posso procurar por componentes no balcão e há um arquivo Ts. Então este é um arquivo T s, que é a espinha dorsal de um componente. Então isso é você pode dizer parte do motor de um componente. E esta é a parte de apresentação da empresa, que simplesmente diz que APP funciona agora, o que eu posso fazer é declarar uma variável dentro desta classe que se torna uma variável membro da classe. Posso comercializar-nos em privado se quiser outras formas. Ainda está bem. Por exemplo, eu posso dizer contar no dia porque estamos dentro datilografado. Podemos definir a variável Toby fora de um tipo particular, posso dizer número como este. Agora, isso é muito bom, porque assim o tempo combinado vai dar outra. No caso. Se eu estou tentando ascender algo valor não numérico para a contagem, ele também pode atribuir um valor padrão na obtenção para atribuir um valor. Por aqui, não há necessidade de mencionar que este é um número, mas você sempre pode ir e dizer igual a 20 como o valor inicial se você quiser. Agora o outro lugar para inicializar. Como você pode ver que há um construtor para uma determinada classe, há também uma ONG sobre ela. Agora, Construtor é típico construtor de classe JavaScript. Então, neste ponto no tempo, classes sendo instância criada não é um componente que significa angular não vai estar monitorando isso. Então, se você quer dedo angular inicialmente algo não JavaScript, então ONG nele é a função para o trabalho. Então isso vem por causa de um implemento nele em punhos. A interface de malha ah garante que você tenha essa função. Por exemplo, se eu não o tiver, você pode ver que seu texto datilografado está dando outro dizendo que em nosso componente contador diz incorretamente implementa essa interface nele em. Você deve providenciar isso. Então, se você ver que há uma lâmpada aqui, escolta me dá uma opção novamente. Comandante básico não são controlados para fora nas janelas e isso vai mostrar que você implementar interface nele. Claro que posso selecionar isso na quadra vem aqui. Claro, você precisa provavelmente puxar isso para baixo porque nós queremos que ele esteja naquele lugar. Ele lançou novo editor. Não queremos jogar outro. Em vez disso, podemos dizer que eles começam a contar igual a 20 Agora, muito importante que você tenha que dizer isso. Comece aqui porque se você está vindo de outras linguagens como Java WASI Shop R C plus , você pode apenas fazer isso onde ele procurou por uma variável local. Não é divertido. Vai precisar de um membro. Realmente. Mas, ao contrário disso, JavaScript em typescript dizer que não, se você especificou sem o disco um trabalho, ele estará procurando uma variável local entre própria casa. A Andi. Ele diz que temos que usar obrigatoriamente a palavra-chave this novamente. Você pode ver que não é delicioso. Eu posso pressionar o controle escuro e, em seguida, entrar na nossa lata Você lá segunda opção aqui. Portanto, tenha cuidado ao selecionar opções. Essa conta é igual a 20 e agora eu tenho um valor aqui. Zero. Eu posso apresentar isso no HTML da maneira que eu quiser. Então vamos para o HTML em. Provavelmente tirá-lo de que em qualquer tipo da sua idade, três em e dizer a contagem Atualmente ele está em. Então eu posso usar um suporte encaracolado e então eu posso, tipo, tossir assim. Esta é uma interpolação fora dos valores, basicamente que qualquer que seja o valor em suas plantas modelo está lá que realmente será impresso aqui. Então, se eu voltar para o navegador, é contagem atualmente zero. Mas gostaríamos de fornecer um par de botões s para que possamos implementar nosso equipamento. Então, para fornecer os botões, eu vou fornecer um Parton, Bt e Bt e primário. São os nomes das turmas que vamos usar. Dick Clement e eu vamos copiar colar a mesma coisa e mudar este dedo implementar Salve it perdons para colonizar o incremento do ano e Dick Clement o que eu quiser fornecer um funcionalmente. Então, quando eu clicar neste incremento cada vez, eu deveria ver esse valor em particular ser incremental. Então, o que significa que precisamos acionar uma função chamada a partir desses botões sobre as funções deve levar isso para trabalhar aqui. Então, o que fazemos, forneceremos duas funções. Posso dizer que você é insignificante, Andi. Uma função regular listada no trabalho. Considero isso um telefone perturbado mais e depois, claro, desacordo. O que é suposto dizer isto? Comece a contagem menos. Estou vermelho usando o valor de que Now Harder Chame isso direito. Então é muito, muito simples em angular, porque agora eles forneceram uma simples sintaxe chamada que função diretamente aqui . O que eu posso fazer que pode simplesmente dizer, usar em torno de suporte em, Em seguida, usar o evento que você quer encontrar e você pode ver que esta traseira marcou está me ajudando com quais são as diferentes opções que temos? Queremos usar a hortelã e o clique quando eu puder dizer Dick Clement. Eu sei que estamos escola me ajudou olhando para a classe e, em seguida, me usar a função que está disponível aqui eu posso dizer mais uma vez, um evento clique é igual a inclemente dedo do pé. Andi, guarde isso. Também colocou tudo em algo chamado Container, então o turno armado F se formará na sua corte selvagem. E se eu voltar para o meu aplicativo nas igrejas do navegador, se às vezes ele não atualizar, basta atualizar em seu quarto. Se eu implementar isso, você vê que ele está implementando automaticamente no Deke, lamentando também direito. Você pode ver que quando eu clico neste botão particular, a função real está sendo no trabalho. Então isso é uma ligação. O que estavam vinculando seu é um botão para ter função em. A função altera o valor dos dados do modelo. E toda vez que o modelo que mudou esse valor específico é refletido automaticamente , e isso é chamado de mineração de dados. Então, temos uma ligação de método, e temos uma ligação de dados. Enquanto essa data de término do que você está vendo é um reddit sobre isso, que significa que se eu tiver uma caixa de texto aqui, eu quero que o valor seja alterado quando o usuário alterar o valor. Se eu quiser que o dedo do pé, afecte esta variável em particular que é suposto ser uma ligação de dois sentidos, então neste momento o que estamos a fazer é uma ligação eram do modelo. Mais tarde estamos atualizando a exibição. A salsa branca ainda não está pronta, então vamos ver isso em rádios futuros. De qualquer forma, no entanto, estamos fazendo um método vinculativo na ligação de dados unidirecional aqui para que eu possa implementar, bem como acordo. 11. Visão geral das directivas: diretores são talvez o bit mais importante de uma aplicação angular em, Se você pensar sobre isso, a unidade angular mais usada, o componente é realmente uma diretiva, e componente angular não é nada mais do que um diretor com o modelo. Quando dizemos que os componentes do sangue do edifício sete aplicações angulares, estamos realmente dizendo que os diretores são os blocos de construção de uma aplicação angular. Na diretiva principal é uma função que executa sempre que compilador angular encontrá-lo no escuro, diretores angulares são usados para estender o poder fora de seu TML, dando notícias em impostos. Os diretores angulares podem ser divididos em componentes de três tipos em diretivas de tributo e diretores estruturais. Como vimos componentes anteriores são apenas diretores com modelos sob o capô. Eles usam a vítima AP e nos dão uma maneira mais limpa de defini-las. Os outros dois tipos de diretores não têm modelos. Em vez disso, eles são especificamente adaptados para manipulações para baixo. Diretivas de atributo manipulam o para baixo, alterando seu comportamento e aparência. Usamos diretivas de atributo toe aplicar elementos de estado condicional mostrar todos os elementos ocultar são dinamicamente alterar o comportamento de um componente de acordo com uma propriedade de alteração. Alguns dos diretores de atributos de construção estão no estilo. Classe NJ desativada, escondida em apenas mudar e assim por diante. Vamos dar uma olhada em alguns exemplos de uso fora da construção. Diretores de atributo aqui desabilitados em Oculto Tendo atribuído uma expressão booleana bem, faughnder, inválido e formado são válidos. Representa o estado do formulário. Assim, com base na validade dos formulários, o botão é desativado ou ativado, e a outra mensagem é mostrada nossas Crianças. Neste exemplo, estamos atribuindo uma propriedade de estilo toe fazer com base em um objeto ser propriedade de cor uma vez falhou. Aqui está um exemplo fora N G Class Act. Um bom diretor. A expressão é um objeto que representa algumas das classes CSS, mas se a classe deve ser usada ou não é decidida com base no valor do que é um barras. Por exemplo, se a idade for menor que 18 anos, uma classe CSS de perigo extra é aplicada. Se o medidor é maior ou igual a 80 extradites sucesso será aplicado. As diretivas estruturais são especificamente adaptadas para criar e destruir elementos Tom. Alguns dos diretores de estrutura de construção são NGF Engy, longe da Índia que caso neste que diferentes diretores estruturais são usados no modelo html com um truque burro em vez de fora de um colchete em torno deles. Por exemplo, a ONG. Se for direto, você receberá uma expressão booleana aqui. Então, se os produtos não emprestam é igual a zero, então Engy. Se real garantiu que bater três é adicionado ao longo. Mas se os produtos condição Shortland é igual a 20 é desbotar, então Engy se irá remover o extra do topo. 12. Demonstração ngForOf, ngIf, ngStyle e ngClass.: para entender os diretores. Vamos tomar um novo projeto para que você saiba, abrir um novo terminal, começar a fazer desktop e assumir o comando N g nu para recusar templo e dizer não para a votação. CSS é bom. Então, uma vez que isso é feito, eu gostaria de instalar Boots estrela como um sírio através das directivas. Pasta Timo 10 p.m. Eu coloquei Strapped e também abriu a mesma pasta no Visual Studio Court digitando arte tossida. Queremos adicionar ceviches chaisson bootstrapped ou angular. Aqui eu tenho que ir para a seção de manchas em uma entrada aqui para coisas de bordo que é o norte. Sublinhado margens barra Seria material cortar isso para splash bootstrap CS é não. Nós também executaremos nosso projeto digitando energia. Esperança auto crash Vamos abrir o aplicativo em um novo navegador também. Então o outro é porque eu dei uma parte errada para a distância barra CSS barra bootstrapped Nossa janela C s é voltar controle. Veja Onda executar o mesmo comando mais uma vez. Então agora nossa obrigação está pronta e vamos adicionar um novo componente para testar o uso direto . Então eu abri uma nova morte, em seguida, eles em g g c para gerar, competente antes dos quatro componentes barra e componente de nós queremos criar aqui para testar Engy para fora Será que ele fez? Isso é um n g para fora do Devil. Vamos para o componente do aplicativo html. Onde este país está sendo apresentado e editar que é que vemos o novo componente ir para o componente AB html Aqui, sair de tudo. Fiz o jantar como uma aula de CSS na Judy e depois levo o teu anúncio de Engy para ele como um saco. Andi Now, se eu voltar para o congelado, eu deveria ver que nosso novo componente é colocado. Agora, vamos entender o N g quatro fora de direção usando uma amostra de núcleo. Então vamos para o D. Primeiro o Talibã até chamou as pessoas, que é um dia de folga qualquer tipo de objeto. E no n g nele, isso é inicializar isso com alguns valores fictícios. Então eu gostaria de acrescentar aqui, pessoas, que é este começo pessoas iguais inclinar-se em mim dentro do AM vai criar alguns valores como , por exemplo, licença é revelado H C 45 cidade, e também adicionar uma imagem que vai estar na pasta Ativos. Isso provavelmente é o garoto sob pasta chamada Imagens on. Eu vou copiar algumas imagens aqui na parte que seria cortado A senta imagens de barra em Vamos supor que não é nosso chippy na mesma coisa. Vou copiar colar algumas vezes, fazer algumas mudanças. Então nós temos quatro objetos no Ari, e agora nós queremos olhar através disso e, em seguida, apresentar os mesmos detalhes no HTML. Então a maneira que podemos fazer é ir para o HTML correspondente a esta Onda. Vamos sair dessa. Vamos colocar um H três. Nós diremos que você está sem o salto dele. Agora suponha que queremos exibir a lista de todas as pessoas em uma combinação Uriel . Então, geralmente é assim que vai ser. E isto é um dado. Se você voltar para o mais perto, você vê que eu tenho uma bala que diz que este é um dado de pessoa, mas eu quero que este bom repita para cada pessoa aqui. Então, para fazer isso, usamos a sintaxe especial aqui n g quatro fora do diretor estrutural e os diretores estruturais têm um fino, escuro começando seu truque bunda em evidência. Um gástrico. Você pode ver que você começa a lista de todos os detalhes estruturais aqui N g Para mesmo que nós dizemos Aqui é Engy para fora da sintaxe para usar o mesmo é N G quatro Onda. Atribuímos uma expressão a ele. Agora esta expressão consiste em uma declaração de disponível, como deixar comer de uma maneira que temos que descartar as pessoas. Então é preciso uma pessoa das pessoas concordam em, em seguida, ascendeu a uma variável local Korpi em. Então podemos acessar o estar dentro deste particular e deixar o Alexei primeiro, salvar isso agora e voltar. Devemos ver que os mesmos dados são repetidos quatro vezes porque temos 4% de dados lá. Então, em vez de ter esses dados fictícios, podemos realmente puxar os dados da pessoa objeto p em, em seguida, imprimir seus detalhes, por exemplo, eu posso dizer aqui em colchetes universitários p ponto nome é da cidade porta. Salve isso. E se eu voltar, eu deveria ver agora que diz que sabemos isso de Bangla e assim por diante. Agora, se você quiser? Oh, a imagem da pessoa. Então você também pode colocar “Eu sou Jean”. A fonte vai ser o Peter. Imagine o quê? Peter Picture não é uma imagem real. Então nós queremos o valor fora Peter imagem Toby, associá-lo com este SSC que pode ser feito colocando isso ou em um calibrado como este são nós podemos usar o registro quadrado para o SRC dizendo que esta é uma expressão e a expressão precisa ser avaliado. Eso, vou guardar isto. E então quando eu abri isso, eu não tinha nenhuma foto. Então, se eu atualizar aqui, você vê que porque nós não temos nenhuma foto, não é mostrar o mundo com nesta cópia e colar algumas das imagens aqui. Então eu copiei as imagens para você dizer esta pasta. E como você pode ver agora, se eu voltar para a atualização Onda mais próxima, você deve ver que as imagens aparecem. As imagens são muito grandes em tamanho. Queremos ter um tamanho comum para a mesma coisa. Então isso pode ser facilmente atitude adicionando um estilo aqui. Mas também podemos fazer isso com a ajuda de outra diretiva chamada estilo Engy. Assim, o estilo indie pode ser atribuído a uma arma objetos para que eu possa definir aqui estilo Engy é igual um dedo de uma expressão de estilo ou que aqui novamente, estamos usando um colchetes para indicar que esta é uma expressão e a expressão aqui como um objeto. E esta é a propriedade sty que queremos dar, que poderia ser, por exemplo, bastante. Então eu posso dizer aqui 100 como o cofre, mas podemos ter que dar 100 PX para pixel, então, nesse caso, isso vai ser uma string, algo assim são, em última análise, também podemos atribuir algo como esconder. Dr. P X é 100. Assim, as unidades podem ser especificadas aqui desta forma porque o início não pode ser usado como parte da chave. Tem que ser dado em cordas como esta e salvá-lo. E se eu voltar para o mais perto, você pode ver que todas as imagens estão fora de 100 pixels. Neste momento, também podemos controlar isso de dentro do nosso componente para o PS. Por exemplo, imagine que estou aqui uma variável chamada I n g. Save it de Stine. Volto aqui, declaro uma variável. Claro, eu sou j Stiles é igual a um objeto consistindo em altura. Dark PX é 100. Claro, isso tem que ser na forma de uma string. Eu também posso especificar o raio da borda. Oh, cinco pixels. Novamente. Barda Radius Ou tem que estar com um hífen. R Oregon. Use esse capital em hífen. R significa que você pode ter que dar no tribunal novamente. E cinco p sair da corda. Então eu tenho que dar assim tudo o que eu posso dizer aqui, fronteira raio nosso P X, que representa a unidade. E então eu posso dizer que você tem cinco anos, guarde e você deve saber, ver se o raio é aplicado. Talvez eu queira dar um pouco de margem. Eu posso contra especificar aqui, margem escura PX também está bem. Então, haverá uma lacuna entre cada um deles fazê-lo. Estes estilos podem agora ser aplicados em vários elementos, se você sentir como, mas nós só temos usado para don Eu sou os estilos. Claro, isso é porque ainda não foi atualizado e nunca ver que o árabe se foi. Já que estamos usando bootstrap. Nós também pode fazer uso fora das classes CSS que estão disponíveis. Por exemplo, para o l. A. Eu posso adicionar uma classe CSS de Bootstrap usando n classe g na temporada classe Engy novamente Um atributo contra o que temos que fornecer aqui um objeto onde a chave é o nome do classe que você quer dar. Esta é uma expressão booleana que determina se a classe tem que ser aplicada não são, por exemplo, eu posso ver aqui Text traço sucesso é verdadeiro desde que a paz não pode conter menos, temos que colocar isso em um formato de string e contra você sabe que o sucesso extra classe será aplicado. Se essa expressão valer para desenhar, o que é verdadeiro, sempre eu salvá-lo. E se eu voltar para o navegador, você deve vê-los em cor verde. Certo? Mas eu posso ter sua expressão aérea que tornou isso falso às vezes e que Merican cair outra hora. Então, por exemplo, eu posso dizer três pontos idade que é a idade da pessoa aqui em. Agora posso verificar que a sua idade de Peter é maior que ou igual a 2 18 Então você é um texto para o sucesso. Então, se eu salvar isso e voltar, você deve ver que John Doe não é da cor verde aqui. Podemos sempre ter outro, e posso dizer perigo fixo no caso de Peter HD ter menos de 18 anos. Então guarde isso. Agora tenho que separar as aulas, uma para adultos e outra para menores. Claro, isso também pode ser uma função, por exemplo, com base na idade da pessoa. Eu quero obter uma classe CSS aqui para que eu possa dizer obter classe CSS em Peter, recurso Vida perímetro para isso. Claro, eu não tenho uma função chamada get classe CSS. Então eu tenho que ir aqui, limpar uma função chamada obter a classe da CIA, o que leva a idade de uma pessoa que eu posso verificar se o medidor é menor que 18, então retornar perigo extra gritos que eu posso dizer retorno. Graças serviços Dash Salve. Volte para o navegador e você pode ver que obtemos exatamente o mesmo resultado também. Agora vamos para o nosso html no nosso cabeçalho aqui para mostrar que você tem quatro contatos, então eu vou adicionar que você é um sucesso, pois há pessoas que não emprestam o índice de milho salvo este começou um título que diz que há quatro contatos. Vamos encaminhar um acordo. Adoção aqui de tal forma que quando eu clicar no botão excluir cada off, este por 1 pode ser excluído. Então vamos fornecer um botão VT final ou começar a água. Então colocamos uma marca X para que ele represente algum tipo de ação habilidade. Quando o usuário clica sobre isso, Eu quero que isso seja excluído assim em Clique fora do botão. Queremos que Deus exclua a pessoa. Não fornecerei o índice desta pessoa em particular. Agora que temos uma expressão que diz, “ Dê-me um objeto de pessoa, eu posso fornecer a pessoa objeto em si aqui. Mas e se eu quiser fornecer o índice fora do elemento, estar no ar um povo e daí? Nós podemos fazer isso. Podemos colocar um cínico aqui e dizer índice como eu Então a variável loop agora será dada a mim como eu e eu posso fornecer que valioso eu ouço o outro aqui é porque nós não temos uma função chamada pessoa completa localizado um no meu t s. Então eu vou para baixo, em seguida, dizer aqui, excluir pessoa, que recebe um índice e, em seguida, eu posso remover o elemento atual. Então, por exemplo, se índices um, então eu gostaria de excluir este carro particular. Então a maneira que você pode fazer é dizer que este começo as pessoas não fornecem suprimentos, que leva o índice e o número de elementos para acreditar nesse índice. Então eu quero excluir um elemento do índice. Então agora temos essa função. Então, se eu voltar para o navegador e clicar em um dos registros, você pode ver que ele se foi e continua. Ele se foi. Toda vez que eu estou me hospedando, você pode ver que ele está realmente voltando com amieiro, o número porque eu estou usando pessoas que emprestam. Então eu clico no último e você pode ver que ele diz que não há nenhum contato agora. Incidente esta mensagem. Eu gostaria de exibir outra mensagem dizendo que não há contatos para que eu possa voltar aqui e eu posso dizer hedge porque não há contatos em seu eu acabei de cagar. Eu vejo isso, mas queremos exibir qualquer um fora deles em um determinado ponto no tempo, dependendo do comprimento para que eu possa usar outra diretiva estrutural ou n G. É que acrescenta isso para baixo tudo que ele remove do topo, dependendo da condição que temos dado aqui. Então eu quero verificar. Se as pessoas são terra é maior que zero. Então temos que especificar isso. Se as pessoas não emprestarem é igual a zero, então queremos mostrar que não há contatos em seu catálogo de endereços para que eu possa salvar isso . Volte para trás. Aqui diz que há quatro contatos agora é 3 para 1 em detalhes aqui que não há contatos em seu catálogo de endereços. Nós também podemos fornecer um real ou botão aqui que realmente pode acionar a chamada off N g sobre ele , que está inicializando este aviso de que esta é apenas outra função. Angular por acaso chama isto. O componente é inicializado no início. Mas se você quiser o re inicializar isso, você pode sempre chamar isso você mesmo. Por exemplo. Eu posso ir aqui e adicionar outro botão para um link aqui, ou transformar o seu 50 e ou três t e traço link. E então eu digo seu Senhor sobre e sobre Clique fora isso. Posso ligar para o N G assim. Portanto, não há problema em ligar assim. Mas lembre-se, NJ sobre ele é destinado para o dedo angular inicializar no início, quando o componente é criado. Então eu salvei isso. Volto aqui, tenho quatro contatos atrasados um por um cada um deles são excluídos. E então diz, Senhor, Senhor, data de conduta improvável. Aprendi todos os dados mais uma vez. E depois há quatro contatos mais uma vez. 13. Demonstração ngSwitch: Vamos trabalhar em outro exemplo para entender Engy, Switch e Ng qual caso. Então primeiro eu vou para o gênero frente linha, um novo componente chamado N g Storage. E desde que queremos ver isso na tela ou citação, vai ir SRC-se no componente HTML e queremos incluir o recém-gerado comutá-los também, eu vou cometer isso no comportamento após sh n g trocou-o como um tintor. Salve isso. Vamos voltar aos problemas no DSI que diz que a demonstração do interruptor Engy funciona. Então, o que significa que nosso novo componente vermelho está disponível aqui. Vamos para o HTML fora do novo componente. Tire isso disso. Isso é em uma história vai dizer que Engy switch. Não são quatro botões, pés Porton Dot, Ian Thorpe et e Primária. Queremos quatro deles e, em seguida, queremos ter um botão de legenda dólar que você colocou em um botão dedo do pé. É um rascunho, então temos quatro botões. Nós também somos quatro ofertas correspondentes a cada um deles. Então eu vou ter aqui. É isso. Este é o Dave numero dólar, e eu vou ter quatro dias assim. Vamos supor que cada uma dessas ofertas correspondem a cada um dos botões. Quando eu clicar no botão um eu quero que este seja com visível em quando eu chute no botão para apenas vocês dois devem aparecer em quando eu clicar na árvore. Só três deveriam aparecer e assim por diante. Agora, para que isso funcione, vamos para os anos correspondentes. Hoje declarar uma variável chamada escolha em Vamos dar um valor padrão off 12 o mesmo. Lemos uma função chamada SEC Choice, que recebe uma escolha e, em seguida, atribui a carga de distorção do dedo do pé. Salve isso. Vamos voltar aqui, Andi, vamos chamar essa função através desta. Alguns dirão aqui no filme que quer escolher o dedo do pé fora um na mesma coisa. Vou copiar e colar para os outros alterando o valor disto. Então, clicando em qualquer off, esses botões estavam realmente chamando disfunção, que muda o valor dessa escolha. Na Mikel controlar a aparência de cada um dos negócios porque os chineses está mudando com base no clique que você fez. Então a primeira coisa que vamos fazer é rebocar o tipo de acordo nesse dia vai convencer nesses quatro dias. Eu gostaria que sua mudança de ONG equivale a duas escolhas em Não faça isso. Isto é uma expressão. Vamos adicionar um colchete. Então o NG, que agora verifica o valor de Childs com uma expressão que eu vou estar aqui em cada um dos negócios. Agora, esta é a directiva estrutural que controla a aparência de cada um fora deste negócio. Então que estrutural fazer aqui seria estrela NJ mudar crianças igual a dedo. Eu posso ver que se for um, então este é o único a ser exibido. Se isso é também, então este é o único. Então eu vou copiar isso sendo estúpido e fazer as mudanças necessárias. Salve o arquivo. Se eu voltar para o Rosell, vejo quatro botões. Mas diz que este é o devido número um. Eu mudei 04 E este é o número quatro, mas eu faço. Eu cliquei. Diz que este é o número dois e o número trata que cada um deles funciona assim. Agora, só para ter certeza de que isso parece melhor. Então o que podemos fazer é adicionar algum conteúdo. Digamos que eu quero o nosso aqui. Tive uma briga com duas ligações. Andi em cada um deles à nossa imagem. Que o primeiro fardo corresponda ao Tigre. Andi, quero obter informações sobre o Tiger da chave. Pentoso. Vou ao Wiki. Muito bom. Em abriu a primeira ling, Esta é esta imagem que eu vou copiar a planta em e baseado aqui. E então eu copiei o primeiro parágrafo em, em seguida, colar aqui também. Então nós temos o 1º 1 E da mesma forma, eu vou fazer a mesma coisa para os outros pontos de vista também. Então copie para quatro deles, quatro tipos diferentes de imagens e conteúdo. Então o 2º 1 é um leão. 3ª 1 é chita. E para esta águia, guarde-a. Volte para o navegador e verifique sem Tiger Lion, Cheetah Eagle Clicando em que eu recebo os respectivos detalhes Agora. Às vezes isso pode parecer um táxi, então é isso que queremos alcançar. Então, em vez de mas na primária eu posso mudar é muito importante Link agora. Claro, ficará mais agradável. Então pegue um leão, chita e águia. Também podemos ter uma opção padrão no caso de eu ter mais um agora. Digamos que copie esta coisa toda e depois cola-a. Vamos isso. Esta é a madeira da criança. - Tudo bem. E escrevo a tua coisa chamada cinco, que não tenho. Então, quando eu clico em mordida, nada aparece aqui. Então também podemos adicionar outro negócio e dizer que este negócio em particular é um padrão. Então, o padrão do switch da ONG. Andi, você não tem que dar nada por isso. E então você pode digitar seu não conteúdo nosso nível para esta eleição. Desculpe, seguro. Salve isso. Volte para trás. Então agora eu tomo em águia, eu pego a saída e eu clico sobre isso. Não há conteúdo disponível para seleção. Desculpe pelo inconveniente. Então, é claro que posso voltar agora. Um problema é que se eu selecionar chita aqui e, em seguida, se eu atualizar a página, você verá que ele redefine o primeiro 1 Porque no componente você pode ver a escolha é igual a um É o chá para o valor. Portanto, toda vez que você atualiza, o componente é recarregado e as opções são redefinidas para um. O que gostaríamos de fazer aqui é que queremos um sinal que anteriormente fez escolha para esta variável. Mas temos que armazená-lo em outro lugar porque quando o navegador é atualizado, perdemos esses dados, então temos que armazená-los em outro lugar. E onde podemos histórias é algo chamado armazenamento de sessão. Posso adicionar uma chave aqui chamada como, por exemplo, eles usam iguais de uma criança. Dois. Eu posso dizer escolha, Andi, Quando você diz ONG em, ele verificaria se o valor está presente. Se seus valores apresentarem Ussing, toquem esta escolha para que eu possa ver aqui. Dê este valor está disponível. Então você pode dizer que está destruindo. Escolha é igual ao dedo do pé. Obtenha o valor das histórias de sessão para salvar isso. Volte para o navegador. Agora vou para chita e atualizo o navegador. Você pode ver que ele ainda deve voltar para Cheetah Goto Eagle. E então eu refleti esta página. Ainda deve voltar do pé da águia. Se um bom desenvolvedor ferramentas olhar para o aplicativo, há um armazenamento local e armazenamento de estação e no armazenamento de estação para este domínio específico . Temos um valor chamado escolha do usuário para que cada vez que eu clicar em uma opção, você pode ver que o valor está mudando e isso será mantido no armazenamento de decisão, enquanto o irmão está aberto. Por exemplo, agora eu cliquei no Cheetah, então o valor é três. Eu saio do mano junto, e depois volto novamente. Você pode ver que quando eu voltar, se trata de Tiger, principalmente porque os dados estavam mortos no armazenamento da sessão. Não há mais dados porque foram perdidos quando o irmão foi fechado. Então, em última análise, também podemos mantê-lo no armazenamento local. Agora não temos, mas podemos mantê-lo no armazenamento local para que ele seja persistente se eu voltar para isso e mudar de armazenamento de seção, o armazenamento local e, em seguida, atualizar o navegador uma vez que ele está perto. Desta vez eu selecionar leão e, em seguida, fechar o navegador, sair o mais perto, e então eu verificar mais uma vez host local para dois duplo zero. Você pode ver que ele mostra o leão por selecionar águia. Saio do mais perto e depois abro cromado mais uma vez e depois vou para os locais para dois duplo zero. Você pode ver que ele se lembra do filho anterior, mesmo que o navegador tenha estado perto de 14. Demonstração - diretiva personalizada: Nós também podemos criar nossos próprios diretores personalizados para entender o mesmo Isso é criar um componente em um direto você. Então vamos voltar para o bêbado cego vai levar aqui n g componente genético. Mas desta vez vai ser uma demonstração personalizada, e nós também vamos criar uma nova diretiva. N g g d. Para a directiva. Oregon ativado Diretiva Gerada e eu posso dizer neste momento uma nova pasta chamada If Pills Slash Vamos chamá-lo de caixa EUA quando eu pressionei Enter vai gênero ele apenas um arquivo es porque isso não vai conter qualquer HTML ou CSS, e tem atualizado. A maioria está na seção de declaração sobre. Então vamos voltar para o nosso componente APP h Demon and Change. Este Engy trocou a alfândega Moto Será que ele fazer Devil cortar a demonstração directiva personalizada e ele abriu o navegador e eu digo local foi para Córdoba zero. Você deve ver que é directiva personalizada Demo funciona em. O que vamos fazer é ir para o novo componente e eles são um monte de dívidas que está na sua conta? E eu disse, este é um fazer um monte de parágrafo sobre, digamos, Este é um parágrafo e lotes de nossa imagem final. SRC é igual a dedo avaliar imagens de barra barra Goldberg jpg Nós também tomaremos seu estilo Engy é igual a altura do dedo 30 p x 150 Agora temos esses três elementos Voltamos, vemos este conteúdo. Vamos para a nossa directiva Plus que é encaixotado são dirigidos RTs em que eu chamo isso como um diretor de caixa porque quando ele é usado eu quero este dedo cercar os elementos como uma caixa? Não, não o seletor aqui tem um Brakhage quadrado na caixa Você pode dar qualquer nome que quiser aqui como caixa em si. Mas Angular sugeriu que você deve usar algum tipo de um perfeito aqui para que ele não entre em conflito com nenhuma das diretivas de construção nossos atributos HTML Então o colchete aqui indica que revisado Então eu não saí. Foi-nos dado um escuro em barcos, caso em que eu poderia tê-lo usado como uma classe CSS. Vamos deixar isso como um atributo para que eu possa ir para o HTML aqui no que eu quero é ver aqui que esta é uma caixa como esta. A idéia de dar-lhe diretor era um ativo que você ouviria é toe ter um acesso ao elemento real onde ele está sendo usado em de controle a aparência do mesmo. Então, para fazer isso. A primeira coisa é que você tem reboque pedir uma dependência chamada como um elemento à esquerda. Então nós mergulhamos seu fogo, ele elemento fora do tipo chamado elemento respiração, que é um membro fora do curso angular. Então, temos isso. Tudo o que eu tenho que fazer é rebocar obter o elemento necessário, que significa que o elemento em que este diretor em particular foi aplicado em um lugar e estilos para isso para fazer, usamos uma interface após vista nele. E nós somos esta função ausente que é chamado GI depois de vê-lo. Agora, aqui podemos acessar o elemento dentro disso em. Então adicione uma irmã da CIA para que eu faça isso. Eu posso dizer isso. Inicie um ponto limite nativo elemento ponto estilo ponto e qual estilo queremos realmente acessar. Por exemplo, se eu quiser fornecer de borda igual a dois um pixel sólido, vamos sentar salvar isso. E se você voltar para o navegador, você pode ver que o negócio é agora ter uma caixa. Posso aplicá-lo a qualquer um destes outros elementos. Por exemplo, posso ter seu B na Fox agora. Eu deveria ser capaz de ver que o parágrafo também tem a caixa. Andi, posso continuar adicionando mais e mais coisas. Por exemplo, como uma ideia. A mesma coisa. Algumas vezes posso dizer “bar o raio da morte”. Eu posso apenas uma luta pura. Exceto que eu posso dizer aqui Patties off, talvez cinco capturas e talvez uma margem também cinco exceto salvar isso e voltar e nós devemos ver que as caixas são diferentes agora. Eu também posso adicioná-lo ao AMG para querer eu posso dizer aqui tem parques nele apenas faz a mesma coisa para a imagem Também. Agora também posso controlar certas outras coisas. Por exemplo, se eu quiser fornecer a cor para esta caixa diferente desta. Então isso pode ser feito indo para a nossa classe Prickly uma variável chamada tamanho que é igual dedo um pixel por padrão. Então eu quero substituir este e eu tenho um estilo aqui, que é um tipo sólido de alguém tipo ano igual a dois sólidos em. Mas então eu posso dizer que sua cor é igual a preto, que é os valores padrão em. Agora eu posso mudar isso para uma expressão removendo isso usando um backcourt, eu posso usar dólares deste tamanho de ponto, dólar espacial este tipo de estoque dólares espaço este início cor fora do curso, você sabe, mudanças. Se eu voltar para o navegador, eu ainda vejo a mesma coisa. Mas se uma mudança política aqui, eu vou conseguir uma fronteira vermelha. O que queremos fazer é fornecer esses valores a partir dos elementos aqui presentes. E a maneira que eu posso fazer é comprar decorador de idéias para a entrada ativada sobre o que isso faz é agora. Eu posso fornecer uma propriedade chamada tamanho a partir do atributo aqui para que eu possa adicionar sua uma expressão . Tamanho é igual ao que é a expressão? Então talvez eu possa ver aqui três porcos auto você pode ver para o 1º 1 É uma peça que Streep destaca. Mas para o 2º 1 não é. Eu também posso adicionar adicionar grande entrada para o tipo em depois de entrada para cor. Agora eu posso usar qualquer fora disso no elemento. Por exemplo, posso ver que sua empresa é igual a duas. Posso dizer que seu tamanho é igual a cinco fixem. Também posso dizer que a cor é igual ao dedo do pé. Veja bem, Salve, volte e você pode ver que é uma cor vermelha. É uma fronteira dupla também. É uma luta, grande eu. Posso levar isto a qualquer um disto. Você pode ver aqui. A cor inclui dois suspiros. As pessoas são muito três captam a morte de fezes iguais. Então, desta forma diretor pode ser usado para modificar a aparência off elemento, que é totalmente personalizável. 15. Como criar a estrutura básica do nosso aplicativo de agenda celular: sabemos que temos entendido os conceitos básicos de componentes. Andi até mesmo vinculação em um pouco fora de ligação de dados. Vamos construir um aplicativo sobre entender mais sobre o mesmo. Então o aplicativo vai ser um aplicativo de lista telefônica, que vai ter o componente absoluto compreendendo fora outros componentes para que você possa considerar um provado ser um componente pai. Barra lateral do cabeçalho em casa para ser componentes filho fora aboot. Nós também vamos ter ah, roteamento habilitado depois de um tempo onde o cyber irá exibir algumas muitas opções e assumindo que você deve ser capaz de ver um componente diferente no lugar do componente home, por exemplo, para exibir os detalhes do contato para que eu possa ter incompetentes são provavelmente toe editar ou adicionar um novo componente. Talvez eu tenha um formulário de contato. Se você quiser ter uma lista de todos os contatos que você tem, você pode ter mais uma empresa. São se o usuário está digitando algo na barra de endereço e as páginas não telefone. Podemos até querer exibir uma outra cadela, que geralmente é chamada de quinzena de quatro páginas. Agora, a fim de economizar algum tempo, Eu já criei um projeto angular básico em e eu já comecei a servir no host local para dois duplo zero. Eu já adicionei bootstrap Ford, Artur em um. A Andi. Eu também acrescentei que em nosso Chaisson angular para começar com isso, criar os componentes que é necessário para a nossa aplicação. Então eu vou entrar em uma frente mental e ter certeza de que eu estou lá trabalhando diretamente. Esse é o meu telefone, mas diretório APP e eu vou tomar este comando motor NGC gerar componente e eu quero que o componente seja em componentes de placa de borda sub. Isso é para organizar nossos arquivos em estilo adequado. Então eu quero criar algo chamado Cabeçalho que vai ser o chefe do componente. Andi, posso dizer que não quero esses casos de teste. Posso dizer que o respeito é igual a duas fazendas, bem como eu posso ouvi-lo costume para consertar algo como BB para a lista telefônica. Então, caso contrário , por padrão, ele vai levar em. Então isso vai criar três lutas um arquivo CSS. Um arquivo de aparador de cobertura em um arquivo de texto também atualizou o modelo do aplicativo. Sujo está bem. Então, vamos tomar mais um. Então, desta vez eu quero dizer, foi um dedo do pé de seta para cima. Volte para o comando anterior e eu vou chamar isso de barra lateral um mais competente neste momento para casa e ele vai dar uma olhada no que está sendo gerado. Notas que podem levantá-lo. Todas essas lutas. Então, sob SRC, temos AB. Agora você verá que há uma borda de componentes com cabeçalho home e pastas cibernéticas. Cada um deles vem com as três lutas. Como vimos eso há um CSS html DS. Se você olhar para o HTML, ele diz que seu cabeçalho funciona. Da mesma forma, é o dever de casa dele, depois o Sidebar funciona, certo? Então essa é uma saída muito básica que vai produzir. Então nós vamos para o componente APP afiado Iêmen, tirá-lo de todas essas coisas e, em seguida, eu vou para fora do nascimento, bem como para a empresa de origem. Mas enquanto isso, vamos nos certificar de que vamos estruturar é como os bebês estão nesta luz. Então primeiro eu vou adicionar um acordo com um papel como uma classe que eu em que consiste fora e assim você pode apenas controlar o espaço e então você pode obter que são gerados automaticamente, sua equipe todos pobres. E é aqui que vamos ter algo como PB Dash Header onda Slash Phoebe, não Heather. Nem mesmo que eu não vou ter nenhum componente infantil nosso conteúdo infantil aqui. É importante que demos a tag final especificamente como esta, não terminando com um tempo de imposto vazio. Depois vou pedir a outro para fazer o nosso papel. Então eu vou dizer aqui tipicamente fazer rolar em. Desta vez eu vou ter que ir para colunas para que você possa ficar aqui até a chamada Times 2. E quando você pressiona Enter, você pode ver que nós vamos ter duas colunas. Agora, essas duas colunas estarão fora do mesmo tamanho. E se você não quer que eles tenham o mesmo tamanho, então você tem o dedo do pé para cima com qual é o dispositivo que você vai mirar? Então essa é Emily usou pequenos dispositivos que incluem algo como tablets. Então você tem que especificar qual é o número fora de grupos que você deseja fora de 12. Então, o mundo inteiro é considerado como nós muito bem. Por exemplo, se você ver este lado núcleo estúdio visual, mas é aproximadamente ocupando, você pode dizer três nossos quatro grandes. Então eu posso dar três. Em seguida, o próximo seria sn restantes nove de 12. Então isso seria nove. E é assim que vai parecer. Então, se você der isso como para, então isso excede 12. Então eu acho que não vai vir corretamente, então você tem que dar como oito. Então, isso é bom dentro disso. Nós vamos fornecer uma venda de PB Dash, mas dentro deste esconderijo de BB realmente colorido. Então também é importante que você queira especificar isso dentro de uma coluna, então eu vou dar essa resposta. Diversão sombria sobre isso. Ponha isto depois disto. Você pode descansar não são mudança F dois anos anteriores html legal. Salve isso. E quando você salvá-lo e voltar para o navegador, devemos ver Heather trabalha na CyberWorks em trabalhos de casa. É que os componentes foram definidos dessa forma em particular. Então vamos para alguns CSS dedo do pé, cada um deles o cabeçalho cibernético e casa. E só para mostrar como isso seria assim vai adicionar algum colapso aqui. Então eu não vou proibir em alerta em quatro vai ser um fundo azul claro e vai dizer que você é cada um s o 100 seria como um aplicativo de lista telefônica. Onda. Vamos ter um parágrafo para dizer que é Polar Fine Raiva Lorde Sete. Salve-o e ele não deve estar vendo. Em um minuto você verá que há um cabeçalho e, claro, eu posso fornecer uma barra lateral e casa com cores diferentes. Vai ser um ciber-cibernético. Então nós temos a barra lateral html aqui mesmo. Eu não tenho nenhuma opção agora. Estamos para que eu possa ficar alerta. Outros Onda Vamos apenas dar um aviso e isso vai ser uma cor amarelada Isso está fora. Eu acertei três e o Xavier me fez. E provavelmente isso disse Então isso vai dar uma olhada, como vai parecer. Então é assim que o minuto principal fora, porque você pode ver que há um gato Onda. Uh, isso também não está crescendo porque nós não temos muitas opções de qualquer maneira, nós vamos levantá-lo. Esta cor será alterada a cor, por isso não fará muita diferença. Mas se você realmente quer fornecer isso para ser uma altura total. Em seguida, você pode adicionar seu tempo para isso manualmente em você pode criar, por exemplo, na classe CSS personalizada ou como eles são altura total. Obviamente, isso não existe, certo? Então a altura total não existe. Então eu não posso definir meu próprio carro CSS altura total nos cinemas correspondentes a isso para que eu possa começar com pessoas escuras. Está na classe CSS em. Vou providenciar a sua altura. Ou melhor, eu posso dizer, altura mínima 400 pixels são 600 o que isso faz sentido. Então sabemos como o cardápio deles vai ficar quase cheio de luz. Bem, isso não é muito importante. Então eu só queria mostrar a vocês como usar um CSS em um componente. Então temos isso bem aqui. Claro, nós vamos apenas remover isso e adicionar alguns ou itens lá enquanto avançamos. Uma última coisa que quero mostrar a vocês aqui é o componente de casa. Html. Todo o componente é apenas suposto mencionar que esta é uma aplicação angular desenvolvida pelo seu nome, por exemplo, em alguns detalhes sobre isso. Então, se você tem alguma imagem, por exemplo, você pode copiar alguma imagem e, em seguida, colocar a coisa certa. Mas como fazemos isso? Vamos tentar. Assim, os usuários fazem mais uma vez por dentro. Vamos fazer isso. Vamos fazer uma cobertura. Provavelmente três ou dois lá, não é? Bem, você pode dizer sobre e incrível Angular sete aplicação, Eu digo aqui, parágrafo. Então, que deixou por sua nota B amanhã. E então, é claro que eu queria que ele fosse feito aqui, para que eu pudesse levá-la. Eu sou g SRC igual a quando você diz SRC é igual a dedo. Onde você quer obter as imagens? Telefone? Então eu posso começar dizendo cortar um sexo se você sabe pensou o G Andi, Vamos supor que eu quero fazer alguns nomes de classe CSS. Classe é igual a alta energia. Andi, isto deve dar-me uma imagem. Não, mas eu não tenho essa imagem, então não vai aparecer. Isso só vai me dar uma opção de imagem quebrada aqui. Agora, atue nesta imagem. Então o que eu faço é que eu basicamente tenho que voltar para meus ativos SRC. Provavelmente. Isso é dar uma imagem como uma sub-pasta aqui. Então, queremos criar uma pasta chamada Assets barra Imagens que já temos ativos que você terá em imagens para o on. Vou copiar o Fine do meu sistema de arquivos local para esta pasta. Então eu vou copiar esse arquivo aqui. Corvino Tart, J p. G. Então eu tenho que mudar a extensão de p e G toe jpg e salvar isso. E quando eu voltar, meu pedido é urgente que a imagem é que, claro, é, ah, ah, uma imagem um pouco maior. Então, se você quer fora estilo diretamente, é possível, Por exemplo, Eu posso dizer altura fora. Provavelmente. Posso dizer 100 pixels e não mais do que isso. E você deve ver Não, vai ser uma imagem menor, o que torna melhor. Muito bem, esta é a parte inicial da nossa candidatura. Em seguida, todos forneceram diferentes componentes toe trabalho com o nosso aplicativo de catálogo telefônico. 16. Como criar o ContactDetailsComponent de ContactDetailsComponent: Vamos ter um novo componente para o nosso dedo do pé de aplicação. Exiba os detalhes da pessoa de contato. A Andi. Para fazer isso, vamos voltar para o comando, prompt e limpar um novo componente chamado detalhes de contato que também adicionar uma classe modelo ao nosso aplicativo para que possamos trabalhar com em um dia de folga contatos ou um contato incomum e assim por diante. Para fazer isso. Alguém disse que não iria gerar classe e então eu não teria um modelo de carro mais completo e então dar contato. Esse é o nome que vou dar para limpar uma aula. Não há nenhuma atualização necessária em após modeler ts onda sabemos voltar para o nosso líder e é ir a uma fonte e na pasta verá que há um novo componente Deus, detalhes de contato além dos componentes. Agora, você também tem um modelo que tem um carro de classe tortillas de contato em, que é basicamente um contato de carro de classe simples. Não há nada diário que vamos sair do campo. Então, o que? Você é, por exemplo, se eu quiser um eu d para essa pessoa em particular, então eu posso dizer que eu d e então eu posso dizer que esta vai ser a oferta número cinco e também vamos dizer que me forçou. Uh, você pode dizer corda. Sobrenome. Você também pode dizer corda E então você pode nascer fazendo algumas coisas como, por exemplo, o gênero uma corda. E você também pode atribuir um D para valor desativado. Vamos salvar-me. Então nós vamos adicionar um livro de dados que é um cartão confiável D vai estar ligado. Vamos dar uma corda para você, embora esse tipo de idade faça muito sentido. Mas vamos fazer com que seja. Gostaríamos de usar isto para alguma transformação. Então, convertendo uma porta de dados em idade, então escape string lá, então você pode ter algumas outras coisas. Por exemplo, quero tirar a foto dessa pessoa. Então, o que vai ser um Você está em um link para uma sua resposta. Vamos manter a outra corda ligada. Então você vai ter uma cidade de alface para que possamos servir o contexto por cidade em então provavelmente país estadual. Agora alguns fora. Estes são provavelmente opcionais. Por exemplo, posso não saber a data de adiar uma pessoa ou posso não ter uma foto, então posso deixar isso em branco. Todos estes são provavelmente opcionais eso. Se você quiser que uma propriedade seja opcional, então você tem que colocar apenas um ponto de interrogação Attar, Fim da variável, por exemplo. Posso dizer que ele será ponto de interrogação e, em seguida, dizer que eles serão torna-se opcional. Então, vamos também manter esta imagem opcional. Cidade estado opcional no país opção Agora, já que estamos lidando com os detalhes de contato da pessoa, isso também adicionou mais dois ladrões. Provavelmente depois disso, eu posso dizer e-mail um estritamente em um quatro, que também é uma força. E estes são os alimentos opção. Vamos ficar com isso. Então vamos para o meu isto pressionando a mudança de braço para salvar a luta. Então este vai ser o nosso modelo de dados. Isso significa todos os contactos com os quais vamos trabalhar. Teremos essa informação em particular agora que criamos o moderno. Isso vai criar o componente que pode exibir uma pessoa de contato alunos. Então vamos para os detalhes de contato. Arquivo de lágrimas sobre Dhere. Queremos criar uma variável que diga contato. É um dia muito culpado chamado contato e você pode ver que temos a importação automática. Se você não conseguir, talvez seja necessário importar manualmente a mesma coisa. Então eu seleciono esta importação automática ou ele vai assumir parte absoluta, certo? Então nós também podemos dizer que ele tem que vir de uma parte relacionada, porque já estamos na pasta APP , então podemos dizer aqui, filha barra Então você pode especificar outro médico barra e então você pode dizer moderno sobre. Claro, queria que já o fizesse. Então vamos dar isso como ponto, ponto, barra modelo barra convento. Então este é um arquivo que contém nossa classe de conduta. Nós somos importantes que agora não é que nós temos importante isso para que possamos inicializar isso. Tecnicamente, isso deveria vir de algum ponto de extremidade de serviço Web remoto, o que faremos um pouco mais tarde. Mas agora eu estou no initialize que são valores citados, e a questão é, eu deveria fazer isso aqui? Devem fazê-lo aqui agora, como regra geral do tempo. Então, mantemos este construtor apenas para injeção de dependência, mas como este para toda inicialização. Então, para esse fim, vamos criar um contato de distorção igual ao dedo do pé. Posso dizer novo contrato. Você tem que fornecer alguns valores para isso. Posso dizer aqui que este contato inicial não está ligado. Claro, o mínimo de sentimentos que temos. Então vamos dar ID igual a um neste contato obscuro. Primeiro nome, certo? Então esse é o seu primeiro nome. Vou dar o meu nome. Então eu vou dar não ser este ou contato. Nosso sobrenome é igual aos campos obrigatórios. Eu serei esse contato obscuro, escrevi e-mail. Sabemos que não nascemos em um último contrato. país da arte é igual a engajar, mas eu esqueci. Comece o contato ou você será igual. Então vamos dar em um ano. Então, formatar. Então, isto vai ser assim. Agora que inicializamos esse valor como eu disse, isso virá de um saris, então faremos isso mais tarde. Nós temos esses dados. Agora temos que exibir isso no HTML. Então vamos para a parte HTML, que atualmente simplesmente diz que os detalhes de contato funcionam. O que gostaríamos de exibi-los em um formato agradável. Talvez rótulos seguidos de detalhes disso. Então eu vou usar isso. Não rolar. Consistindo fora negócio ponto Call em dois ou Rho. Precisava de duas colunas, mas isto, claro, será uma. Mas isso é para o primeiro nome, sobrenome, por exemplo. Mas eu não vou gostar de tantos deles. Preciso de cerca de 11 deles. Se eu não quiser mostrar idéias comendo perto de um médico. Vamos mantê-lo em torno das oito para que eu possa voltar e salvar o seu multiplicado por ajuda. Então eu vou dar agora oito desses com duas colunas cada. Então, se eu pressionar o espaço controlado no final e entrou e você pode ver que temos completamente todos os detalhes, então se lembra de seu primeiro nome. Certo? Então esse é o primeiro meio nisso vai ser perdido. - Eu? Vamos dar a sua data dos livros. Não tem que ser qualquer sequência que eu vou pegar seu e-mail. Eu só isso vai ser divertido número em, e nós temos um palco da cidade, então nós também temos um sexo, mas vamos voltar sobre isso em alguns minutos. Então, agora , claro, para preencher os valores, eu posso usar a interpolação, para que eu possa dizer um contato sobre os primeiros nomes. Agora, contato aqui é a variável que criamos aqui. Assim, as variáveis estavam fora do componente são acessíveis para a nossa visão. Então esta é a vista, e podemos acessá-los e trazê-los desta forma particular. Então eu vou copiar isso para colar. Este vai ser o último nome. O sprint. Aqui eles serão um último. Esse é o país aqui. Por isso, salvamos isto. Mas se você voltar para o seu aplicativo, ele não mostra que, porque atualmente este é o componente do telefone. Então precisamos mudar isso. E isso é feito no componente do aplicativo HTML. Atualmente, estamos usando PB home onde, como não tenho TV segura, os dígitos do traço de contato com cinzas. Esse é o novo componente que foi criado. Então, se eu voltar para o seu agora, você pode ver que antes do primeiro nome sobrenome que é atraente de novo. Novamente. Veja que está ocupando os 50% de desconto na regra. E se você não quiser isso, você pode querer dividir isso dando um tamanho apropriado. E como é que fazemos isso? Podemos ir aos detalhes de contato que H. demônio em cada uma dessas colunas que temos aqui . Temos que definir um tamanho. Cabe a você definir qual é o tamanho que você quer. Agora certifique-se de que Studio Court tem um dia de folga selecionando uma patente leva, por exemplo, eu posso selecionar assim. Eu posso melhor comandante B ou controlado estar no Windows. Você pode ver isso elegendo a próxima ocorrência à medida que avançam. E para cada um deles, não posso voltar. Eu posso dizer “Chame STM Dash “, que é um quatro. E então eu posso descer novamente e eles podem optar em cada uma dessas colunas para ser chamado S eles oito e eu salvei isso. Agora, se eu voltar aqui, você pode ver que vai ocupar quatro. E então esta é uma campanha oito. Claro, é uma boa idéia se eu digitar seus dados de contato, então isso está acontecendo em um e não é cabeça. Oh, então eu diria história, eu acho Contacto. Cavar. Provavelmente é um HR horizontal fazer certo? Então é assim que vai parecer agora. Agora, enquanto isso é tudo bom, nós gostaríamos de mostrar isso como o nome da pessoa que sabemos vir também são Sr nossa bagunça dependendo do sexo. Então isso vai tentar fazer isso, combinando essas duas linhas em uma. Então, apenas mantenha o nome puro fora da pessoa ligada. Então isso vai ser contato. Mas primeiro nome. Eu não preciso de nada disso agora em um espaço, outra interpelação. Então isso é o que podemos fazer agora aqui para que você possa ver que vai dizer que o nome é nós sabemos coma . Mas e se eu quiser mostrar o Sr. nossa bagunça? Eu posso fazer isso. Então deixe-me abrir um espaço aqui e então eu vou usar uma interpolação e dizer aqui que o contrato ou pessoas de gênero é igual ao dedo do pé. Vamos ter uma cautela masculina, Maher disse, Sr. é o valor, caso contrário é perdido é o melhor. Então agora adicionamos uma lógica à nossa visão, que é tecnicamente errada. Mas faz o trabalho que você pode ver. Agora temos Mr. Não vamos continuar a ser o nome da pessoa. Então, digamos, por exemplo, que eu volte para o DS correspondente a isso em. Vamos mudar esta ferramenta para exemplos, Jane Doe. Claro, isso deveria ser. Esse é o exemplo? Vamos mudar de mulher para um senador. Salve isso. E se eu voltar aqui, você pode ver a Srta. Gênero e está funcionando. Mas combinar uma lógica de negócios em vista não é uma boa ideia. Então isso é uma lógica. Não importa, mesmo que seja uma lógica muito pequena, ainda é uma lógica sobre o que gostaríamos de fazer é rebocar isso em algo que é reutilizável. Então vamos ver isso em um minuto como o que é isso? Da mesma forma, aqui eu tenho um dia de folga, mas certo, então Mas e se eu quiser mostrar a idade da pessoa onde eu não tenho a idade da pessoa? Mas eu tenho as pessoas ser e eu deveria ser capaz de calcular que cada uma da pessoa todas essas coisas possam ser feitas usando o que uma cicatriz canaliza em. Veremos que no próximo vídeo 17. Introdução a tubos e criar um tubo personalizado: em angular. Então temos algo chamado pipe, que pode transformar um valor em reboque. Outro valor. Por exemplo, Se você quiser converter isso em uma maiúscula, então nós temos um tubo de construção chamado maiúsculas, então eu posso ir para o meu HTML aqui. Onda. Nós temos a cidade para que eu possa usar um símbolo literalmente um cachimbo. E então eu posso dizer o seu caso superior, e você verá que o resultado disso seria cidade em maiúsculas, certo? É tão simples assim. Então você só tem que alimentar este valor Onda. Em seguida, a transformação será feita por este tubo maiúsculo atrás da cena. Este um por caso é um alias para um tipográfico, plantas que tem uma função e essa função chamada transformação. É esta entrada particular como um argumento e, em seguida, retorna como valor de substituição para esta expressão inteira. E é isso que vai acontecer. Então o pescador tem poucos canos de construção. Por exemplo, se eu ir para angular Io e depois ir para cães e você tem este aviador francês em, você pode olhar para digamos, eu estou procurando apenas para tubos, e estes são alguns dos tubos comumente usados, e eu posso ver que há um tubo em maiúsculas. Essa é a verdadeira classe datilografada. Agora vamos dizer que podemos usar o mesmo conceito. Onda converter isso, digite objeto de contato em um preenchimento. Assim, por exemplo, seria muito mais fácil para nós escrever toda essa expressão. Então deixe-me tirar isso em sua expressão, e então digite aqui algo como contato. Vamos sentir isso no reboque. Um carro de cano que é um nome completo. Então, se eu salvar isso agora, ele já está me dando outro aqui porque tipografia é capaz de reconhecer que este não é um edifício angular como bem como você não tem um cano fora desta vez. Então, se você voltar para o navegador, você verá que não há ou colocar. Mas se eu ir para visualizar, em seguida, console JavaScript definível, você deve ver um editor. Vamos falar isso sob a direita e você pode ver que ele dá um erro. O nome completo do tubo não pôde ser encontrado em sua dando outro aqui, então o contato mordida nome completo, e este é o lugar onde podemos criar o nosso próprio direito? Então vamos fazer isso indo toe o prompt do cliente assim como nós geramos componentes desta vez um militar n G gerar sabonete luta para tubulação aqui. E então você pode especificar cinco. Esse vai ser o nome da minha pasta. E qual é o nome da mordida que você quer? Então eu vou chamar essa bunda para mim. Vai limpar alguns arquivos que o número um seria um cano em si. Um segundo seria uma mancha. Então eu não quero criar nenhum caso de teste neste momento. Então vamos tentar para baixo óculos para formas onder. Se um pressione enter, ele vai criar um único arquivo em atualizações o arquivo módulo também. Então isso é porque assim como você tem um componente para fazer parte de um módulo, até mesmo tubos também devem ser parte do MRT. Então, agora que fizemos isso, vamos voltar e verificar. Há alguma mudança? Você pode ver que não há editor, mas nós não temos uma saída. Também aqui sobre a razão para isso é muito simples. Então vamos dar uma olhada. Deixe-me fechar sobre as multas em de minimis goto SRC ab, e você vê que há despeito e nome completo tortillas tipo escuro é um novo amigo que foi gerado e que é uma classe com uma função chamada como uma transformação. Ele recebe valor como alguns argumentos e não retorna nada neste momento porque ele não está retornando nada. É na verdade na string vazia que temos. Você também pode ver que a classe está decorada com pipe em que tem um nome e o nome é totalmente Este é o nome que definimos no prompt de comando Andi. Ele vem com uma classe chamada pipe nome completo Implementar tipo transformação. Agora, esta é a função que gostaríamos de usar para que talvez estivessem usando isso em algum lugar é como dissemos que, no registro bíblico com ele, entre em contato com a vida, que significa que eu estou esperando que a esquerda desligue este tubo para ser um objeto. Então o que estamos recebendo aqui é esse objeto aqui. Então eu posso dizer literalmente que você é que isso vai tirar uma discussão fora do tipo. Vamos chamá-lo de nós contato fora do tipo de contato. Isso significa que você deve fornecer um objeto em si se seu fornecimento qualquer outra coisa que vai ser um erro durante o uso e ele vai retornar uma string. Então, entre o tipo de ricina na corda do vestido, é claro, temos que devolver alguma coisa. Agora podemos avaliar, hum, condições aqui, dizendo que se não há nada sendo fornecido que retorne uma string vazia. Então eu posso dizer aqui, se não entrar em contato, então eu posso dizer o seu retorno. Posso fornecer uma cadeia vazia. Para se o contato é um objeto real, será fora deste tipo que as pessoas e Crianças. É um objeto de contato de classe. E agora eu posso ver aqui algo como a Porta de Contato me forçou. Além de um espaço um espaço mais contato ou sobrenome Good. Mais perto de novo, você pode ver que eu tenho o primeiro nome e sobrenome aqui. Mas e se eu também quiser incluir os mais apertados como o Sr. e a Sra. e assim por diante? Então vamos definir cartão disponível Título é igual a dedo do pé contato nosso gênero duas partículas para homens e então eu digo marca de moda. Então eu chamo isso de Sr. Caso contrário, vai ser perdido. Agora podemos combinar isso com dívidas de título mais. Então, se eu salvá-lo e voltar para o navegador, ele não deve ver que é o Sr. Nós sabemos. Vamos lá, 18. Como criar um tubo personalizado para exibir a idade a partir da data de nascimento: Vamos pegar outro cachimbo desta vez. Interromper a exibição de uma porta de dados. Então vamos mostrar a idade da pessoa. Agora, a idade da pessoa pode ser em termos. Off. Anos são anos e meses ou anos e meses e dias. Então, para fazer isso, vamos adicionar um novo tubo. Vamos voltar para o mesmo comando muda a idade. Tudo bem , hoje está claro. tortilhas de tubo escuro da idade atualizaram o arquivo do módulo também. Vamos voltar para a nossa escola secundária. Está a sair desta. Eu vou entrar na idade canalizada ts Vamos assumir o uso fora. Acontece que isso é algo assim. Você vai fornecer conduta, Doutor. Você estará livre para essa corda. Andi, isso vai ser fornecido para a idade, então supostamente. Isto deve mostrar algo como, digamos, 45 anos depois. E, em seguida, se eu especificar algo como isso com idade mais frio um em de Então, se este é um , ele deve exibir a mesma coisa. Vamos supor que é à beira-mar Andi. No caso de eu ter a opção de então vamos envelhecer 45 anos no dia, quatro meses e se eu tiver outro Isso é um por exemplo. Três. Era para ser como 45 anos, quatro meses nos anos 70, um RV Trevelyan tomando isso. Não, podemos ver que neste caso em particular, não tenho nenhuma informação adicional aqui. Tenho uma informação adicional, que é como uma aqui. É para uma rua herdada. Agora. A maneira como isso funciona é que o tempo esquerdo disse fora da idade de uso tubo que está aqui será considerado no primeiro argumento. E depois que você pode dizer cólon e quaisquer perímetros adicionais se apenas fornecer vários parâmetros do que você pode dizer cólon ex escola e branco cheio e disse e assim por diante. Então este será o primeiro argumento Este será o segundo argumento é o terceiro argumento, quarto e turnê do Fear. Então, no nosso caso, só queremos uma única bandeira aqui. Então, se a bandeira está presente, ou é 12 ou 3 se é uma em qualquer outra coisa que não em uma árvore, então vai ser esta. Então é isso que queremos definir aqui agora. Então, obviamente, agora o valor aqui é, é claro, o nome da variável Aiken defini-la para ser qualquer outra coisa. Eu posso até chamá-lo como você vai ser. E tenho certeza que tem que ser uma corda. Então, porque sabemos o que estamos fornecendo. Então isso vai ser uma onda de cordas, seguido por Vamos dizer, por exemplo, eu chamo de nós plana um opcional. Mas se isso for fornecido, tem que ser um número como este, certo? Mas é opcional. Por que essa opção? Porque eu não preciso fornecer isso. Então, aqui, finanças se aplicam. Vou pegar 45 anos. Agora que está feito. Sabe, se já que sou a Grã-Bretanha em outra direita, então se você vai usar isso, não mostrará nenhum valor. Claro, eu não estou acostumado de qualquer maneira, mas é um dia de folga, mas isso é seguido por eu quero dar o que é a idade real da pessoa. Então isso vai a esta hora, é tm isso. Então eu vou para os componentes de contato componente html em. Então aqui é onde eu exibi o d será agora junto com o será. Se eu quiser especificar quantos anos em algum lugar você que br para quebrar em, então eu vou usar e tubo símbolo e eu vou dizer sim, contato mal ser em idade de vida. Então agora não há melhor. Mas isso não está produzindo nenhum ativo embaraçoso. Como você pode ver, não há saída aqui. Provavelmente não fornecerei isso em destroços redondos. Isso é bom. Vai acrescentar algum valor significativo por aqui. Agora, como faço para calcular a chave será distorcido, subtraído do atual até à data. É uma lógica simples, mas vamos ver como isso vai ser feito. Eu vou dizer, se não, ele será apenas pego em uma corda vazia. Então não mostramos nada Adulto. Se o negócio será, está disponível, sabemos que aparecerá um objeto. Vamos criar um DT esquerdo igual a duas novas datas de desenvolvimento. Então criamos objeto. Agora eu tenho que dizer qual é o número de dias de folga são anos entre eles. Então eu vou dizer que você está deixando se igual para sair agora menos DT Wonder Obter tempo Agora obter tempo Dá o tempo em milissegundos eles não sabem que este é um milissegundos atual. Então temos uma grande diferença. E agora posso criar um objeto de vala. Isso é qualidade igual a dois Toe sabia disso. Novidade disso agora o único problema aqui é que ele vai ser oficial por 19 anos setenta. Tenho que subtrair. Vamos tentar isso. Esse tipo de ano é igual aos 80 para obter o ano inteiro menos 1970. Não deixa o mês chateado porque o dedo do pé dd dois escuro começa mês em. Então, é claro, esses dias são iguais aos pés. Vencê-lo para não conseguir um encontro, e isso vai dar o grande fora do mês. Agora. Preciso retornar um valor baseado nesta bandeira para poder usar seu caso de troca. Também é claro que fluxo que é um solto colocar aspas para ou eu posso dizer idade é igual a uma string vazia. Por enquanto, é uma bandeira de comutação ligada. Agora eu posso dizer aqui que se a bandeira é para nós obter o histórico da bandeira, a bandeira é uma, se a bandeira é padrão, que se há algo mais, então para esses dois, nós vamos ter a mesma coisa. Mas como, por exemplo, posso dizer aqui que todos os pés são iguais aos pés. Eu posso usar um back take isso. É para eles coisa prometida que eu posso ter variáveis incluídas aqui. Agora, é aqui que eu vou dizer o dono aqui. Sim. Então isso é como 45 anos no então. Claro, não preciso dizer “pausa”. Na verdade, isso vai estar na seção padrão aqui porque se for caso 100 pessoas, vai ser mesa. Mas se é um caso para, por exemplo, eu diria que ele já está citando anos em um dólar por mês. Waas on, É claro, muito pai. Eu deveria dizer para quebrar aqui porque se as crianças são um, apenas este valor. Da mesma forma, vou dizer caso três ou colocar igual dedo do pé. Podemos dizer o seu dólar anos, anos. Vamos colocar um dólar por mês, meses, dólar Este vai é este Então temos agora dado apropriadamente. Então isso vai salvá-lo e ver. Claro, uma coisa é que nunca mais voltei. Esses valores que tenho que dizer salvariam isso. Vamos voltar ao Rosa para ver que já faz 44 anos. Vamos voltar ao nosso HTML em uma bandeira aqui. Então, se eu disser chamado para agora, se eu ficar com voltar para o navegador, ele deve dizer 44 anos e 11 meses. E se eu pegar sua bandeira é três selvagens voltar atrás, diz que você é eu acredito que eu perdi uma declaração de ruptura aqui. Então isso vai sair do intervalo. Selvagem. Volte agora. Devemos ver que diz 44 anos, 11 meses e seis dias depois se eu der aqui no velho porto. Então, se eu disser algo além de três tão multas assim que o sírio, você volta e vê que o padrão é um e é implícito 44 anos, e é assim que você seria capaz de criar um tubo, que é uma visão de um pedaço de lógica. 19. Atribuição - Crie tubos personalizados para adicionar uma corda com alguns personagens: Então aqui está que eu quis dizer que eu tenho mangueira local aberta para dois, duplo zero e a página parece algo assim. E isso é porque o html aqui. Então ele diz que o engate um abaixo da idade de nada mais. Eu criei dois tubos aqui l pad tortillas tubo escuro e são ruins sobre 5 30 anos. Então, realmente, use isso em nosso HTML. Aqui. Eu vou pegar um parágrafo e então eu vou tomar um nome como nós não Andi como outro mesmo isso . Você verá que há uma string Partridge lado esquerdo aqui e, por padrão, atribuiu cinco como truques. É outro exemplo no componente abduzido. 30 anos definiram uma variável multi, que tem sido um cento. A textura que conhecemos para que eu possa vir aqui e usar a mesma coisa. Eu posso me dizer por qualquer um e então eu posso especificar 25. Isso significa que eles estão totalmente cancelados. A cadeia inteira vai ser 25 dos quais qualquer que seja o nome que ocupa, estatísticas podem estar do lado direito, mas a cauda esquerda será agredida usando um personagem fora da minha escolha, por exemplo, se você colocar um dólar aqui, Então esse é o segundo perímetro para a ajuda. Então, o que significa que após a separação total de dólares, seria 25 caracteres ou nome médio, que é Atualmente sabemos que caracteres de luta preço no lado direito. O filho esquerdo será associado ao símbolo do dólar para o número restante de caracteres assinados. Salve isso. Você deve ver $20 símbolos seguidos pelo mundo. Você sabe, Nike Maneiras. Você também pode usar nosso fogo. Alguns exemplos pouco claros e outros não são dizer nome são 25 provavelmente um hash em fechar os colchetes. Guarde isso, e eu deveria ver a luta acontecer do lado direito. Desta vez, também podemos combinar ambos. Todos os pais estão juntos novamente. Fique Aqui é outro exemplo. Vamos dar o nome que eu fiz no lado esquerdo para 10 personagens com como truques. E se você não mencionar nada, será rigoroso por um dia. Eu dois pontos 15 salvá-lo, e eu deveria ver o total onde seria 15 no nome que sabemos exatamente está no meio . Então esta é a tarefa que eu acho que você estaria exigindo cerca de 30 minutos para este no melhor 20. Como criar o curso injetável ContactsService: o líder para esta página particular aqui é hardcore Did no próprio componente ferido na data do que isso deve ser obtido de um servidor remoto são de um tipo de serviço web . Isso pode ser feito aqui mesmo. Então não é uma boa prática. Seria bom criar um cartão de classe reutilizável como uma classe de serviço em, em seguida, colocar toda a sua lógica de negócios nossa lógica de acesso a dados nas plantas de serviço e usá-los em vários lugares são vários componentes. Agora, para fazer isso, temos que criar uma classe de serviço. Vamos voltar ao prompt de comando ligado. Deixe-me esclarecer isso. E então eu vou usar NG G. E então eu posso dizer s para o serviço. Ou você pode dizer em pesquisas degeneradas. E então eu dou a sua pasta onde eu quero criar meus serviços. Eu posso dar serviço nossos serviços e então eu vou dar o que em nome do serviço eu posso chamá-lo como uma lista telefônica. Agora ele vai limpar as pesquisas da lista telefônica e também vai me dar casos de teste , que eu não quero em óculos para peidos. Vai limpar uma única planta datilografada, sem atualização do modelo ts. Agora vamos voltar e abrir a mesma coisa. Então vamos para aqui. , Olhe para o serviço de barras,listas telefônicas em seus 30 anos que criou um serviço clássico de lista telefônica. Mas, por enquanto, queremos ter uma função aqui que possa lhe dar detalhes de contato que vou dar aqui. Obter detalhes de contato são algo assim, que leva um i d. tipo de número desligado. Então é suposto ter uma ideia. E de acordo com a idéia de postular subvalorizado. Então, o que é suposto devolver? É suposto devolver um único objecto de contacto. Claro que sim. Sua importação que em então aqui é onde você cria o objeto e retornou a mesma coisa. Agora, eu realmente isto é suposto fazer um pedido de dedo do pé. Salários da Web Http. O que? Faremos isso um pouco mais tarde. Então, vou extrair este tribunal daqui em diante. Então coloque isso neste serviço em particular agora. Então, no amor, entre em contato com o nosso i d é igual a um eu gostaria de dizer que eu preciso que é sofrido pelo usuário. Agora diz aqui que distorcem secretárias contatadas em outros porque não temos nenhum membro disponível. Ligue para contato aqui. Então o que eu faço que esse garoto sobre essas coisas começar alguém que está comandando no Mac controlar o nas janelas e selecionar todos eles. E então acredite que, claro, uma última coisa é que eu vou encontrar uma variável local chamada Contato. Então deixe o contato. Ele vai para um novo objeto de contrato, e então eu estou enviando todos esses valores. No primeiro dia, eles ascendem todos esses valores. Talvez eu tenha que devolver isso. Então vamos fazer um contato de retorno também. Então agora temos uma função que vai escrever um objeto do tipo de contato com todos esses valores. Agora, aqui, precisamos receber isso. A questão é, como faço para obter essa função aqui? Então uma maneira que você pode fazer é você sempre pode criar um objeto fora desta série de listas telefônicas clãs, por exemplo. Você pode dizer o dedo do pé das pessoas do serviço de esquerda, nova lista telefônica, soviético como este. E então você pode ver aqui eles começam contato igual a serviço de reboque. Comece, obtenha detalhes de contato, certo. E, claro, preciso dar uma ideia. Vamos aplicar ideias Um. Agora, se você voltar para um irmão, você deve ver a saída sem qualquer problema. Então, temos aquela Hollywood. Esta não é a maneira que você deve estar fazendo, principalmente porque a classe de serviço de lista telefônica em si pode ter algumas dependências de outro, literalmente ou outro assunto de serviço. Por exemplo, se quisermos fazer uma solicitação para e é ponto de razão TDP Webster, estaríamos usando algo chamado Hits TTP Client, que é de angular. Então agora não sabemos como criar um objeto com isso. Então nós queremos angular para me dar esse objeto também. Então, obviamente, fazer isso tem muitas e muitas desvantagens. Neste caso em particular, funcionou. Eu mostrei isso. Mas não é a maneira certa de fazer a maneira certa de fazer isso seria toe Pedir angular para criar um objeto fora deste serviço de lista telefônica e injetar isso em mim para que quando você faz é definir sobre. Sua dependência está no construtor. Agora você deve saber que nunca criamos um objeto desse componente de detalhes de contato. É angular, que está criando um objeto fora desta classe. Agora, obviamente angular, é suposto chamar este construtor em particular em que é quando. Se definirmos uma variável aqui, vamos chamá-la de serviço Onda. Nós definimos seu tipo de dados deste chamado como saris da lista telefônica. Agora Angular sabe que ele tem que criar um objeto fora deste serviço de lista telefônica. Agora, neste momento, onde angular faz este angular vai olhar para o caminho positivo. Já temos um objeto fora das pesquisas da lista telefônica? Se a resposta for sim, vai injetar isso aqui. Mas se o objeto ainda não foi criado, ele vai ser criar um objeto e, em seguida, passar isso para mim aqui, certo, então isso é chamado de singleton. Isso significa que, em qualquer momento no tempo, você terá uma única instância fora de listas telefônicas ou classe de risco assim por diante quando angular criou essa classe. Então, se houver alguma dependência mencionada aqui, angular também injetaria. Essa dependência é porque agora é responsabilidade angular criar o objeto. Então, agora que recebemos que o objeto ouve, esta variável se torna local para este par de colchetes, que significa que eu tenho que criar uma variável de membro aqui em. Então eu tenho que atribuir essa variável local para a variável membro e assim por diante. Mas datilografado tem uma característica fantástica aqui. Eu posso declarar este argumento construtor como alta taxa nosso público está protegido e eles automaticamente fazem isso como um membro. Variável agora, certo? Então, obviamente, em nossos impostos que aqui eu tenho que dizer que isso começa que começamos a ser contatados por um. E se você voltar para o navegador e você pode ver que a saída também está chegando aqui, nós também adicionaremos mais um pequeno detalhe aqui. Então vamos adicionar uma imagem de arte de contato igual a dois. Vou adicionar um “Você é de hoje”. Isto é um link externo, por isso vou guardar isto. Não estamos habituados a esta fotografia em lado nenhum. Então vamos para o componente de detalhes de contato html Provavelmente logo abaixo do HR. Então é a ilha. Eu sou G em. Agora temos que tomar SRC igual a dois. Agora a questão é como eu quero dizer com a imagem agora, muito simples. Eu sempre posso usar seu contato nossa imagem como esta que é uma expressão que a expressão será resolvida. O valor da imagem será subida para o SRC. Deixe-me também adicionar um pouco fora estilo para que não é uma tensão igual a duas altura fora que não ganhou 50 capturas sobre isso. Salve isso. Eu volto para o navegador e eu deveria ver uma foto junto com isso. Agora, isso não é especial, mas se você está projetando um atributo, uma expressão que isso pode ser concedido em outro. Espere. Então, por exemplo, se eu remover isso aqui, então ele vai assumir que este é o valor real. Isso significa que está procurando por uma foto cujo nome é contato com nossa foto, o que está errado. Então, obviamente, você vai receber um erro, não é? Torná-lo uma imagem quebrada mais um erro dizendo que ele está procurando o host local para dois trecho zero duplo. Contate essa foto. Agora queremos dizer angular que este não é um valor de string. É uma expressão onda. Uma maneira de fazer sendo visto já usando um calibrado. A outra maneira de fazer é cercar este SNC com um colchete. Então dizemos agora que este brandy, o que estamos atribuindo é uma expressão, não valores reais de núcleo duro. Então, quando eu digo isso a questão ver a mesma imagem voltando novamente 21. Configurando o terminal de /contacts RET: Então nós construímos sobre o serviço angular, que é injetável, e atualmente ele está me dando um único objeto de contato. Agora, para que possamos trabalhar com dinheiro, as pessoas entram em contato com objetos e entendem como buscar os dados de um ponto de extremidade de serviço Web remoto . Vamos primeiro criar um ponto de extremidade de serviço Web em si. Então, para este fim, vamos voltar para uma contagem de comandos e eu quero instalar algo chamado Jason Server em. É um descanso muito simples e sofisticado um prestador de serviços. Vamos tentar instalar isso. Então NPM I para instalar em uma vida Você é Jason Server. Assim, o Suroor decente depende da idade está no arquivo, que você pode mantê-lo em qualquer lugar dentro do seu projeto. Uma árvore em asilo pode ser qualquer coisa. Na verdade, o mais tarde também pode ser servido a partir de um arquivo Jobs poderia. Mas, por enquanto, vamos criar uma pasta na nossa aplicação para a vitória. Vamos no meu diretório de aplicativos. Então eu vou criar uma nova pasta aqui em um arquivo dentro disso, vamos chamá-lo de nós dados bebê barra Jason. E esta é uma luta que vamos criar Onda que a multa vai ser um objeto. Vai para o Jason vai representar um objeto, Onda. Cada ponto final é representado usando um valor de chave. Por exemplo, eu posso pagar contatos puros, que é uma chave, e o valor seria um ari. E este seria um único objeto de contato, por exemplo. Eu posso dizer que eu d é um sobre isso. Posso dizer o primeiro nome. Claro, neste ser j divertido, tem que ser uma sintaxe muito rigorosa. Eu tenho que dizer no tribunal um em curso duplo, primeiro nome ligado. Vamos ter o meu nome. Da mesma forma, vou dar o resto dos dias D. Então nós temos o primeiro nome, sobrenome gênero. Ele ligou para City, State, Country. Acredito que esses são os valores. Perdi alguma coisa? Sim, data de folga. Mas isso é tipo uma data de nascimento. Então, qual é o será em 1974 01 para 0. Esse é o meu primeiro objeto. Posso ter outro objeto só para ter certeza de que funcionou. Encontra uma cópia desta seção para a vírgula e prova-a. Então temos que conduzir objetos agora. Claro que, ao darmos um i d Vamos nos dar, digamos que John Doe são Vamos torná-lo tão gentil em que vai ser uma fêmea. Digamos que este é um exemplo para que eu possa ter Jane Doe em Hexham sem telefone. Vamos colocar um pouco do número de telefone para cada cinco por 897 algum número. Dito isso, eu duro Texas e vamos fazer com que seja U.S. A. on. Vamos tornar-nos o nosso C 85. Algum outro cara. Ok? E precisamos de alguma imagem. E se eu não quiser obter nenhuma imagem, eu posso deixar isso em branco, ou eu posso até especificar que isso é não, porque nós não temos esse valor então nós podemos simplesmente apagar tudo e então fazer com que seja não, porque agora eu não ter feito alguma para isso. Agora vamos verificar se podemos trabalhar com isso agora, você pode ver que os Jasons são o que tem Bean instalado. Eu também vou empacotado ou Jason por fazer uma entrada para iniciar o servidor. Então nós vamos aqui e limpamos uma entrada para que a entrada seja que é olhos coloridos, Jason seu servidor. Ou você pode chamá-lo de o resto do servidor qualquer coisa que você quiser, qual o valor para isso é Jason, o servidor deles. E, em seguida, você pode especificar a porta se você quiser exportação de teste por padrão taxa começa com, eu acredito, 3000. Então não vamos dar que 4200 é onde meu ângulo está correndo. Vamos dar em 4300. Não podemos apenas especificar que tem de estar atento a quaisquer alterações feitas directamente à multa. Então está tudo bem. E, em seguida, finalmente, com seu banco de dados barra ater Jason. E essa é a luta que ela deveria começar agora que criamos uma opção aqui , vamos continuar e correr dia. Então, em ordem sobre isso você diz NPM Irã seguido de qualquer coisa que seja dado aqui, isso pode ser qualquer coisa. Eu vou morrer puro Jason Dash disse, esquerda em Se tudo está bem, você deve ver que ele diz recursos http locais alimentos três contato duplo zero barra. Então, se abriu isso em um navegador estão em um carteiro de duas pernas, eu deveria ser capaz de ver que há dois contatos. O que ele também me permite fazer é pesquisar meu i d. Por exemplo, se é uma barra. Eu deveria ver um objeto de contato. Se eu dissesse barra dois, que é o i. D. ele realmente vai procurar automaticamente na idéia e usar isso para você. Isso também não viu muitos recursos como uma paginação e assim por diante, para que possamos obter os dados a partir daqui. Agora temos que entrar em contato aqui, então vamos verificar se os dados da barra DB são Jason. Temos que conduzir. Agora. Se eu quiser mais contatos como este, podemos obter mais dados de um traseiro chamado zombaria ponto com on. E o que temos que fazer é especificar que outros campos queremos. Que outros tipos de dados queremos Onda. Então podemos obtê-lo no formulário do CS três, Jason e assim por diante. Agora, o que eu vou fazer é eu vou especificar que minhas idéias de campo encontrar o número Terra. Este vai ser o primeiro nome no primeiro nome do último e-mail. - Tudo bem. Gênero também é bom. Eu não preciso de um endereço IP, mas eu preciso para E se eu clicar no pequeno, me dê um dos pés. Para os tipos que você quer um concerto? Para eu adicionar telefone que está indo para este tipo. Precisamos de um “D” que é um morto morto. Mas vamos a um encontro. Então, as datas entre o quê? Eu vou dar algo como 01 2019 74 para, digamos alguma data aleatória. 03 23 Eu saí em 98. Eu não quero nesta forma que eu queria no meu formato eso. Então, que é o que temos usado em nosso tubo de idade. Queremos a nossa mais uma sensação que a cidade fora do tipo de cidade. Queremos um estado fora do estado. Mais um país. Claro que quero o país. Andi, eu também quero a foto. Então, a imagem está basicamente certa. Agora deixe-me dar-lhe como preto. Mas eu vou adicionar uma expressão aqui. A expressão vai gênero o valor baseado no eu d sobre o gênero. Então deixe-me basear isso aqui. Então, basicamente, eu estou construindo uma concatenação de cordas que na verdade vai obter de um dos meus sites em majors. Andi, se o sexo é masculino, então os homens cortam as mulheres, em seguida, uma barra e na loja de id slash chip então quando eu digo aplicar, nós temos basicamente uma expressão lá. Então temos o primeiro nome, sobrenome, e-mail, sexo, telefone. Se você quiser mudar a sequência, você pode mudar a sequência como este dragão cair em. Eu acho que deveria. As pessoas acham que temos a data do filme country World City State. Então queremos apenas 100 discos. Não queremos muitos deles. E queremos o dedo do pé. Pegue-os no formato Jason. Agora você pode baixar isso ou você pode pré-visualizar isso. Vai te mostrar algo assim. Então fazemos como podemos copiar tudo daqui para que eu possa pressionar o controle. Ok, copie e depois volte para os meus dados que Jason removeu este Ari Andi pedaços o outro que eu simplesmente não bagagem, eu acho. Nossa mudança após formato tribunal Agora eu tenho 100 detalhes de contato com dados aleatórios. Eu posso continuar muito para a mesma coisa, olhando para o host local para três contatos de barra dupla zero , barra dizer, por exemplo, 88 que a pessoa nele é uma imagem válida também. Então, se eu copiar isso e abrir isso e você pai, você pode ver que a imagem de valor que podemos usar. Então, agora, se eu voltar, fazer algumas alterações no meu salário é tal que ele está indo toe trastes o leitor do endpoint remoto que nós apenas sabemos criado. Deveríamos ser capazes de ver alguém respondendo dados aqui. 22. Consumindo o ponto final RESTo em nosso serviço: Então, sem despesas gerais. Serviço Web de dois TB De volta a isso em funcionamento, é hora de nós. Consumir o tema em nosso serviço. Vamos para a nossa candidatura. A primeira coisa que você tem que fazer é incluir um modelo chamado It's TTP Reived model e isso é para ser feito indo para o meu dever. Sim, e temos que agir que importa aqui. Mas, claro, antes disso, temos que importar o modelo em si. Então nós vamos dizer importação de em barra angular barra comum STD sobre o que está vindo de que é uma parte módulo como cliente http moderno em Uma vez que nós adicionamos que aqui, que tem que ser incluído em nossa seção de importações. Agora, outra aplicação depende de outro módulo e este modelo tem um salário chamado cliente http , se você se lembrar, podemos injetar um serviço no reboque. Outro serviço é componente. Então o que queremos fazer é ir para nossas pesquisas de catálogo telefônico e dizemos que queremos consumir esse serviço de cliente http e a maneira como fazemos isso é digitando cinco do americano. Chamá-lo vai Http em tempo de folga, é cliente TTP e isso vai dedo do pé para importar o 2º 1 que eu deveria estar usando de em comum angular seu PIB. Então, temos isso. Agora que temos Http, não podemos consumir a mesma coisa. Então, como fazemos isso? Então nós vamos dizer aqui é começar, http dot Obter e nós temos que fornecer um u r ea urina para é muito simples. Então vai ser scdp host local 43 double zero slash contact slash slash plus esta hera que estamos procurando Então eu posso ver aqui mais t agora, esta função quando você chamar, ele vai refazer o que é chamado de observável e o observável tem para ser consumido em vez de dizer, o observável deve ser subscrito Então eu posso simplesmente dizer retorno aqui em que me dá um erro porque aqui você pode ver que nós dissemos que o tipo de dados escrito é contato. Mas como isso vai retornar um observável sobre, o que fazemos aqui é agora vamos dizer que isso vai voltar em observável, que é de Rx Js e dizemos que pode ser qualquer coisa Agora sabemos que é um objeto de contato , mas agora vamos dizer qualquer ano Então, o que significa que quando esta função é chamada, ele está realmente indo para o feito em observável. E se você se lembrar onde temos chamado foram chamados em nossos detalhes de contato componente e no componente cardeais de contato es. Então dissemos aqui que esse contato inicial é igual a um observável novamente. Isso é errado, porque o contato é uma variável fora do tipo contato. Mas como este é um observável, você sabe, a maneira que podemos atribuir é assim que dizemos primeiro, essas ações que começamos a obter detalhes de contato, que é um observável em observável, tem que ser subscrita usando um escuro subscrever, eo substrato dá três callbacks. A primeira chamada de volta é basicamente sobre quando você começa o realmente, não. O que você quer fazer quando receber uma edição? O que você quer fazer? É um segundo perímetro. E quando a assinatura real estiver concluída, o que você quer fazer agora? No nosso caso, só queremos receber os dados. Então, quando os dados estiverem disponíveis, entregue-os para mim. Eu gostaria de atribuir o contato distorcido do dedo é igual aos dados do dedo, e isso é o que estamos tentando fazer aqui Se eu formatar isso então agora chamamos a função e quando o objeto é retornado, o observável é retornar. Nós assinamos isso sempre que os dados estão disponíveis, os dados são fornecidos para mim e eu estou atribuindo isso. Oh, eles começam o contato. Então eu vou salvar esse navegador para trás. Se você ver agora, nós obtemos dados de uma pessoa diferente Agora também, você pode ver que há um erro aqui inicialmente, Então é apenas não pode encontrar imagem fora indefinida. Vamos fazer uma coisa que é limpar a tela e, em seguida, recarregar mais uma vez. Onda, uh, veja que temos um editor aqui e a razão pela qual este é outro agora Andi não antes é porque quando o componente é carregado, o objeto de contato está vazio. Está indefinido agora, Rachel, Rachel, porque acabamos de declarar o tipo de dados. Mas não lhe foi atribuído nada. Nós não ascendemos nada no construtor. Não vamos ascender nada na ONG nele. Também em melhor ser atribuição. Nós somos realmente tem qualquer um momento mais tarde no tempo quando o realmente morre disponível. Então, mas antes disso, o componente é carregado no U eu onda o componente HTML Se você olhar ele está tentando fazer algum tipo de uma imagem aqui e isso é indefinido neste momento no tempo, on e indefinido. A imagem escura é um editor e isso é o que realmente você está recebendo interrupção Não é possível ler imagem de propriedade indefinida. Agora, uma correção fácil para isso seria apenas inicializado isso em qualquer uma na imagem aqui em si é igual a um novo contato sem qualquer perímetro. Onda. Agora que deve resolver o problema em você pode ver que o interesse, É claro. Inicialmente, ele ainda vai para uma foto em Não só eles não são valorizados imagem, então é por isso que ele está dando. Mas isso é bom. Ainda podemos premiar adicionando uma imagem fictícia. Mas está tudo bem, só para o caso de eu ir aqui e depois em vez de um. Se eu disser 45 salvá-lo agora, deve ver uma pessoa diferente, certo? Isto é exatamente como consumir um endpoint de descanso usando o cliente http, vamos fazer alguns re factoring agora, então se eu voltar para o serviço, você pode ver que esta urina seria agora usada em vários lugares. Obviamente, não é uma boa idéia mantê-lo aqui. Então eu vou digitar isso como urina baseada, que eu não tenho alguém criar uma variável. Sua chamada, CONST. A urina baseada é igual ao dedo do pé desta e daquela corda. Então agora eu tenho um mecanismo simples aqui. E, claro, vamos escrever mais e mais funções, como colocar todos os contatos, adicionar um novo contrato e assim por diante. 23. Como escrever operações CRUDD no ContactsService injetável: neste modelo. começar, vamos adicionar mais funcionalidades aos salários da nossa lista telefónica. Primeiro, vamos mudar o tipo de retorno de observável fora de qualquer contato observável do dedo do pé. E isso ocorre porque em nosso componente, os detalhes de contato contataram seu componente DS estavam realmente projetando o valor de retorno fora da assinatura do nosso objeto de contato. Então, enquanto aqui dissemos que é qualquer que sabemos que quando fazemos um pedido a este Ural particular, ele retorna um único objeto de contato. Então vamos mudar isso para observável fora de contato. Agora. Quando salvamos isso, você pode ver que ele está me dando outro porque por padrão a função get retorna e observável fora do objeto, temos que transformar o objeto de resposta em um objeto de contato. Isso é feito chamando uma função chamada mapa cujo trabalho é mapear no objeto de um tipo para outro dia. Então, para este fim, você pode ter que chamar o mapa do carro função, como você pode ver que ele não está listando a função do mapa, então nossos smoking tem operadores de raio que você pode usar. Por exemplo, se eu vou nem modelos Onda olhar para auditorias Js Você pode ver que há um operador sub módulo , e há uma abundância de operadores que podemos ver aqui como, por exemplo, conquistado ou pegar. Há contagem, e muitos deles. Um deles acontece a ser um mapa também, Então, se você quiser, você pode importar o nosso exterior barra r barra operativa homem barra. - Não. Mais uma vez, acessar esta função de mapa a partir deste get funções. Retorne a barriga. Continuamos no norte do Talk Man, e então Matt tem acesso ao objeto de resposta. Vamos chamar se propriedade para cima e precisamos escrever um convertido ou mapear o valor do líder . Eu posso simplesmente sentar. Os dados têm contato, então o casting off que ocorrerá automaticamente. Agora você vê que não há outro agora para isso funcionar, você tem que adicionar mais um pacote ao seu aplicativo. Então, executando este comando, NPM instalar óptica compacto traço da JIA. Isso é um isso e voltar para o mais perto para ver que o resultado está intacto. DNA. Está em uma segunda função. Neste momento. Queremos ser capazes de adicionar um novo contrato, modo que é função de cor chamada como nosso novo conteúdo, e o argumento seria objeto fora de contato. Depois de adicionar um novo contato através do post de ponto http, obtemos um observável fora do objeto de contato com o 90 também. Então vamos dizer que você é observável nisso e então eu posso ver o seu retorno. Este começo começa a descrever são causados agora O Post Rick Waas, O Ural Very um post que é esta base. Ural, execute o pátio base e não faz ideia. Associativo, ao contrário do anterior no segundo perímetro, seriam os dados que você deseja para o nosso que é este e não que estamos recebendo um objeto JavaScript, mas que será convertido em um payload Jason e será enviado para que não tenhamos que fazer qualquer conversão de objeto para string aqui. Ele também vai difícil, e é para DP solicitação de cabeçalho Caldas conteúdo ID é igual aos aplicativos deixados Jason Então tudo está implícito. Mas se você quiser nossos cabeçalhos adicionais, você sempre pode adicioná-lo como 1/3 perímetro. Então, não tenho nenhuma exigência agora, mas quando comparecermos a uma ocasião, talvez tenhamos que enviar alguma autorização para nós. Então, neste momento, isso retorna um observável fora de objetos Então, assim como no caso anterior, talvez tenhamos que combinar a resposta, seja lá o que for. Assim que entrarmos em contacto, objetar e isso vai ser feito. Como você pode ver, isso é praticamente uma Veneza. Da mesma forma, talvez queiramos fazer uma atualização. Então, para fazer isso, chama-se que está fora do contato. Recebemos um contato como perímetro, e o valor de retorno é igual ao anterior. Temos uma conduta observável, então vamos copiar a mesma coisa desta vez que eles voltarem. Eles começam Http, tar colocar que, na verdade, desde então, é pedido de pessoas da cidade desta vez. Não precisamos da urina da base? Deve a idéia da pessoa que afirmou que queremos modificar, que é entrar em contato com o nosso i d. E então eu posso dizer que o contato muitas vezes em si com o mais pálido. Assim como no caso anterior, ainda podemos ter que mapear a resposta para um objeto de contato que vamos fazer agora e a função é feita. Outra função que queremos Robert aqui é aquela exclusão que é idêntica. Então, o get para que eu copie carrega a mesma mudança. O nome do dedo deletar contato. Parece que as idéias um perímetro em porque a função http dot delete. Andi, Ao contrário dos anteriores, não há nenhuma atualização de contato chegando no restaurante. Então isso vai ser observável fora de qualquer, e então eu não tenho um requisito de mapear isso. Vamos ter mais uma função para esta classe de serviço, o que me dá uma lista de conduta por página. Então, bem, addio obter todos os contatos, que leva um número de página, que é um número em se o número não era assim Vamos levá-lo para a primeira página, que retorna e observável. Mas desta vez, em vez de um único contato, teremos uma matriz fora de contato. E, a fim de fazer um pedido, podemos simplesmente dizer, devolveu este material extensivamente. Não coloque a base Yoran. Mas então dizemos o seu mapa de pontos, obtemos a resposta e convertemos a resposta em reboque na matriz, fora de contato. Agora, isso vai me dar todos os contatos em nosso ponto de descanso. Queremos fazer uso deste número de página. Para fazer isso, podemos ler disponível para os pais Andi, que é um objeto que consiste em valores chave. A chave é uma string car Underscore Page e o valor deve ser sempre uma string, que é o número da página que estamos fornecendo. Então vamos converter isso em uma string. Mas a concatenação e esse padrão podem ser nosso segundo argumento. Agora, o segundo argumento para obter é um monte de opções, como cabeçalhos e perímetros e assim por diante. E já que queremos fornecer apenas os medidores de padrão, então vamos salvar seus pais de carreira. Isso é tão bom quanto dizer que os pais são a chave. fundo do cólon é o valor agora no sexto ano. Se você tiver a chave e o valor com os mesmos nomes de variáveis, basta digitar pais. Então vamos salvar isso em que sour obter todos os contatos por função de página. 24. Exibindo a lista de todos os contatos usando a diretiva NgForOf: Agora que temos todas as funções necessárias para a aplicação, vamos ser mais componentes neste momento. Vamos adicionar um componente que pode entrar nos contatos e exibir. Então isso vai criar um novo componente digitando N g G C para componentes de gênero. E queremos isso no componente. Mais velho, digamos que é chamado de “Contate a lista “Nós não queremos “Spec”. Então, com os óculos médicos para alarido e isso é perfeito igual a dois PB para a lista telefônica que vai criar três classes. Html CSS é uma classe tipescript e também atualiza nossa APP. Modernidade é com relação à seção de declaração, então vamos voltar ao nosso núcleo e abrir o tema. Então vamos abrir componente lista de contatos de TS, que está aqui e irá declarar uma variável off contatos nele. Então vamos acalmá-lo. Pergunte aos contatos, prudente fora de uma matriz contatada. Eu sei que isso está me dando outro porque nós temos toe importar os mesmos comandantes cipreste são controlados para fora em janelas e que importado nós não inicializamos isso, adicionando, então se você quiser começar inicial, isso é verdade e array vazio como este? Mas isso realmente não funcionou porque nós vamos apenas inicializar isso no n G nele , usando nossa função de serviço. Então o serviço é injetável, então obviamente temos que injetá-lo em nossos construtores. É um privado. Isso é crítica. Respeitável, fora gravado salários da lista telefônica, essas cirurgias de palestra não podemos dizer entrar em contatos e temos a função, as ameaças e observável, que precisamos assinar. Vamos dizer que é um começo. Subscreva. O primeiro argumento é o combate que recebe o objeto de resposta, que é outro de contexto que conhecemos. Então não podemos ficar aqui. Seja qual for a resposta que vem, queremos atribuir o contexto inicial é igual a rebocá-lo, e eles devem realmente tirá-lo, recuperando os dados da primeira página, a fim de testar a mesma coisa. Vamos para o HTML em tentou recuperar os detalhes da conduta. Então vamos para isso e diz que a lista de contatos funciona. Mas, em vez disso, vou levar o teu, somos de colchetes. E então eu disse contatos que está disponível que nós temos Isso é apenas para mostrar isso no formulário de Jason Jason no tubo de construção que um funciona. Qualquer que seja o objeto está lá em Jason string. Então, se você voltar para o navegador, você ainda verá os detalhes anteriores. Isso ocorre porque nosso componente em HTML atualmente exibe contato PBY tweeted. Permitam-me, portanto, elogiar o mesmo. E então ele puxou nosso novo componente, que é a lista de contatos em dinheiro PB, como uma nova estratégia. Então isso é incluir isso na época. Salve isso. E então eu volto para o navegador. Eu deveria ver uma lista de contatos, e você pode ver que o contexto esperando alguns i d um dedo i d 10 até se eu quiser os detalhes da segunda página. Eu posso voltar aqui para o meu TS competente e depois fornecer o número da página, já que é um três. Salve isso. Quando eu voltar aqui, eu deveria ver um novo conjunto de contatos do 21 até a Turquia, que deveria ser a página número três. Então vamos usar isso agora em exibição o contexto de exibição. Então vamos voltar para, É claro, nós queremos a polícia que este número duas páginas RB Tony teria que fornecer isso porque isso grande nós temos a primeira fase detalhes qualquer um deles. Vamos para o html em você agora pode exibir pelo menos fora contatos que eles tinham três primeiro e dizer que lista fora de todos os contatos. Isso é o que eu tinha, Charlie, a fim de olhar através e obter todos os contatos um por um para que possamos imprimir os detalhes do mesmo angular fornecer algo chamado diretores. Então vamos visitar a documentação angular para o mesmo. Então vamos para angular que você é Andi? Vá para as docas. Há um A p uma seção na lista fora tipos que podemos selecionar diretiva. Como você pode ver que há um monte de diretivas comuns, formar atividades relacionadas e assim por diante. Então o que estamos olhando é o que é chamado N G. Longe do motor. Quatro diretivas são perdedores. Toe olhou através de uma coleção que temos em coleções fora observáveis, e então podemos acessar os elementos incomuns da coleção. Isto é muito útil. Vamos verificar como isso pode ser usado. Agora vamos usar um acordo que é suposto ser repetido para cada contexto que temos que fazer que vai levar a sua estrela. N G quatro é igual a dois, e temos que dar expressão Expressão será como deixar ver fora de contatos. Agora, contatos é a variável membro em nosso TS Here. Este é um membro confiável e queremos Toe Obter um único contato em nomeá-lo como ver. Então, agora, se você pode pensar fora, ver é um contato que eu posso exibir os detalhes do que Veja aqui, por exemplo, ver completamente. Então, se você voltar para o mais perto, você deve ver todos eles exibidos na forma de nomes completos. Certo, então é assim que podemos nos agrupar. E Ari, caso esse Eric cresça automaticamente, isso também vai crescer. Por exemplo, vamos colocar apartamento aqui dizendo que, digamos, importante para Bt e nosso tratado e família sobre. Então diremos que seu Senhor é o manipulador de eventos de cliques de talentos para o mesmo quadro chamado Lord . E, claro, não temos essa função que vai dar outra. Isso é salvá-lo. Volte para cá. Isso é uma função normal, que é suposto incriminar o número da página. E nós não temos o número de página que variável solitária chamada Asian Off número cinco, inicialmente para uma onda, temos que implementar esse número de página vai dizer este início ocasional plus plus. Agora precisamos fornecer esta página. Entormecido o serviço Não receba todas as funções de contato. Então nós dissemos este serviço de início Não obter todos os contatos neste número de página inicial é a variável que queremos fornecer para a função subscript. Nós forneceremos callback, que recebe os dados que é ah, correspondendo um dia de folga conteúdo. Temos contato com o dedo do pé inato este viciado existente e isso pode ser feito em base diferente . Uma das maneiras de fazer é começar o conteúdo é igual a anuidade que consiste em todos os valores de distorcer contatos, como conosco, os valores dos dados. Então isso é chamado de operador de propagação no ano seis. Então, ele realmente vai se espalhar sobre os valores do contato e, em seguida, espalhar todo o valor dos dados torna-se um novo afastamento. E isso é um Centobie começar a entrar em contato com você se eu salvar este núcleo agora. E se você voltar para o navegador, então vamos dar uma olhada nisso. Nós temos o primeiro a desligar e quando eu clicar em Lord More, você pode ver que mais 10 está carregado. E cada vez que eu clicar nisso, você vai ter mais 10 cada vez. Então, a fim de embelezar a mesma coisa agora vamos voltar para cá. Em vez de apenas exibir isso, eu provavelmente posso exibir a imagem do nome da pessoa em Provavelmente Cidade de onde a pessoa está vindo. Então vamos ter alguns CSS tão preocupação. O final com o que é chamado de grupo de lista nesse grupo de lista vai conter esses itens de grupo , modo que está fora de sua classe é igual a lista item de grupo. Eu sou provavelmente eu quero ter um papel com duas colunas que estados regra com um chamado SM quatro que para a imagem mais chamado S eles idade para o pedaço restante de dados o primeiro 1 é suposto conter e dar cada Isso é a nossa imagem, A morte e a imagem. Doug vai consistir no SRC vindo de Cedar Picture. Mas se você se lembrar, a imagem de cedro é suposto ser uma expressão para que possamos ver que é uma expressão adicionando um quadrado de volta ao SRC. Atributo. Então isso é uma foto. Não, você também pode nos dar o tamanho. Vamos dar uma estirpe de pele, por exemplo, off, digamos 100 pixels de 50 imagens e isso deve ser bom o suficiente. E este é um lugar onde quero mostrar os nomes das pessoas. Vamos ter uma cabeça para a qual consiste em ver, mas encher-me. E também estamos cientes do parágrafo que consiste em Cedar City e ver o estado salvá-lo . Vamos voltar para a Rosa no DSI que os dados estão desesperados muito bem. 25. Configuração de rota e alterações vistas: Agora que temos vários componentes em nossas aplicações que tem componente lista de contatos e componente de detalhes de contato, devemos ser capazes de rebocar entre eles clicando em uma pessoa de contato particular, provavelmente na imagem ou no nome. Se eu clicar nisso, ele deve exibir os detalhes daquela pessoa específica. Obviamente, temos que identificar onde essa informação deve vir. Portanto, gostaríamos de remover provavelmente esta lista de contatos. E nesse lugar, queremos exibir os detalhes de contato da pessoa. E isso é feito usando algum conceito chamado conceitos de roteamento. A primeira coisa que você tem que fazer é rebocar identificar o local onde o componente tem que ser destruído dinamicamente. Agora, para este fim, vamos para o nosso componente AB AB HTML. E é aqui que mostramos componentes alterando-os manualmente. O que vou fazer é remover isso e colocar um componente chamado rotor para fora. É um componente de construção de angular, mas isso só virá se você estiver usando algo chamado Writed of modern. Já que não fizemos isso. Então não está me ajudando aqui, mas mesmo assim, vamos adicionar esse pouco de chocolate como ataque. Então, obviamente, se você voltar para o navegador, você torna melhor aqui dizendo esse total de linha. Não é um componente válido. Se você voltar para o console, você pode vê-lo. Zero Para girar não é desconhecido. Elemento agora que pode ser corrigido muito rapidamente indo para a nossa aplicação estão na modernidade é , e temos que aderir um modelo chamado um modelo de rotor. Então vamos ao anúncio sobre o nosso modelo. Então isso é uma importação. Andi do seu Slash Road e isso vai me dar um modelo. Está em um modelo chamado Rotor Modern. Ao contrário dos anteriores que usamos aqui, você pode não ser capaz de usar este tipo de modelo diretamente, e isso é porque você tem que dar algo chamado configuração de estrada. Então, qual é outro que é criar isso aqui? Podemos mudar isso para outro lugar mais tarde, então vamos declarar uma variável. Isso se o Const. Estradas, que é tempo fora chamado, escreveu citações dedo do pé e e para o tempo, vamos deixá-lo em branco e, em seguida, descer para a nossa seção de importação e, em seguida, eu ouço módulo Rotor pensado para Route em. Então nós fornecemos essas estradas. Então você salvou isso. Agora, se eu voltar para o Rosa, eu não deveria estar recebendo um erro. Mas eu não tenho nenhum componente porque nós tivemos que especificar dinamicamente esse componente. Agora, a parte do Ural aqui pode identificar o que este componente em particular deve ser . Por exemplo, se eu disser barra, eu quero que o componente home venha aqui. Mas se eu disser sim, barra lista de contatos como um exemplo, Então esta parte deve identificar a lista de componentes e esse componente deve ser colocado aqui . Também podemos dizer que seus detalhes da barra são detalhes de contato. Isso deve identificar um contato intenso aqui que é aqui que a configuração da estrada entra. Imagine você para especificar qual parte do pote deve identificar o trabalho, componente bastante simples benefício. Vá aqui e, em seguida, criar um objeto de configuração de estrada que tem basicamente parte em Dizemos que casa é a parte e, em seguida, que deve descansar Oneto um componente chamado componente home on. Agora, se o seu serviço será um espaço em branco aqui neste momento. Mas uma vez que é muito carregado, podemos verificar aqui digitando barra segure pressione enter Eu deveria ver o componente home. Da mesma forma, eu também posso especificar que outra parte chamada lista de contatos, deve identificar um componente chamado como um componente de lista de contatos. Onda se pot detalhes de contato deve identificar um componente chamado componente de detalhes de contato. Certo? Então agora você pode ver que eu tenho três pontos de estrada diferentes, então cada parte identifica a empresa específica. Agora a parte que o texto pode ser qualquer coisa que você quiser, mas eu realmente não manter a mesma coisa que a sugestão fora do componente em si. Então vamos voltar aqui em que é tudo. Se eu disser que você é a lista de contatos e o concurso de imprensa, você pode ver que ele está me dando a lista de contatos. E, claro, se eu dissesse “Contract de taste “, ele vai voltar e mostrar-me os nativos de contacto de uma única pessoa. Então, obviamente, nós também gostaríamos de ter uma raiz fora de seu aplicativo apontando toe alguns antes componente, e isso pode ser feito especificando que a raiz fora de seu aplicativo deve redirecionar dedo do pé um deste como casa. Nossas listas de contatos cabe a você geralmente refazer no início. Não é necessário, mas começou, Seyfarth é igual a uma corda vazia e, em seguida, especificar qualquer componente é você pode dizer isso diretamente para casa neste caso, redirecionados trabalhos de casa porque forma é uma parte que corresponde para texto. Você também pode levar diretamente o seu componente está em casa confiante. Mas só um problema é que eu sou distrito é parte de cada parte que queremos dizer que a corda vazia deve ser a única coisa nas partes, não apenas parte do parque. Então isso é feito digitando para combinar no mesmo alimento desta maneira. Somente se a parte inteira é uma indústria, então é redirecionado para a casa. Então, se eu voltar para o navegador, você deve ver agora que o buraco vai aparecer na frente. Então, mesmo que eu não visite isso, eu removo isso e pressione enter, você verá que ele é redirecionado. Toe slash casa em que surge automaticamente. Agora que temos o roteamento básico configurado Agora, também gostamos de fornecer muitas opções. Então, se eu clicar na opção de menu, ele deve ir toe uma determinada empresa que isso é feito usando algo chamado um roteador pernas que são simplesmente colocar hiperlinks. Então vamos ver como isso pode ser feito sem um par de menus aqui. Um é inteiro. Um deles é a lista de contatos fora do curso. Eu deveria ser capaz de alternar entre eles usando os meios hiper, não digitando manualmente naquele local. Então vamos voltar ao componente cibernético. Html. Levante este H três e em alguns botões aqui. Então isso é para a frente. Uma arma com Bt e ligado. Eu posso salvar Bt e traço Primária no botão. A legenda estará em casa. Vamos dizer isto. Voltem para trás. Você veria que há um fundo e se você quiser um botão mais largo, você pode especificar ano Bt e traço longo que vai ocupar o total rasgado fora do lado. Mas o que seria bom? E então, é claro, eu posso copiar e colar isso algumas vezes. A 2ª 1 seria uma lista de contatos para que essa seja uma lista de todos os contatos. E se não queres família, podes chamar-lhe assim o Segundo Billy. É assim que olhamos para isso, e está tudo bem. Então agora você vê, eu tenho dois botões, mas é claro brincando sobre o qual nada acontece para este fim, o que nós temos que fazer é fornecer o que é chamado como uma diretiva de link de roteador. Então eles estão dizendo Diretriz é dado assim que eu estou suportando para que eu possa ter algum espaço aqui para que eu possa dizer Router League é igual. Agora lembre-se, o registro de tela significa que o que temos dado aqui é uma expressão. Então este é um atributo regular, mas recebeu uma camisa de força para indicar que esta é uma expressão. A expressão é um Ari que consiste fora da estrada. O que Então, por exemplo, Contesto almoço ar barra em casa em que deve corresponder toe a casa. Da mesma forma, eu posso dar-lhe um totalmente em, em seguida, é igual a uma expressão que consiste fora lista de contatos. Aqui, guarde. E se eu voltar para o navegador, eu deveria ver dois botões. Quando eu clico na lista de contatos, você pode ver que este rotor Oakland agora mostra uma lista de contatos. Da mesma forma, quando eu assumir isso, você pode ver que eu sou capaz de voltar para a casa agora. Da mesma forma, eu também posso fornecer uma rota cedo para cada um desses dois. Faça isso. Vamos voltar para a lista de contatos. Html Andi. Se você ver, é aqui que eu tenho a imagem. Aqui é onde eu tenho um nome completo para que eu possa adicionar apenas uma rota. Com este são hoje que é adicionado borda do dedo do pé para Então, quando eu ir para a borda para a nossa uma linha virando inclinação igual e Ari. Mas desta vez queremos fornecer dias de contato barra em salvá-lo. Então, quando voltarmos aqui, temos a lista de contatos. Você vê que eu não tenho um hiperlink é que eu não tenho um ícone de cultura, mas ao clicar sobre isso, você deve ver que eu sou capaz de colocar sua pessoa diferente. Claro, o que queríamos fazer era clicar em uma pessoa em particular para ver os detalhes dessa pessoa. Neste momento, não estamos a fornecer quaisquer detalhes da pessoa que temos aqui. Essa é a razão pela qual não estamos entendendo isso. Então, a próxima coisa que podemos ter que fazer é rebocar os desejos da informação, como uma idéia dessa pessoa para os detalhes de contato. Então, como, por exemplo, junto com este contrato, é que eu poderia querer fornecer a semente ou idee, e isso é o que podemos dar a vocês. Vamos lá, semente na hera. Então essa é a razão pela qual isso é uma expressão. Veja, este é um dia de folga. Dois valores agora um é um fluxo. Essa é a parte. E a segunda é a ideia da pessoa que estou enviando. Mas infelizmente prático sobre isso, você pode ver que eu estou recebendo um editor. Isso é porque ele está olhando para o conteúdo. Detalhes barra três em. Não tenho nenhum mapeamento para esta parte. Como se tivéssemos o mapeamento para contato. É, mas não para detalhes de contato barra três. Então, se eu limpar isso e assumir essa pessoa agora, você pode ver que está me dando outra coisa. Esse contexto é cortado. Cinco é inválido. Então, como resolvemos isso? É muito simples. Vamos para o modelo de aplicativo TS e dizer que o quê? Junto com as evidências de contato, também gostaríamos de fornecer uma identificação e se eu desse tipo aqui, eu vou assumir que a Ivy também deve ser difícil dizer. Mas sabemos que esta ideia deve ser como um dedo do pé. Três são assim. Então, a fim de mencionar que esta é uma parte valiosa da parte que damos ao seu cólon, Heidi, e esta variável agora pode identificar quaisquer que sejam os números que estavam fornecendo. Então, se você voltar de novo, você vê que não há outros discursos? Não. Quando eu clicar sobre isso, ele vai para a pessoa crítica. Mas nós fornecemos os únicos cinco, mas não vamos usá-los aqui. E se você apenas se afastar e ir para o contrato, é componente DS. Você verá que estamos sempre fornecendo 45 como o número. Então, apesar de estarmos aqui bem, somos um, por exemplo, sempre mandando para uma luta. Agora o que temos que fazer é capturar esse valor que estamos enviando, que é parte da parte da I d Andi. Então pegue isso e depois trabalhe com isso. Então, em vez de enviar, 45 foram enviar essa ideia fornecida pelo usuário 26. Acessando os parâmetros de rota no ContactListComponent: Então, nesta manhã, digamos como receber os parâmetros redondos e, em seguida, obter os detalhes dessa pessoa de contato em particular . E para isso, temos que fazer um serviço. Trouxe-o pelo módulo de rotor angular chamado como ativado escreveu para que possamos declarar uma variável Say, por exemplo, privado depois de um avaliado sobre off tipo ativado rodada. Assim, os nomes das variáveis podem ser qualquer coisa, mas tendência geral é que você mantenha o mesmo nome do nome da classe com um menor recebe custo mais tarde. Isso agora tem acesso nos parâmetros da estrada. Podemos fazer uso disso na imagem. Então, agora podemos dizer aqui que este início ativado empresas ao ar livre, que é um observável para o qual você pode se inscrever. E agora você tem acesso a todos os parquímetros incomuns. Digamos que os dados dos fóruns agora usando esse termo estado são que gostaríamos de provavelmente fazer uma solicitação para este. Então eu vou cortar isso daqui e bipar aqui em vez de 45 onde queremos suprimento está desligado. Eu queria que tivéssemos a ideia e em nenhum lugar esta ideia está vindo. Se você olhar para este ABT orelhas modeladas. Nós definimos a variável chamada Idee aqui. Então esta é a variável que estamos tentando acessar a partir do estado barômetro. Então, se eu salvar este número aqui e depois voltar para o navegador em, nós temos acesso aos detalhes de contato barra um. Então, se eu for para a lista de contatos e clicar no segundo contato, você vê que estamos fornecendo aqui e também estamos recebendo os detalhes dessa pessoa. Então, se eu for a outra pessoa e, em seguida, obter as provas, eu sou capaz de acessar esses detalhes específicos Além disso, algumas mudanças fora vamos fazer o seu porque nós vemos que há um monte de erros que está chegando. E isso é principalmente porque fora da barra não aqui. Agora, se eu tiver alguma imagem deformada, isso seria fantástico, para que possamos atribuir uma imagem diferente. Você é assim para que possamos falar sobre Martin. Temos estas tortilhas de conduta. Há uma imagem que é opcional, e eu também posso atribuir uma string aqui que é suposto ser cortado, uma barra de sexo em majors, e então eu posso dizer que você está fora de vôo ponto PNG Andi que deve nos dar um perfil padrão foto. Agora, se você voltar para o mais perto, vemos que não temos um editor. E isso é porque eu tenho uma foto chamada ativos Imagens perfil que PNG. Então, se você voltar para o SRC e senta imagens, você pode ver que eu tenho este provedor, o motor que pode ser usado no futuro. Uma última coisa que vamos consertar é o tamanho fora. Isso é provavelmente muito grande, então eu quero O distrito US 200 pixel instalado em um excel eficaz. Então vamos a lista de contatos html em. Temos você aqui algo como 150 pixels. Vamos reduzir o reboque 100 pixels e isso deve ser bom. Uma última coisa é que este não se parece com um ícone clicável, mas é explicável por causa de todo o linker rotor. Podemos adicionar um pouco de estilo aqui para que você possa dizer estilo é igual a dedo do pé do ponteiro de dois pontos, e isso faz com que pareça um ícone clicável. Você pode ver que eu tenho a ponta do dedo para que eu possa enfrentar essa pessoa quando eu tiver os detalhes da mesma coisa 27. Excluindo um contato: Não, o projeto de lei viu como o roteamento funciona em Como podemos alternar entre diferentes componentes usando um lançamento de rota? Vamos dar uma olhada em mais um recurso foram programaticamente podemos navegar para uma visão diferente também. Por exemplo, se eu assumir essa pessoa e receber os dias D, isso é o que queremos fornecer. Um deletar colocado aqui. Onda. Quando clico na aldeia, quero que me perguntem. Tem certeza que quer acreditar nisso? E se a resposta for sim, devo apagar isto. Mas desde que os dados são excluídos, eu não quero estar aqui. Mas em vez disso eu gostaria de voltar para a lista de contatos onde eu posso ver são excluir mais pessoas. Eu também posso fornecer uma adoção de acordo aqui em si para que eu possa chutar sobre isso. E a mesma coisa deve acontecer fora do curso, caso em que eu não tenho nenhum para o dedão de redirecionamento acontecer. Mas primeiro, vamos ver se podemos fornecer um botão de exclusão daqui para fazer isso. Vamos para os detalhes de contato Componente Comando V ou controle, ser detalhes de contato. Sim, vamos fornecer uma funcionalidade de exclusão aqui. Então, são feriados. Excluir contato Onda. Seja qual for o contato que está sendo exibido no momento, as pessoas tomam para fazer a mesma coisa. Agora quarenta anos. Queremos fazer isso fora deste salário com as distorções nosso reinício excluir contato. E isso precisa de uma ideia. O perímetro assim irá fornecer esses contatos. Estarei assim se começarem a contactar a nossa “ I.D. I.D. Onda”. Este Retton é um observável quando a assinatura estiver completa. Gostaríamos de fazer algo de tal forma que a visão atual é retirada em outra visão é colocada na rota ou fora tarde. Isso pode ser feito usando outro serviço, provavelmente melhor após Madi e isso é chamado como um roteador. Então nós vamos fornecer aqui uma variável cinco em torno de seu tipo fora ao longo de todo. E isso é importante aqui e agora esta variável tem acesso à sua função chamada navegar dentro do roteador distorcer Não navegar. Temos que fornecer um dia de folga todas as peças em nosso obtê-lo muito simples com uma lista de contatos . É aí que gostaríamos de ir dando isso leva qualquer estrada para meio. Poderíamos ter fornecido isso como algumas variáveis aqui, bem como a única coisa que temos que fazer agora é fornecer uma parte para o lugar. Vamos ao extremo e correspondente a isso provavelmente fora em direção a algum lugar aqui eu posso ver por US $10 mediana BT em perigo. Então, porque é um botão de exclusão, eu também posso fornecer ouvir um manipulador de eventos clique é igual a toe delete função de contato. Uma última coisa que queremos fornecer aqui é o dedo do pé. Pergunte ao usuário. Tem certeza de que deseja excluir? E dizemos aqui usando, se não conformar? Confirmado a propósito, é uma função de janela para que possamos ver o seu Você deve em? Se o usuário disser que não, nós vamos apenas voltar deste lugar em particular. Se eles usarem o que diz sim, isso vai acabar. Se eles usarem isso, não há nada. É só voltar daqui. Então salvou isso. Volte para o navegador. Agora temos um botão A para a aldeia. Então, se eu clicar nisso, vai me perguntar. Tem certeza? Eu digo para cancelar. Eu vou ficar para trás. Se eu disser aldeia e eu disser OK, agora você pode ver que ele está apagado. Eu também estou navegado na lista de contatos 28. Formulários orientados por modelo em Reactive: nos aplicativos. As entradas do usuário são manipuladas pelo Alphonse. Um farm é um agrupamento lógico de elementos de entrada, como caixas de texto, botões de opção, caixas de seleção descartadas em sup, importância e assim por diante. Pervertidos angulares, duas abordagens diferentes para lidar com entradas de usuários através de formulários, reativos e modelos. Ambos podem capturar sua entrada a partir da exibição, validar a entrada do usuário até então modelo no modelo de dados, superá-lo e fornecer todas as mudanças de trilha do dedo do pé. No entanto, ambos estes um processo de protesto e gerenciar os dados de formulário de forma diferente e oferecem diferentes vantagens. Em geral, as formas reativas são mais robustas. Eles são mais escaláveis, reutilizáveis e testáveis. Se os formulários são um guardião do seu aplicativo ou você já está usando padrões reativos para criar seus aplicativos, use formulários reativos. Formulários individuais, outro lado, são úteis para adicionar um formulário simples a um aplicativo, como um formulário de inscrição de usuário que fácil dedo do pé para outro, mas eles não escalam como realmente dois formulários. Se você tiver um formulário básico, requisitos e lógica que podem ser completamente gerenciados no modelo. O News Templar dois informa 29. Trabalhando com um formulário orientado para um template para adicionar novos contatos: Então, a nossa aplicação Agora este lugar uma lista de contatos ou eu posso clicar em uma pessoa de contato particular toe você. Os detalhes são Se eu quiser excluir, eu posso clicar na exclusão. Eu recebo um pop up. Posso dizer que está bem para ser cancelado. Dedo. Fique para trás. Suponha que se você quiser adicionar uma nova conduta, então temos que trabalhar com formulários. Um anular começou a trabalhar com formas de duas maneiras. Um deles é chamado de formulários orientados por modelo. Outro é chamado de formas reativas. Neste vídeo em particular, estaremos trabalhando com modelo para informar. Primeiro, vamos ter um novo componente e derramou um professor para que eu possa chegar à frente formulário html para adicionar um novo contato. Então eu vou para o prompt de comando. Certifique-se de que estou no diretório de trabalho. São que n g gerados componentes computadores barra contato. Se você não quer o dedo do pé, tenha a esperança. Com esta técnica foi Toe Falls Onda. Podemos obtê-lo até os gráficos antes e outros novos gráficos como Isso é Perfeito é igual Toe BB para lista telefônica. Outras carreiras três arquivos um CSS e HTML em uma luta T s por isso atualizou são mais deveres. Então vamos para o núcleo e abrir os componentes do aplicativo SRC, e temos sua honra conduzir nosso componente de conduta seu demônio. Então, se você quiser que nosso formulário de contato apareça aqui, provavelmente teremos um botão de barra lateral. Vamos para o estado do nosso complemento cada um para o Iêmen. Copie este link baseado que está soprando algo perna que é contato com público sobre a nova conduta. Então pegamos o botão aqui. Mas é claro, quando eu clico nisso, temos um editor dizendo que eu contato não é uma rota de valor. Então temos que ir para as nossas idéias modernas. Nós temos que definir uma nova rota para que quando Mas eu esse contato é encontro. Um novo componente chamado nosso componente de conduta é colocado no demônio Paige. Se você for aqui agora e é muito fresco, se eu clicar sobre este nosso novo contato, você vê que nós temos página HTML aqui. Claro, a fim de tornar isso como um HTML válido, vamos e em alguma forma humana rica. Então vá para isto. Ponha esse histórico e seu contato. Vamos colocar um formulário HTML simples. Vou usar sua forma de ponto. Essa vai ser a nossa classe CSS bootstrap. Não precisamos de ação aqui porque não estamos nos submetendo. Este ano s são mais de 30 fonte, mas gostaríamos de ter um rótulo e ele participa para cada uma das propriedades. Vamos ter um acordo com grupos de formulários e, em seguida, consistindo fora rótulo mais na entrada com controle de formulário . Como uma classe, o rótulo terá o primeiro nome como a legenda na caixa de texto de entrada é suposto ser para o primeiro nome. A boa forma do ator deve corresponder à idéia desta caixa de entrada particular para que eu possa lhe dar o primeiro nome. Eu não tenho uma idéia. Vamos dar-lhe uma identificação igual a dois primeiro eu. Agora, o propósito por trás disso é quando eu voltar à sua forma feminina. Você vê, eu posso clicar neste rótulo em. O cursor aparece aqui. Então eu entendo se eu não tenho isso para salvá-lo. Volte aqui e você pode ver que eu posso clicar nisso, mas nada aconteceu. Não transfere o controle para cá. Então, adicionando um quatro igual a dedo primeiro eu, Você clicar neste rótulo vai trazer o foco sobre este livro particular que é dado sob um. Então eu não sou, faça um pouco mais de espaço. Aqui, faça uma cópia para o sobrenome. Este vai ser um rótulo chamado sobrenome. Andi deve igualar o que quer que seja uma referência aqui. E temos duas caixas de texto. Nome e sobrenome. Agora, o próximo provavelmente seria gênero. Então vou copiar isto no Pedaço. Mas desta vez eu quero ter um realmente gostaria. Então isso vai ser uma boa entrada. Porque para vídeo, temos que dar um nome comum para ambos que é dado como gênero. Isso não é preciso. Isso não é necessário. Posso levantá-lo. Este valor de 80 aspirinas é igual à escola. Andi, posso dizer aqui , escreva o seu trabalho principal na mesma coisa. Eu vou fazer um café à base de fazer um outro realmente? Com o mesmo nome. O valor seria feminino. E, claro, a legenda a ser exibida também seria feminina. Então, se eu salvar isso e voltar, você deve ver que há um botão que diz masculino ou feminino. Então eu clico sobre isso que está selecionado. Eu clico sobre isso, outro botão realmente selecionado. Então deixe-me preencher o formulário adicionando um set off fazer negócio barra para cada um dos detalhes de contato . Então não, eu adicionei um campo para cada um deles e tinha um submarino Grã-Bretanha, abaixo da imagem tão bom em seu a um bt mediano e primário. Eu vou chamar isso de nós em breve. Então nós temos um dedo importante em como um angular um solto os elementos de forma a ser associado com o modelo mais tarde. Por exemplo, se eu tiver uma variável chamada primeiro nome aqui, eu posso associar esse primeiro nome a esses livros didáticos em particular. Agora isso pode ser feito em qualquer um foram vinculativos ou dois foram por mim. Maravilha é onde podemos ir e dizer que valor é igual a algo. Por exemplo, se eu disser aqui primeiro nome off spring é igual a dedo do pé que você não e se eu quiser que este valor seja associado a esta caixa de texto, eu sempre posso vir aqui e dizer valor igual ao primeiro nome fora do curso. Se esta é uma expressão, isso pode ser dado de duas maneiras com um colchete duplo. Ou posso simplesmente dizer que esta é uma expressão adicionando um colchete. Se você voltar para o navegador agora, você pode ver que o primeiro nome é alterado no dedo do pé. Sabemos porque o valor vem daqui. Mas se eu quiser ver qual é o valor fora do modelo mais tarde, quando eu fizer as alterações na caixa de texto que está acontecendo em um parágrafo onde eu uso um primeiro nome de colchete duplo , que é o leitor moderno em então se você voltar aqui e em seguida, verifique se mostra aqui, sabemos que isso está vindo do moderno real. Assim como este também é. Mas entre isso dizer: Vamos lá, Vamos lá, isso é inalterado. Isso é porque é uma reunião que lembra. O valor dos dados modernos foi associado a um estilo unidirecional. Portanto, se você fizer as alterações na caixa de texto, ela não será refletida no modelo real. Então, para fazer isso, podemos adicionar um chamado motor moderno. Então a maneira que você pode especificar é você. Você pode os destroços quadrados porque uma expressão e também está associado com a sua on key up evento. Então nós vamos morrer puro modelo N G e então atribuído a variável, que é confiar em mim, isso causa um problema, como você pode ver que ele já está me mostrando outro. Esse modelo de motor não pode ser usado diretamente assim. Tem um pouco bonito com ele. Então, se você voltar para o navegador, você pode ver isso no console. Devo ter alguns outros. E a razão para isso é se você quiser usar o modelo do motor, você tem que trabalhar com outro modelo. Caldas forma modelo. Então nós temos nosso modelo ts e, em seguida, primeiro nós dizemos importação de em formas de barra angular e o que queremos importar é algo que nossas formas modernas e este módulo de formulários tem que ser adicionado à nossa seção de importação. Vamos lá, e este é o primeiro passo. A segunda etapa é sempre que você estiver usando o modelo do mecanismo, este campo específico deve ter um nome de propriedade. Pode ser qualquer valor, mas visualiza regionalmente o mesmo nome que o nome moderno. Então, dado o primeiro nome dela e eu voltar para o navegador, você deve ver que ele está mostrando o valor que sabemos, vindo do moderno. A mesma coisa está vindo para cá. Mas se eu começar a levantar, você deve ver que ele também está mudando neste porque agora a caixa de texto é associá-lo com o moderno em um estilo de ligação bidirecional. Então, se as mudanças do dedo do pé vêm, você pode ver que o modelo também está sendo mudado. Agora, o que vamos fazer é que temos que repetir a mesma coisa para cada um fora disso. Mas em vez de declarar uma variável para cada fora dos membros, eu posso muito bem liberado, disponível fora do tipo de contrato e inicializado este contato inicial ele vai toe novo contrato. Vamos voltar aqui e dizer que o modelo corresponde ao ponto do contrato Primeiro nome. Isso porque os dados modernos são propriedade disso agora. Então, agora podemos dar aqui nome igual ao dedo do pé. Sobrenome N g modelo é igual a dois ponto conduta no ano passado e da mesma forma eu também posso querer dar para este. Agora eu sei que este é o botão de rádio. Nós já demos uma propriedade nome por dias. Tudo o que temos que fazer é rebocar associado um assassinato n g igual ao sexo para ambos. Então eu vou acompanhar isso aqui também. Aqui neste vai ser gênero e colocar os lugares que você sabe, já que o valor padrão para contato nosso sexo é masculino. Se eu salvá-lo e voltar para o navegador, devo ver que o e-mail já está selecionado. Claro, se eu selecionar essa fêmea do que os modelos, os resultados de gênero mudaram para feminino. Agora deixe-me fazer a mesma coisa para cada uma dessas caixas de texto. E uma última coisa é que te diz, levanta-te isto primeiro, porque não temos nenhum deles. Mas em vez disso, podemos mostrar contato. Mas esse é um objeto que você mostrou em uma forma de Jason. Vamos brigar com Jason Dedo. Veja o conteúdo fora que eles vão voltar para o irmão e dar uma olhada nisso. Está exibindo um objeto de contato vazio, que tem um gênero e uma imagem por padrão. Mas se eu começar a adicionar os outros detalhes, você pode ver que ele está adicionando me forçou. O gênero do sobrenome já está lá. Então eu levo aqui. Sabemos que você conhece Burke com um e-mail, e isso é adicionado e assim por diante e assim por diante novamente. Basta verificar que, adicionando cada um dos campos Então você pode ver agora que o objeto de dados consiste nos valores da caixa de texto em que temos que fazer agora é toe escrever uma função que pode lidar com a funcionalidade são. Para fazer isso, vamos voltar ao núcleo. Temos o componente de contato do anúncio DS. É claro uma função chamada no contato Onda. Temos este objeto de contato que queremos toe adicionado sobre repositório existente. Para fazer isso, vamos injetar o serviço que é artérias de livros estrangeiros. Uma vez que temos o serviço, podemos ver aqui que este serviço de início iniciar nosso novo contato. Precisa de um objeto de contato, que não é nada além de ter contato com a barriga de retorno. Nosso novo contato é um observável e será se inscrever foram para fornecer uma chamada de volta eo callback recebe o objeto de contato identidade e podemos dizer o que queremos fazer com isso. Então, talvez temporalmente eu possa apenas exibir a idéia fora que no console por tubulação lei consular e você entrar em contato com Ivy mais empreiteiro i d. Agora, depois de adicionar eu poderia estar interessado toe Ir para a página, que exibe os detalhes. Então, para o qual podemos querer usar mais um serviço neste serviço de rotor tempo, fora do tipo chamado Shelter. E uma vez que você tem este rotor, podemos agora dizer que este motor de partida não navega. E então fornecemos a parte onde queremos ir no cartão do partido. Detalhes de contato junto com a idéia recém-gerada que é o contato que eu d. e eles devem tomar o dedo de controle. A página de detalhes do contato exibindo os detalhes. Pessoa de contato. Então eu salvei isso e chamar esta função no clique fora deste parceiro particular. Então vamos para o botão. O evento de clique. Ele cita a função, adiciona conduta. Então eu digo isso para voltar ao navegador. Eu ouço meus pés é e como o Abberton em uma vez que neste nós devemos ver que os detalhes foram adicionados com sucesso para a imprensa 10 pontos 30. Validando entradas do usuário em um formulário orientado para templates: Portanto, usando o formulário de conduta, pudemos adicionar novos detalhes de contato. Andi, vamos voltar para lá. Então, para a coisa é, vamos sair desta parte que é dada no HTML. Temos isto com o Jason, por isso não precisamos disso. Vamos voltar e ver isso logo abaixo do nexo. - Não. Mas uma coisa é que, sem digitar qualquer nome, sobrenome, e-mail ou número de telefone, eu ainda sou capaz de adicionar um novo contrato. E isso vem com uma nova ideia. Além disso, não há sobrenome do primeiro nome. Nenhum desses detalhes existe. Claro, não queremos que esses detalhes sejam aceitos. Vamos excluir isso e ver como isso pode ser tratado. Então, no formulário de conduta de anúncio, primeira coisa é, se os campos mínimos obrigatórios não forem suportados, eu não quero que essa pessoa seja habilitada, então os usuários não podem acidentalmente pegar isso. Além disso, vamos supor que o primeiro nome é obrigatório no mínimo que três letras devem estar lá e no máximo 15 letras. Da mesma forma, eu quero ter Ah, restrição de que o e-mail é um número de telefone de campo obrigatório deve ser ender, e tem que ser um bem numérico de 10 dígitos e assim por diante e assim por diante. Então, se eu quiser fornecer tais validações, como fizemos isso? Para entender como o formulário medicação euston Primeiro, vamos dar uma olhada na documentação. Então vá para ponto angular io que é docas fundamentals formas em. Você pode ver que há algo chamado forma branda. E eles explicaram aqui como a validação do telefone é feito em ambos Templin conduzido como um formas menos reativas. Mas se ele rabiscou aqui então basicamente o que eles dizem aqui é que você tem que definir uma variável, que é a variável template aqui. Nome do hash. Você pode dar qualquer coisa aqui. Por exemplo, no nosso caso, isso pode ser hash primeiro nome e é igual a dedo do motor Mais. Agora com isso, o que acontece que angular cria um objeto correspondente do campo. Podemos acessar isso usando esse nome de hash particular, por exemplo, lá. Dada aqui algo como se o nome corresponde modelo do motor do que você pode dizer nomeado, são inválidos ou nomeados são sujos etcetera. Então vamos dar uma olhada nisso. É assim que isto pode ser feito. Então a primeira coisa que queremos fazer é rebocar Goto, um dos campos hash primeira média é igual ao modelo de energia que também são algumas outras validações básicas . Por exemplo, posso dizer que este campo é um pé obrigatório. Continente é igual a tratar em excelente igual a 15 por exemplo Steve em. Se você voltar para o navegador, veremos a fazenda. Vamos dar uma olhada neste campo em particular. Então eu seleciono este padrão aqui e, em seguida, escolher o meu primeiro nome feed. Quando eu seleciono isso, eu recebo o elemento de entrada gerado real. Embora tenhamos dado alguns atributos aqui como classe de tipo Islay Editor, você pode ver que há um atributos adicionais também, um deles é a classe. Claro, nós demos a classe, mas você pode ver que nós demos apenas o controle da fazenda. Mas agora temos Engy intocado Engy intocado N G inválido thes classes CSS são adicionados com base no palco fora deste extractos particulares. Desde que dissemos que este inchaço livro didático é necessário em nós não entramos. Ele diz aqui que é inválido e que o nome da classe foi aplicado Da mesma forma, o motor intocado CSS sobrenome é um jogo porque não fizemos quaisquer alterações a isso. No momento em que eu fizer algumas mudanças nisso e mesmo se eu trazê-lo de volta ao seu estado original, ele não será mais considerado como intocado. Mas será considerado sujo. Por exemplo, se eu ir e eu temo X em, então é que você pode ver que agora tem o nome da classe CSS aqui dizendo que o controle de formulário que é o que temos dado, diz Engy inválido porque não há nenhum valor nisso. Ele agora diz NJ sujo em vez fora n g intocado Da mesma forma, não waas antes Engy intocado. Agora é tocado no motor e isso seria útil para dispositivos móveis. Assim, os dados CSS inválidos Engy, mas será removido automaticamente assim que um satisfeito com os requisitos de campo. Por exemplo, se eu digitar aqui, sabemos como você pode ver que eu tenho certeza de que os valores inseridos de forma necessária é tomada, levantar-se, também ter entrado cinco letras, Então propriedade continental também foi tomadas. Saia porque originalmente, se você ver o nome da classe CSS, é o seu Engy valorizado. Claro, se eu trazer isso de volta do dedo do pé, dizer duas letras que você pode ver agora é n g inválido porque agora não está satisfazendo o requisito de campo . Então esta é uma classe CSS que nos ajuda a entender o que é o estado fora deste campo particular Agora, junto com os nomes de classe CSS como aqui, nós também temos propriedades para que possamos fazer uso dessas propriedades como pristine editor inválido válido fora de um campo específico para impedir meu se deve exibir uma mensagem de erro . Aqui não estão também notar que os dólares extras aqui é parte de um formulário. E se você for para o elemento de formulário aqui, você pode ver que o formulário também é considerado inválido assim que eles digitam informações significativas . Aqui, você pode ver que o formulário em si é agora considera valor. Claro, se eu atualizar, o formulário está agora no estado intocado, então você pode voltar ao formulário novamente. Você pode ver que um formulário está no estado primitivo e é inválido porque um fora das caixas de texto é inválido, certo? Então, agora podemos alavancar essa propriedade e dizer que desabilitado este Wharton são alterados a cor do dedo vermelho eso quando o formulário é inválido. Então, como fazemos isso? Vamos verificar isso primeiro. Então, agora que eu dei o seu requisito básico aqui, necessário continente e máximo vamos para o botão e nós seremos uma propriedade deficiente aqui. Se o formulário é inválido, A primeira coisa é que tivemos que dar hash algum nome de formulário que é chamado de nós F um é igual a reboque N G forma. Uma vez que dermos isso agora, podemos acessar todo o formulário na propriedade das fazendas usando este F um para que eu possa ir até o meu parceiro e eu possa aderir essa rota deficiente realmente. Não que o registro direto indique o que estamos subindo é uma expressão. Então eu posso dizer um ponto formulário Inválido. Tão burro em um sério. E se você voltar para a praça, você pode ver que o formulário está em um estado inválido. Em eu tenho o botão sendo desativado para que eu possa clicar neste agora. Certo? Então, se eu descer até o botão, você pode ver que o atributo desabilitado foi adicionado aqui. Claro, se eu digitar aqui algum primeiro nome, vamos digitar aqui nós Não. Se eu descer agora, podemos ver que o padrão é habilitar eu deveria ser capaz de adicionar um novo contato com apenas o primeiro nome. Também podemos alterar a cor deste, alterando esta propriedade em particular. Não que isto seja uma corda aqui e podemos substituir este primário por perigo em fechado, os agricultores inválidos. Então, como fazemos isso? Vamos sair daqui por um minuto e colocaremos uma biqueira de suporte encaracolado duplo. Indique que você vai colocar uma expressão com o F um ponto inválido. Isso é verdade? Então eu posso colocar um ponto de interrogação se ele é convidado com um perigo e de outra forma vou dizer aqui que é privado. Assim, desde que inicialmente o formulário é inválido, será Bt em perigo de dinheiro. Assim que eu inserir alguns valores nos livros didáticos, você verá que isso se torna BT e Dash Primary. Então vamos voltar para o navegador no formulário já está dividido e você pode ver na parte inferior . O botão está desativado e está na cor vermelha. Como em outros tipos e nomes como a nota, você pode ver que agora temos o botão de cor azul, que também é um vizinho nas mesmas linhas. Vamos também algumas outras violações. Por exemplo, eu também quero que o e-mail seja obrigatório para que eu possa digitar seu hash. E-mail é igual a dois n g. Moderno e então eu posso vê-lo silencioso. Então você é um par de coisas como hash telefone P é igual a dois N g. Modern. Isto é necessário porque estamos lidando com contactado. É igual a igual. Dedo barra de quatro dígitos. Esta é a expressão regular típica, mas eu também quero dizer um mínimo off dígitos concurso e um máximo off 12 dígitos para este número de telefone particular. Então vamos salvar isso. Andi, volte para o Frozen. Veremos que os agricultores no estado deficiente que está indo sob o primeiro nome, você pode ver que ainda há deficientes. Esse e-mail central que disse no exemplo ponto com assim, mas ainda está desativado. Número de telefone I sob alguns números. Agora podemos ver que ele ainda está desativado, mas assim que eles entram o 10 para o juiz, você pode dizer que é habilitado agora. Mas se eu entrar 11 ainda bem, 12. Está tudo bem, mas 30 letra não Ok, Então é assim que você será capaz de usar certos padrões também em suas validações. Então, agora que temos habilitado ou desabilitado, Mas com base na validação, também temos que dizer ao usuário que por que este botão em particular é desativado no caso de você cometer alguns erros como, por exemplo, eu removi o Primeiro nome, deve me dizer aqui que o primeiro nome é mandatado. Então vamos voltar ao nosso núcleo para adicionar alguns dias para exibir outras mensagens. Agora a mensagem de erro número um seria que o primeiro campo de nome é obrigatório, e isso deve aparecer somente se o usuário ainda não inseriu nada. O segundo 1 seria Milland igual ao dedo três. Isso significa que temos que dizer ao usuário que um sentidor mínimo você deve se alinhar e que eu não sair. O usuário ainda não fez isso. E, claro, o 3º 1 Não precisamos respeitar, porque se você tem uma propriedade de terra Max, os navegadores não permitem que você digite mais de 15 caracteres em tudo. Então isso vai adicionar alguns acordos. Então eu tenho um acordo com os pais no dia dois negócios Crianças para a frente aqui. O primeiro 1 provavelmente diria que forçada significa estes exigem obrigatórios na segunda mensagem de erro seria como, hum, então por favor insira maiúsculas e minúsculas três letras para o primeiro nome. Eu vejo isso. Volte para o navegador e você verá que não mostramos essas duas outras mensagens. Então também podemos adicionar algum estilo a isso, como, por exemplo, ele tem que ser em um pouco de cor vermelha. Tem que ser um pouco menor do que o resto dos rótulos também. Você pode dizer que tem que ser itálico para fazer isso. Temos Ulisses nesta classe. Vamos chamar isso de aula para o PS de fantasia de plástico. Jara. E nós não temos essa classe CSS particular. Então vamos adicionar um. Então eu vou abrir que CSS fino correspondente dedo do pé são componente de contato. CIA diz que eles pensaram ER, que cria uma nova classe, deu cor oferecer estrangeiros permaneceu. Vamos dar itálico. Nós queremos reduzir o tamanho da diversão para cerca de 80% de desconto em seu original economiza perdoando 800,8 p. M. Então, se eu salvar isso e se você voltar para o navegador eu deveria ver que as outras mensagens são como esperado. A única coisa que não queremos isso é que não queremos assustar o usuário exibindo toda a gravidez. Justin Edwards. Então o que queremos fazer é garantir que o usuário tenha começado a digitar o primeiro nome, e então ele não digitou o suficiente. Personagens são, se ele decide e apaga tudo, o primeiro nome é necessário. Os ademas apresentados aparecem. Então, para fazer isso, isso está em uma condição se aqui. Então vamos adicionar uma diretriz. Cel. N g Dar é igual ao dedo do pé. Dizemos que o primeiro nome, que é esta variável em particular, é sujo como o último nome é convidado. Então mostre isso só se estiver sujo. Isso significa que algo foi alterado nos próximos, assim como é inválido. Agora, se eu voltar aqui, você verá que não é perturbador de uma vez, porque está no estado intocado. E se eu digitar aqui algo como isso e você pode ver agora ele está vindo assim que um valor válido fralda , você verá que os elementos se foram porque nós temos garantir que ele vai ser exibido somente se ele é inválido. E, claro, se eu cometer um erro, você verá que ambos aparecem na mesma lógica. Nós também podemos. Se as condições aqui, por exemplo, eu posso dizer, estrela Angie, se ainda forçarmos licença, não os erros nomeados primeiro são presos, um objeto representando nos outros. Se eles existem, eu vou dizer, se um dos outros é chamado de coro, então nós queremos que isso seja exibido. Então, dizemos que certo, esta mensagem específica somente se a coleção de erros contém necessário. Então a mesma coisa que vamos copiar e colar para o próximo fazer algumas mudanças. Então, basicamente, queremos dizer que isso deve ser exibido somente se a validação do continente estiver falhando. Copie isso e baseado aqui agora eu salvei isso. Volto ao navegador, verá que não há outra mensagem. Assim que eu começar a digitar uma única letra, você pode ver que ele diz por favor sob pelo menos três letras para o primeiro nome. Eu acabo mais do que árvores. Não há problema agora, Então, se eu começar a levantar, você verá que a outra mensagem aparece de volta menos. Se é completamente isso, você verá que é. O primeiro nome é obrigatório. Então é assim que você pode adicionar mensagens de erro personalizadas no. Então, vamos voltar. Copie isso em colar para e-mail. Então e-mail tem apenas uma avaliação, que é necessário algum colar aqui e dizer que isso é basicamente e-mail sobre este é e-mail. Os erros chamados necessários não exibirão que o endereço de e-mail é obrigatório? Nós não temos a validação continental para isso, então vamos pegar isso. Vamos copiar a mesma coisa para quatro. Número no número de telefone tem duas elevações desta vez, então uma é necessária. Então, só assim. Então eu vou dizer que você é porque isso para o telefone é sujo como um telefone menos é inválido como um último telefone tem uma pontuação editor necessária. E, claro, a mensagem deve dizer que o número de telefone é necessário. Andi, vou copiar isto. telefone provado tem um editor chamado Pattern. Podemos dar aos clientes a senhora dizendo que agradar Bush. Talvez você possa dizer 10 a 12 dígitos para salvá-lo. Vamos voltar para o navegador toe Atualização completa uma vez. Andi, vamos ver se podemos fazer algumas violações de avaliação. Então eu vou digitar meu nome e livre. Mas se eu comecei a criar há um editor. Se eu remover completamente isso, há um erro semelhante acontecendo aqui. Eu realmente não sei sobre CO, não há problema. Mas se eu começar a levantar completamente, você verá que diz que os militantes são necessários. Da mesma forma, se eu tenho um número de telefone, se eu digitar até mesmo um único dígito, ele diz que importação lugar 10 para 12. É para o número quatro. Então comecei a gravar alguns números de telefone aleatórios. Agora, aperte isso no dígito de 10 você verá que as outras mensagens desapareceram. 11. Sem problema. 12. Sem problema. Mas proteja o 13º 1. Você tem isso, Ademas de novo. Agora, se você é isso completamente, você vai ver que ele ainda diz para os números necessários. Então é assim que você deve ser capaz de adicionar validações personalizadas para o seu formulário, modo que dados inválidos não são inseridos em seu banco de dados 31. Editando um contato usando o formulário reativo: sei que temos visto os formulários orientados modelo. Vamos dar uma olhada em formas reativas. Realmente. As reformas são baseadas em duas classes angulares chamadas forma, grupo e controle de forma, para entender como isso funciona. Primeiro, vamos adicionar um put aqui para uma reunião os detalhes de contato da pessoa selecionada clicando em, que me leva a um formulário que é pré-carregado com estes detalhes específicos. Então, primeiro, vamos sair da água. Então, vamos para os detalhes de contato do componente SRC AB e, em vez disso, o HTML tem atualmente um botão de exclusão que teve outro endurecimento. Antes disso, é um botão com Bt e Bt e lixo Primário como os nomes das turmas. E então ele se moveu tem a coragem. Não assumir isso deve me levar a uma tela diferente, e isso pode ser alcançado de duas maneiras. Uma delas é usá-la no início. O segundo é programaticamente indo em direção a outro componente. Vamos sair. Para ir embora. Rolamento é uma expressão porque nós damos um colchete aqui e a expressão mesmo adicionando eu não consistia em várias partes da parte. A primeira parte vai ser o combate de elite slash, que é um separado fixo, seguido pela idéia fora os usuários sobre a idéia de usar o que nós queríamos. Este é o nosso contato? Vamos dar contato. Eu não guardo isso? Mas este particular sobre definição não existe. Vamos para o nosso APP Modelo DS e no APP modelo DS. Temos que definir uma rota para a coisa, mas não temos um competente ainda, então vamos em um componente. Então, vamos para uma nova guia, certifique-se de que eles estão lá no diretório de trabalho. Teremos qualquer componente G gerando. Queremos começar na pasta de componentes que ele contato é o nome do componente. Não queremos espectáculos de morte neste momento. E então nós também queremos um carro prefixo. PB para quem livro Este gênero é o HTML CSS em arquivos DS correspondentes ao componente. Também para cima, é o SRC barra ab barra AP Modelo DS na seção declaração. Então vamos voltar para a maioria APP. Sim, vamos adicionar uma nova definição de rota para qualquer coisa. O contato é uma parte. Entre em contato com o que para um dado. A Heidi. Então é uma idéia de dois pontos fazendo isso como uma variável no componente que queremos. O Senhor. Qual é? Componente do contrato. Guarde agora. Se você voltar para o irmão, você deve ver que há um botão de edição clicando em que ele vai me levar dedo do pé. Um novo componente que é dirigido Contato funciona agora quando este componente é carregado, gostaríamos de obter os detalhes de contato para o i d. correspondente no trabalho com isso. Então vamos voltar para o componente auxiliado para Sim, e aqui primeiro queremos que você receba um par de dependência é número um seria toe obter a rota ativada para que possamos tirar isso. segundo perímetro é os serviços de livro de formulários através dos quais podemos reduzir os detalhes de contato correspondentes . E é verdade que primeiro dissemos híbrido após redid estrada fora da garganta atividade. O que a garota da cidade estuda Private Oh, para os outros e no final, G sobre ele. Vamos fazer a parte de carregamento. Então, se eles começarem a atividade, desenvolvam-se em direção a Adams , que é um observável, e nós assinamos isso passando um retorno de chamada, e o chamado Imprudente é o Ari do Barão. Então, a empresa é Onda nós gostaríamos de trabalhar com o I D. Então nós dizemos que você está preocupado com empresas fora da Heidi Apenas mudanças que foram capazes de acessar o i d da atriz Park. Então voltamos para o congelado. Quando esta página é carregada, você deve ver que ela diz “Got the idea tree”. Então, qual é a idéia vindo do perímetro da estrada? E agora que temos a idéia, então devemos ser capazes de fazer um pedido. Então vamos copiar esta parte e sair disso, que eles distorcem o serviço, começar, obter líderes de contato fora do I D particular, que retorna outro observável, o subscrito que fornecendo um combate que persegue os detalhes de contato que é recebido em. Então nós gostaríamos de trazer a mesma coisa apenas uma multa muito. Vamos voltar para a Rosa e ver se conseguimos os detalhes correspondentes ao “eu vou ser “Então eu tenho a lista de contatos. Eu escolho aleatoriamente outros detalhes, e então ele contestou, e você deve ver que nós temos os detalhes dessa pessoa em particular Agora tudo o que temos a fazer é rebocar esses detalhes para uma forma que aparece aqui. Para isso, vamos usar um formulários reativos na primeira coisa que você tem que ir para trabalhar com as formas ativas está indo para o modelo APP DS e importar outro modelo das formas angulares chamadas formas reativas. Então eles têm modelo de formas reativas. Isto tem de ser adicionado à lista de importações que temos aqui porque agora o nosso modelo depende de outro módulo. Uma vez que este modelo de formas reativas está disponível, o que podemos fazer é ir aqui e limpar a variável ou formulário de contato fora do grupo de formas de vida e podemos começar. Isto está em algum lugar aqui, iniciar o formulário de contato é igual ao novo grupo telefônico. O novo construtor de grupo de formulários leva algumas configurações e a configuração é sobre o elemento de formulário. Por exemplo, imagine que esse objeto de formulário de contato representa o formulário inteiro. O formulário é feito sobre elementos de formulário como caixas de texto E quais são os valores para cada uma dessas caixas de texto que estaríamos interessados em mencionar. E agora queremos pré Senhor estes detalhes de contato nesta forma. Então, obviamente, queremos ter um livro didático para cada um deles. Então vamos ter suas variáveis como hera com um novo formulário controlar o formulário. Controle pode ser um construtor vazio ou você também pode dar um valor padrão. Por exemplo, deixamos isso como está, então você verá que o I d será nenhum. Porque temos um controle de formulário sem qualquer valor fornecido para que a razão pela qual não fornecemos o valor aqui é porque neste momento, não temos o contato real. O contato é carregado usando um observável. Portanto, temos que definir os valores que se formam nesta seção particular. Faremos isso em um minuto, mas primeiro definiremos os objetos de valor. Agora que inicializamos todos os elementos fora do formulário de contato, também podemos dar um D de valor para a imagem que corresponde ao chá para imagem perfil de contato que está lá no contato 50 anos. Eu tenho essa corda. Alguns copiam isso, e se você voltar aqui, o construtor tem o primeiro perímetro valor padrão opcional que foi dado aqui. Agora vamos para o HTML correspondente ao componente. Retire-o do formulário Criador de parágrafo no formulário. Vamos dizer que este formulário deve estar relacionado com a variável de formulário que foram criados aqui , que é chamado Formulário de Contato. E é muito simples. Usamos uma nova diretiva chamada Como forma Igual ao Fundo que se formam em. Tome isto. Agora podemos ter caixas extras representando os valores de cada um deles. Isso é bom. Fazer consistindo em um rótulo. É em primeiro nome que a entrada e diremos que você está sob controle de forma. Nome é igual a dois primeiro nome. Agora você pode ver que usamos uma expressão aqui e nós simplesmente usamos um atributo. Esta é a sintaxe agora engajada. Se eu não estiver usando um grupo de formulários e usando um nome de controle de formulário diretamente, então você pode dizer controle de formulário como uma expressão é igual a toe. O primeiro nome, neste caso, é assumido como ponto de formulário de contato Primeiro nome. Agora é isso. Agora, se você comparar isso com uma abordagem orientada por modelo, não precisamos definir um nome para isso. Não temos que definir o modelo do motor. Não temos que defini-la. Nome empregado com dinheiro. Primeiro nome é igual a um modelo estranho. Então é por isso que é muito mais simples. Além disso, também testável, porque agora tudo está óptico ferido aqui, incluindo as validações, que veremos no próximo vídeo. Todos nós podemos colocar os dados formulários usando esse parágrafo, e dizemos aqui, formulário de contato, valor escuro. Podemos colocar isso como caçador. Então isso vai verificar Este disparate vai voltar para o navegador. Você deveria saber. Veja que há uma caixa extra. Todas essas variáveis de membro fora do objeto de formulário é nenhuma. Bem, se eu for aqui e digitar algum nome, você pode ver que ele aparece neste objeto de forma particular. Então, o que significa que as caixas extras têm feijão magicamente associado com o objeto de formulário. Então vamos voltar e adicionar mais alguns elementos. Então eu vou copiar isso baseado. Isto vai ser para o sobrenome, e nós apenas digitamos o seu sobrenome. Salve isso. Volte para o navegador. Deveríamos ver duas caixas de texto. Eu deveria ser capaz de digitar em ambos em você pode ver que eu sou capaz toe refletir as mudanças no formulário de contato. Objeto com isso feito. Agora, isso é um pouco de embelezamento. Vou tirá-lo disto. Vou adicionar uma turma fora do grupo. Isto vai ser apenas um rótulo aqui. Classe Amerada fora do controle. Vamos fazer uma cópia do mesmo Andi em outro para o sobrenome que gostaríamos de ver é o sobrenome dele. Gênero é realmente não. Então eu vou ter um gênero como uma legenda. Este seria tipo igual a dois rádio. Se você não mencionar o tipo por padrão, ele vai ser um texto desejado. Portanto, estas são caixas de texto. Eu não preciso de uma aula para isso, mas eu gostaria de ter um nome aqui porque sexo é realmente não seria impotência. Para que eles estejam trabalhando em um grupo, você deve ter um nome comum lá. Você também precisa dizer uma nova ferramenta igual para que o valor que você mencionou aqui seja o que é selecionado quando este botão de opção é selecionado. E, claro, o nome do controle de formulário. Dentro deste contrato do objetivo do sexo dele, eu gostaria de ter mais um botão, mas isso vai ser considerado feminino. Claro que estaríamos vendo apenas botões de rádio do dedo do pé, mas gostaríamos de ter algumas legendas para essa Onda. Podemos abordar a legenda como este macho e fêmea Onde um problema é que se você clicar no mundo masculino aqui, o leitor Grã-Bretanha não é selecionado. Você pode ter que apontar e clicar sobre isso para vendê-lo, Andi, em vez disso, se você quiser escolher no rótulo, você tem que agrupá-los como um só. Então eu vou cortar isso, colocar um trabalho de parto e baseado em gravidez da mesma forma que eu vou cortar isso para o rótulo baseado no tempo. Eu não preciso de tão longe, então eu vou tirá-lo da mesma forma. Então agora voltamos para um navegador, eu clico no mundo feminino. Você pode ver que ele está selecionado. Eu chuto no mundo Masculino. Eles realmente não seriam selecionados porque o trabalho também notou que é feijão selecionado aqui. Assim que você clicar nesta evidência de rua, você veria que eles estão mal que também estão sendo trocados. Então, agora vamos completar o resto dos formulários copiando e colando cada uma dessas ofertas. E, finalmente, Burton toe salvar os detalhes que listram sua arma mais igual a Bt entre as mudanças primárias Xavier ST em. Não precisamos mais disso. Então vamos sair dessa. Salve isso. Volte para os novos e você pode ver que o formulário aparece com a imagem deformada, Ural, Ural, porque isso é o que está lá no objeto de forma. E o resto dos detalhes ainda não existem. E se você se lembra, nós somos capazes de fazer com sucesso os detalhes da idéia de que ele é um prato aqui no dia . Obviamente, precisamos saber pré carregar isso na fazenda em que um passo é feito assim. Você volta para o lugar onde estávamos fazendo o console por muito tempo. Podemos simplesmente pensar sobre isso. Iniciar contato formado são valor definido. Andi, uma vez no objeto de contato real no formulário off pares de valor chave. Agora você pode simplesmente coisas como contato como este. Tem que ser um monte de Keeble parece para fazer isso, usamos um ano seis operador de propagação. Então dizemos aqui queremos criar um novo objeto com os valores do objeto de contato. Guarde isso. Quando você voltar aqui, devemos ser capazes de ver que os detalhes do contrato não estão pré-carregados. E uma vez que sabemos que por ter algo na caixa de texto afetar diretamente o objeto formulário sabemos que o que sobre as mudanças que fazemos aqui já está lá no objeto distante. Tudo o que temos a fazer é rebocar associar isso com o dia na função que salva o estado atual da forma em nosso ponto de vista. Essa é a última parte. Nós não vamos adicionar uma função aqui chamada Salvar alterações e disfunção. Nós estaremos associando com o favor nivelado o botão. E quando este é o cartão, eu tenho que salvar este serviço começa. Quais livros telefônicos sempre são atualizados contato e temos um suprimento. Eles começam contato para valor escuro e esse valor corresponde a um objeto que representa cada dessas chaves com os valores das caixas de deck. Então vamos aqui, chamar essa função. Dizemos que clique evento é igual a salvar a função de alterações. Assim, a mesma função de mudanças aqui chama o contato de atualização de, ou saris da lista telefônica que retorna um observável em. Vamos subscrever isso. E quando a atualização termina o trabalho, ele volta com o Dejan atualizado. Então obtemos isso na forma de um novo contrato. E tudo o que temos que fazer é atrair o componente de detalhes de contato para esta idee em particular. Andi, ainda não temos a dependência do rotor, por isso vamos adicionar mais uma dependência, o rotor Privado Salvador, fora do tipo de personagem. E então voltamos aqui eles começam no escuro. Portão da Marinha é um plano de um dia fora partes. Neste caso, vai ser contato Dash 50 dias, segundo fundo. Será a hera fora do objeto de contato atualizado. Então eles contatam em qualquer. Salve isso. Andi, se eu voltar aqui, veremos que há um formulário pré-carregado. Podemos voltar para a lista de contatos. Pegue os dados de outra pessoa, clique em editar. Os dados são Lorde Ege. Vou adiar alguns hashes fora Aqui está ligado, em seguida, dizer salvar alterações e você deve ver agora ele carregado o componente de detalhes de contato para que eu d. E eu vou ver as mudanças que fizeram com sucesso. Vamos voltar. É a mesma coisa e salvar as alterações, e agora vemos que as alterações foram atualizadas 32. Validando entradas do usuário em uma forma reativa: então usando as formas de realidade foram capazes de editar os detalhes. No entanto, não temos quaisquer validações neste momento. Então acho que se eu remover isso estava com Lanny, então guarde isso. Você deve ver que o primeiro nome para esta pessoa é o último porque nós não temos nenhuma validação. Então, assim como, engajados os formulários orientados modelo. Também gostaríamos de fornecer validações para os formulários reativos, mas este seria muito mais simples. Então vamos colocar o banco de pouso para voltar para a fazenda. Andi Aqui, podemos definir algumas validações como menos 34 valores. Agora isso é feito com a ajuda fora da classe validadores auxiliares. Então vamos voltar para a documentação angular por um minuto. Aberto, angular, que são. Você clica nos cães e nos fundamentos em que temos formulários. Temos validação de formulários. E, claro, o 1º 1 é o modelo de invalidação. Prefeitos rastejam para baixo um pouco. Vou ver que há uma validação de formulário reativo em um dos mencionando aqui é que ver os validadores ap uma referência. Então eles estão construindo classe para validadores e ele contém funções auxiliares então se eu clicar sobre isso, você verá que essas funções existem. Homens, que é a validação da função Max necessária. É um título. A maioria destes são auto-explicativos sobre. Você deve ser capaz de entender o que eles fazem, e mesmo que você não entenda, então você pode assumir isso. Ele vai te dizer o que exatamente vai fazer. Validador que requer o dedo do pé de controle tem um valor não vazio. Então é isso que gostaríamos de ter aqui para o primeiro nome, provavelmente para o e-mail para os quatro números etc. Então, mesmo que eu diga e-mail aqui novamente, veja que ele deve ser um e-mail válido. Isso irá testar automaticamente que é um endereço de e-mail para que possamos voltar agora. Andi, diga aqui que o primeiro nome não tem valor padrão, então nós damos em branco. Mas você se lembra que quando o contato é carregado do resto no ponto, será dito. Mas até lá, vai ser uma prancha. Mas gostaríamos de especificar que uma área fora da validação esfria se aplica. Por exemplo, eu quero dizer que é necessário e tem um continente fora de três letras para que eu possa digitar seus validadores não exigem e então eu vou levar validadores. Comece o continente a partir de três. Então é assim que você especifica um monte de validações nas linhas semelhantes. Eu posso especificar aqui para e-mail e telefone etcetera. Voltaremos a isso em um minuto, então vamos voltar para a fazenda para fazer um pouco de inspeções. Temos os dados de contacto. Vamos clicar na edição e vemos os detalhes. Então eu vou selecionar esta seta. Andi, escolha a propriedade do primeiro nome e você pode ver que a propriedade da primeira vez aqui tem combustível. Classes CSS que identificam o estado atual fora do controle de formulário do elemento de formulário é algo muito maior. Suporta táxis, o nome da turma dele. Mas ele considera em G intocado porque nós não usamos um dispositivo móvel para passar que tudo o que temos feito é no estado intocado. Mas também disse que está reunido. Mas se eu é isso completamente você pode ver agora há algumas mudanças, e ele diz que é um objeto sujo porque ele tem sido modificando seu sido tocado, bem como ele está em G inválido. Agora o n G inválido vem principalmente porque fora do fato de que é um campo exigem. Se eu trouxe Lanny de volta esnobe, veja, é um feijão valorizado. Mas se eu remover três letras, você pode ver que ele é novamente inválido porque o continente agora está sendo violado a mesma coisa. Um lugar para igualar a forma. Você pode ver que o formulário também tem estado inválido em todos esses estados podem ser acessados usando nosso console. Vamos voltar para nossas mudanças salvamento pessoas literárias lá, o que é um ótimo ponto para o momento. Deixe-me cometer este curso para que eu não quero realmente salvar entre isso ou qualquer coisa. Então vamos voltar ao vínculo. Agora assumimos as mesmas mudanças e agora vemos que estamos no hambúrguer profundo. Então vamos para a preocupação Onda. Podemos agora dizer aqui este ponto de formulário de contato inicial Você pode ver que há um status que especifica se ele está no estado valente ou estado inválido, e ele diz que é válido porque não temos nenhum erro nele. Da mesma forma, também podemos verificar início formulário de contato ponto inválido professores americanos telefones. Da mesma forma, eu também posso verificar se é valorizado. É verdade, então podemos usar o status. Qual é a corda? Você pode o ouro inválido, funcionalidades valiosas? Verifique se isso é válido ou inválido. Obviamente queremos o dedo do pé. Fazer uso fora deste campo ou torná-lo desta propriedade e controlar a aparência deste botão. Ainda espero chegar ao núcleo. Vamos tirá-lo do desbunker em não-comprometidos. Isso Nós também voltaremos para trás o nosso componente de contato de edição. É TML. Temos o botão. Queremos adicionar o atributo disabled no caso fora do formulário que está sendo convidado. Então é muito simples. Agora posso dizer que deficiente é igual a dois. É uma expressão para que eu possa ver seu contrato de dardo inválido. Então, enquanto ele é inválido, fazemos esta base de botão capaz e usando o contato tema formado, válido ou inválido, podemos controlar se ele é suposto ser primário são perigo. Então eu teria cortado isso, colocado uma expressão de guiador e então eu diria que você é um cão do formulário de contato. Pergunta válida. Mark Delgiudice concerto como outras formas primárias, é considerado passado um perigo então inicialmente porque é valorizado, não deve haver qualquer problema. Você pode ver que diz azul e está habilitado. Consigo ver um dedo para espreitar. Mas se eu tirar isso, desça, desça, você pode ver que o botão está desativado e eu não posso clicar nisso agora. Certo? Então isso é tão simples de trabalhar agora, sem sequer adicionar quaisquer regras de validação em nossos elementos HTML, nós simplesmente adicionamos que há um necessário em validadores continente. Então, adicionamos o necessário em regras de validação Midland no objeto de formulário em que é automaticamente cuidado fora aqui. Portanto, note que eu não especificou aqui que o elemento de formulário é necessário nosso continente nas mesmas linhas. Posso também dizer que este deve ser um endereço de correio e como o último deve ser exigido para que eu possa ir para este componente anos depois. Eles ouvem que o e-mail não tem valor em Eu posso ver seus validadores Não e feito Plus Eu posso salvar validadores. Não fique quieto. Você não precisa dar o continente lutou este. Então, agora, se eu voltar para o navegador em de tudo está bem. Mas se eu remover isso depois de seu simples você pode ver que ele agora está dando outro porque ele não é mais válido e-mail. Então eu tenho que dar no símbolo raiz. Eu não posso começar dentro de um verdadeiro que também é inválido. Eu tenho que ter alguma coisa. Você não pode simplesmente ter um texto simples também lá, Então isso é tomado. Sai fora. Da mesma forma, também podemos dar uma validação de número de telefone para que eu possa dizer que o número de telefone é necessário como um menos É um padrão. Então eu posso dizer validadores iniciar fatores no padrão é ou uma string em uma expressão regular . Então eu vou com a expressão regular na expressão regular tem que ter um dígito. Como Maney quer os dígitos até 10 a 12 dígitos é o que eu estou esperando. Número de telefone dos EUA agora. Por causa disso agora, não seguirá valores não numéricos. Vamos voltar, fazer uma atualização completa e, em seguida, muito bem. Se estiver tudo bem, então você pode ver que agora que o 10 dígitos prettify é isso, você pode ver que ele é automaticamente agora alterado dedo do pé vermelho no deficiente. Então eu não faço isso. E se eu digitar aqui e também apostar que não é uma carga. E assim tem que ser um número. Então, agora que fizemos as validações, também temos que dizer ao usuário que você não pode simplesmente ter duas letras para o primeiro nome são você deve dizer o primeiro nome é obrigatório. Então nós queremos fornecer algum tipo de mensagens de erro aqui no resgate que não estará sabendo o que está acontecendo com esta fazenda em particular. Certo? Então, vamos voltar atrás. Eu sou essas mensagens aqui e controlo a aparência dessas mensagens usando outras formas. Estado. Então nós vamos digitar aqui um fazer com provavelmente uma aula fora da era. Nós não temos essa aula nós vamos artistas com abuso infantil para duas outras mensagens. A primeira mensagem de erro é para o primeiro nome ser obrigatório no 2º 1 provavelmente para a violação do continente. Então, esse é o tipo. Seu primeiro nome é obrigatório e, em seguida, eu estou digitando sua entrada por favor, pelo menos três letras. Queremos que essas mensagens apareçam somente se o primeiro nome tiver sido tocado estiver sujo, bem como for inválido. Agora sabemos como acessar o formulário de contato. Mas como acessamos o formulário de contato? esse primeiro nome. Agora, aqui é onde temos algo chamado controles. Então podemos ir se você estiver no, então nós dizemos que você está em contato com os controles escuros. Então, qual é a lista de todos os controles que temos em que o primeiro nome ganhou o controle e isso é inválido? Se isso é inválido, então você me mostra que Andi tem que ser sujo. Então, vou dizer que seu primeiro nome não machuca. Então isso agora garantir começar os primeiros minutos 30. Isso significa que algo foi alterado lá no valor de mudança dois é inválido. Então só exiba este agora fora do curso. Nós também queremos que isso seja desesperado somente se houver um editor para o primeiro nome chamado obrigatório. Então, obviamente, temos que adicionar mais um NGF, que irá copiar esta parte com uma estrela n g igual a toe este nome de força, mas outros não exigiram em. Essa é a maneira que você especificou. Claro, os adultos vêem a coleção fora de todos os outros. Se tudo há algum erro e temos o necessário melhor? Então só exiba este e o próximo é apenas uma cópia baseada na cena. Mas em vez de exigido, vai ser a violação da Inglaterra de um continente puro em que eles devem levá-lo para cima da mesma forma. Então é para um mais cheio fresco. Agora você verá que não há outra mensagem aparecendo porque o Número um não é inválido. Número dois, ainda não está sujo, tão zangado. É isto. Agora está sujo, mas ainda é válido. Está sujo, ainda casado. Mas agora está sujo, inválido, e o inválido é porque está violando o rebaixamento do continente. Então eu vou. É isso completamente agora. Embora seja o pool de validação necessário em, ele está exibindo o primeiro nome é obrigatório. E como no caso anterior, gostaríamos de aplicar algum estilo a isso. Então vamos voltar para o CSS correspondente a isso, que é bem aqui e, em seguida, vamos definir uma estrela de classe aqui fora, e podemos ver aqui que a cor é o estilo de forma vermelha. Provavelmente itálico, e então eles formaram o tamanho. Podemos dizer que o seu 0,8 PM como 80% de desconto em seu tamanho original. Vamos voltar para o navegador. CSS pode exigir uma atualização completa. Vamos fazer isso, Andi, tente levantar algumas cartas. Você pode ver que nós recebemos isso e uma mensagem também. Então, da mesma maneira. Também podemos definir outras mensagens para outros campos. Então, vou copiar esta parte. Temos um controle de e-mail que tem elevações desta vez número um é necessário. Claro, o 2º 1 é a noite. Então tem que ser um e-mail válido. Então vamos pegar esse troco. Todo o primeiro nome a emitir Onda. Dizemos que o endereço de e-mail é obrigatório. A segunda mensagem seria como não uma expressão feminina válida. Vamos enfrentar a mesma coisa. Toe telefone completo também tem validações. Uma é a exigência. O segundo é o padrão. Então Anglo Cell , serão os primeiros nomes. E depois vou mudar isto para quatro. E dizem que o número de telefone é obrigatório. E aqui está o lutador. Então vamos especificar que isso é que você pode dizer, por favor Entrada e 12 dígitos em salto. Claro que esqueci. Isto tem que ser um e-mail. Então essa é a regra de validação. E este é o padrão de Telesco. Salve isso. Volte para que o navegador atualize uma vez e, em seguida, verifique se todos eles estão funcionando como esperado. Então eu vejo uma outra mensagem. Vejo a segunda mensagem de erro. Agora eu removo isso I o cume, então não uma expressão valorizada. Então, vou remover isto. É emérito é obrigatório. Assim diz aqui agradável, mas tendem a fazer apenas dígitos bem. E se mais é para o número é obrigatório. Além disso, a mesma madeira é completamente desativada não foram capazes de ir mais longe sem fazer entradas valentes. 33. Integrando jQuery (para paginação em rolagem): muitas tentativas que podemos ter de usar o nosso 40 filho foi completamente É como uma garota. Bem, por exemplo, em nossa aplicação, quando vamos para lista de contatos no rabiscado em, você verá que é um botão Lord More, que lords o próximo a lote fora 10 contatos. Mas se você quer este dedo automaticamente, Senhor, quando você rabiscar a página aqui como você pode ter visto no Facebook onde quando você rolar para baixo, ele carrega mais conteúdo da página. Para fazer isso, podemos ter que usar J Query. O primeiro passo para isso é a consulta G instalado em sua dependência. Então, tenho tido inveja. Hum, qualidade J instalada e sua dependência é tipos ativados de qualidade de pintinho. Uma vez servido na instalação temos toe deixar angular saber que temos um novo arquivo JavaScript . Para isso, vamos para o Jason angular, que é bem aqui, e você pode ver que se você rolar para baixo lá há uma seção chamada Script, que é uma área fora nos scripts que você quer toe associar. Então vamos expandir isso e adicionar uma entrada. A lesão aqui dá para J Query, que está lá na norma, ou ferramentas, e Scott não g expandi-lo dist! E nós temos o seu geek casado ou Js andi com North sublinhado moderns slash j pedrery slash apenas slash check Muito escuro, significa tochas salvaram esta luta em qualquer mudança em seu angular Jason vai pedir para o sol será reiniciado Vamos De volta ao nosso controlo de sobrevivência. Ver e executar isto mais uma vez. E agora temos o aplicativo carregado com sucesso, a fim de entender como lidar com o rolagem. Evans fora da preocupação do Jake. É o Goto. Jake ficou escuro onde J Query já foi carregado. Andi, vou abrir as ferramentas do desenvolvedor. Agora você pode ver que o dólar é uma variável válida que separa sua função. Onda Good comparou um dólar puro fora corpos porta dependem e você deve ver que há um Olá impresso. Então, o que significa que Jake se preocupa, está trabalhando aqui sem nenhum problema. E isso é muito bom e temos acesso ao dólar. Para descobrir a posição dos scramblers, ele pode ver que este rastreador está atualmente na posição zero. Mas como e quando eu rolar para baixo agora você pode ver uma parte das páginas por último, por exemplo, até ouvir se é o último, certo? Então é que ele subiu agora. Queremos descobrir o que é chamado de posição quando você está na parte inferior. Então, o que significa que queremos ver o que é a quantidade de página que é carregada no topo. Além disso, qual é a altura desta seção, que é o estado da janela? Então podemos obter essa informação digitando o que você tem igual? Janela de $2. Então sei WT apresenta o objeto janela e eu posso levar sua porta da janela forte superior Andi desde que atualmente temos quase na parte inferior. Quando eu pressiono é 13 71. Mas se você vai para o início e, em seguida, chamar a função tema zero porque eu não tenho esfregar nada. Então, se eu trazer a página do pé deste nível então por rabiscar e agora se eu disser o que é este trabalho rastejado ? Você pode ver que é 2 26 grande sentido na mesma maneira agora, quando eu estou aqui, ele disse 1371 que é a localização fora do seu documento neste lugar para que nós também podemos obter a posição inferior, adicionando a altura fora da janela Por exemplo, se eu viver w altura ponto, é 6 21 que é a altura desta parte do pé estas partes. Se eu reduzir as janelas do pé direito em algum lugar em 50% e verificar, você verá que ele está em algum lugar na TNT e 25 pick diz isso, somando, que é rastejada até a altura. Deveríamos tirar o emprestado do documento para que você possa ver sua altura w pontos mais a aldeia ou scrum top. É suposto ser a altura da nossa janela, que é 1992 grandes celas. Agora, isso realmente é baseado em onde está sua posição de rolagem atual? Então agora, algum lugar que eu estou no meio, você pode ver que ele diz 1034. Então, se eu estou no começo, eu deveria estar recebendo algo como 600 para qualquer um porque eu estou tendo este rastejou até zero, e eu estou apenas adicionando o w dot altura eso 6 21 Big sell. Agora, se você está na parte inferior mais, sabemos que é 13 71, mas depende do conteúdo da página. O conteúdo da página reunida é chamado Documento. Então eu posso ficar aqui para o documento do dólar das lojas Iguais. E agora eu posso dizer que a altura do lote e você pode dizer que a altura do Didot é 1992 Nós respeitamos você fora onde eu estou agora. Então, estou no começo agora. Altura do negociante, que é a altura documento ainda é 199 dedo do pé. Então, a fim de verificar se temos rolagem para o fundo mais temos que comparar a altura ponto azul colocado de líderes multidão todos os dedos do pé a ação ou altura. E se eles coincidirem, isso significa onde a água mais e nós podemos acionar esse Senhor mais funcionalidade fora de nossa aplicação aqui para que quando estamos no fundo mais, o Senhor mais função acontece automaticamente. Então esta é a idéia por trás disso. Então vamos voltar e implementar a mesma coisa. Então vamos a lista de contatos componentes SRC ab no DS correspondente ao mesmo onde já temos a menor função mais. Só temos de chamar isto de novo e de novo com base nos nossos critérios. Então a primeira coisa é, você tem que acessar o dólar variável global que está lá na janela e torná-lo um local. Realmente? Bem, vamos definir a janela avançada do dedo do pé de outras pessoas fora da qualidade RJ dólar. Então é um dos mesmos o suficiente. Deixe-me dar assim. Eu tinha o dólar. Então agora eu tenho que ir para a unidade e dizer que estamos interessados em ouvir o evento de pergaminho fora da janela. E para fazer isso, vamos primeiro na sua janela de dólar para rastejar. Então, basicamente, estamos na indústria no evento de rolagem na função de retorno de chamada de fornecimento, que é o evento a ser demitido. Cada centavo seu rabiscar. Então isso significa que se eu estou rabiscando a página assim, eles até mesmo dispararam todas as vezes. O que temos que fazer é agora obter o acesso à altura da janela e scrounged para cima, que significa que cada vez que eu rolar assim, eles até mesmo este fogo e que é onde nós queremos escrever o nosso núcleo. E eu vou criar um par de variáveis locais esquerda w igual a cor do dedo do pé. Sabemos Onda deixar d é igual a $2 documento e acabamos de ouvir verificar se w altura ponto mais um pouco scrum não é igual a dedo não escondeu. Então só temos que chamar isso de “Senhor “mais. Veja isso no aviso que esta função também está ligada ao dedo do pé importante. Aqui não vamos mais clicar no botão. Eso Você pode realmente confirmar esta linha pressionando comando, barra, barra de controle salvar o arquivo em voltar para o navegador. Então, se eu rolar para baixo, você vê que ele não está carregando todos eles. Isso é provavelmente porque deve haver um editor, e o outro diz que este começo Lord Moore não é uma função agora. Isto é típico quando estamos a usar o Jake Worry. Agora, há uma razão para isso. A razão é que estamos usando uma função de retorno de chamada em um estilo de luta ES, não no sexto ano. Então, nos anos cinco estilo que a chave foram Isto não corresponde às variáveis de membro da classe , mas em vez disso representa objeto janela durante a execução. Então, para que este cabo para representar o objeto de classe, nós só temos que converter isso em uma função adulta. Então eu vou tirá-lo desta função e, em seguida, em Adul e salvar isso. Vamos voltar atrás. Também veremos a qualidade do cume aprendendo mais e mais conteúdo. Então, só para ter certeza de que somos capazes de aprender mais sobre ambos que poderia Então funcionou e na noite conversou você vai ver que há um pedido para o resto. O ponto final foi feito. Mas se eu rolar para aqui assim que eu rolou tudo que você deve ver que ele vai fazer outro pedido em. Isso é para a página. Número dois no gelo Crown mais e você verá que há uma página número três na página número quatro e assim por diante e assim por diante. Então realmente bem, o Senhor isso automaticamente, assim como aplicativos como Facebook funciona. 34. Como usar SweetAlert para lindas caixas de diálogo: em nossa aplicação. Quando estamos visualizando os detalhes da pessoa de contato, temos uma patente para excluir separação em que você deve ver que há uma caixa de diálogo de confirmação aparece, isto é, Você tem certeza? Agora, a aparência dos dias depende dos profissionais. Er assim, se você vai para outro navegador, por exemplo, aqui é um safari, a mesma página é carregada e quando eu clico na caixa de diálogo Aldeia que aparece é totalmente diferente do que o que vemos no cromo. Da mesma forma, se eu for cinco raposa e clicar em Excluir, você verá que a caixa de diálogo é totalmente diferente e isso é ópera. E na ópera, as caixas de diálogo diziam que você é diferente. Claro que você pode testar em outros irmãos em. Tenho a certeza que vai ser diferente desta não é uma boa abordagem, porque não temos o controlo sobre o estilo deste fracasso do resgate. Às vezes é importante que nós controlamos essas coisas como, por exemplo, eu quero dizer Ari certeza s não estão em. Talvez eu queira ter legendas de um cliente para isso agora. Uma vez que tudo isso não é possível, temos de depender de algumas caixas de diálogo de terceiros. Há muitas caixas de diálogo de consulta J disponíveis, mas a que estou mostrando aqui é chamada Sweet Alert. Mais Seguro Goto Doce. Outros Aqui é um bom grupo Taylor com ícones animados. Eles são o título legal. Há uma mensagem. Também podemos ter alguns apartamentos personalizados como Cancelar Estimado. Então, para começar com isso, é muito simples. Você acabou de dizer que o NPM instalou alerta doce essa função futura chamada Swan. E então você tem opções muito tees off como podemos dizer, Qual é o título? Qual é o próximo, que tipo de ícone você quer. E se você quiser ver como isso parece, você pode clicar sobre isso e ver isso é como vai ser. Claro, você provavelmente pode mudar para o sucesso. Você teria um botão de sucesso. Há uma documentação também disponível aqui na parte inferior. Isso lhe dá uma personalização fora da cena. Bem, eu não iria. Na verdade, em cerca de todos os dias de folga da documentação, nós definitivamente estaríamos olhando para algumas das opções necessárias para nós. Por exemplo, quando eu assumi isso, Eu quero fazer uma pergunta em vez de host local para dois duplo zero seguro. Quero dizer que você está prestes a apagar esse contato. Você tem certeza? Talvez eu possa dizer “não”. Então eu posso dizer aqui. Sim, em. Eu posso ver isso. Sim, tenho certeza. Mas esse não é o botão padrão. E cancelar seria o de para a Grã-Bretanha porque acidental. Se você pressionar Ender, ele não deve estar excluindo esse registro. Então, para fazer que a escola da frente de comando abriu uma nova cidade, certifique-se de que obter o diretório de trabalho e vai dizer NPM I para instalar sweet avert. Então, uma vez que a instalação é feita, temos que dizer ao nosso aplicativo que há um novo JavaScript e que é feito indo dedo do pé. Angular, sombrio Chaisson. Temos uma seção de script que temos especificando que há um novo arquivo em uso normal. Doce alerta dissed e você vê que eles são eles são cor doce dot mindo perseguição. É isso que temos de especificar. Então, é legal aqui, encontrado nem sublinhar modelos barra ST alerta barra dist rua sozinho ponto perseguição. Por favor, note que o alerta doce depende liberalmente da consulta G e certifique-se de que ele está incluído antes da biblioteca de alerta de rua em si. Então guarde isso. As alterações no Jason angular exigem que o vendedor seja reiniciado. Então eu vou para o servidor, parar esta palavra r e começar uma pequena. Quando isso começar, vamos para o milho onde temos os detalhes de contato. Então SRC ab componentes detalhes de contato. Agora este é o lugar onde estamos fazendo uma confirmação apenas para testar como este mundo deixa sair da função chamada Melhor Cisne. A Andi. Voltaremos e substituiremos este pelo doce núcleo de alerta. Mas para o momento sendo olhado para este aqui Agora a ondulação é uma função que está globalmente disponível, mas que só está disponível no navegador. Então agora, porque estamos no texto datilografado, ainda não temos acesso a isso a partir do escopo da janela. Então, a fim de usarmos isso bem, vamos continuar declarando uma variável chamada const inchar a janela do dedo do pé das pessoas fora. Então, quando esta é uma variável global ordenada por causa do alerta de rua, isso pode ser qualquer coisa porque é uma variável local do nosso modelo. Então agora eu posso usar isso aqui. Mas comece com isso inchado e diga olá. Já que não temos um dedo do pé, chame essa função. Vamos para o HTML correspondente de hoje, em seguida, chamar os testículos. Bem, eu só vou adicionar um botão um parágrafo importante tratado ponto em Bt e padrão em. Então eu vou ser o alerta da suíte de testes. Precisamos dizer que o evento clique é igual a melhor função de inchamento do dedo do pé. Então vamos voltar para o mais perto Aqui temos um alerta muito doce antes de chutes importantes em que você deve ver que há uma caixa de diálogo agradável que aparece. O bom é que agora este é o mesmo estilo que aparece mesmo em outras rosas. Também. Por exemplo, se eu recarregar esta página e clicar no alerta suíte master, você pode ver que a caixa de diálogo vem exatamente no mesmo estado que no Cume para que possamos testar ou em outro processo. Além disso, isso é ópera, então você pode ver que ele é recarregado senhor. Você sabe, quando eu clico neste teste ler alerta, exatamente a mesma caixa de diálogo aparece. Então vamos sair dessa. Volte para o nosso tribunal e adicionaremos mais opções do que o comando é e então eu digo: “ Aqui está o Slab”. Eu posso especificar um título dizendo que a lista telefônica e eu posso dizer olá, amigo. E então eu posso especificar que isso é um sucesso. Guarde isso agora. Quando você voltar, ele recarrega. Vamos clicar no parceiro de alerta de rua teste, e você verá que há um ícone animado para o sucesso. Este é o fatal. Este é o extra, e há um Caperton antigo por padrão. Mas se você quiser alterar essa parte e você pode alterá-la se quiser, você pode clicar em outro lugar. Toe, tire-o deste mostrador uma caixa também, que é igual e de câncer. Se você tem uma confirmação tanto, vamos voltar em vez de sucesso, você pode dizer aquecimento. Nossas informações são outras. Estas são as quatro opções que estão documentadas aqui. Vamos para a documentação de alerta doce. Você pode ver que há ícones de aviso, erro de sucesso em, para estas são as quatro possibilidades diferentes. Então, desde que eu selecionei Aviso, você não deve ver um ícone de aviso com o mesmo título e texto. Então clique em OK para sair da mesma coisa agora. Nós também podemos especificar estes em geralmente como este inchar com a configuração Objeto no objeto figuração con pode ter algo como título que eu posso dizer lista telefônica Uh, eu posso especificar. Eu pon é dizer, por exemplo, em quatro eu posso dizer o seu texto, que é o segundo partier, qualquer que seja o dado para que o texto pode ser como você está nos detalhes de contato. Guarde isso. Voltar para o aplicativo recarrega chute neste teste para alerta doce e vemos que caixa de diálogo semelhante que está chegando para que também possamos ter caixas de diálogo de confirmação. E isso é exatamente o que queremos fazer em caso de atraso. Então, por enquanto, não preciso mais disso. Alguém que o tire disto, salva-o. Remova este botão em particular em breve. Isso volta ao meu núcleo em Aqui é onde eu quero especificar o que fazer agora. Quando as urnas de confirmação exibidas, teremos que sobrecarregar e podemos definir o valor para esses botões em particular. Por exemplo, o primeiro talvez não seja verdade. Segundo botão, talvez cai ou pode ser 1234 etcetera. Quando você chama este mau funcionamento, ele retorna a promessa Onda, nós temos que chamar esta função de apagar contato. Quando as promessas resultarem, não teremos mais isso. Vamos dizer aqui, Suad, Suad, em algum objeto de configuração e dizemos que quando houver uma guerra, tiramos o valor do botão. Isso é qualidades resultam em Então, usando esse resultado, dizemos que se o resultado é igual a verdade, então gostaríamos de fazer esta parte. Alguém corte isso e cole aqui. Então, basicamente, agora temos a promessa. Quando as promessas resultam, verificamos qual botão foi clicado. Foi o verdadeiro Burton ou o botão falso? Se o botão falso não estamos fazendo nada, talvez você possa simplesmente dizer que o registro não é excluído, mas caso contrário, isso é o que queremos fazer. E a configuração agora pode ter algo como título. Podemos dizer que você é um voto para eliminar este conflito. Em seguida, será colocado em a partir de. Então eu posso dizer importância, que é um ari no primeiro botão, é suposto ser como, Sim, eu quero excluir isso. Então este não será o D Para apenas o último botão será o padrão, então eu posso especificar o próximo fora o botão acontece para ser como, Sim, Sim, eu tenho certeza Andi, Então, se você está permanecendo visível, é verdade . O valor também é verdadeiro. Então este é o que nós estamos realmente recebendo como um valor resultado aqui uma vez que eu obter o valor do resultado como verdadeira Sarette tentando excluir isso. Da mesma forma, Eu também vou dar-lhe outro, que é um buscado você pode dizer cancelar em e verdade visível, que não é necessário para o segundo botão e, em seguida, valor East Falls. Então, quando você clica no segundo botão, é como se você fosse clicado no botão Cancelar e o resultado é falso. Por isso, esta condição é ignorada e o registro não é excluído. caixa de diálogo fecha de qualquer maneira, então vamos salvar isso. Volta para a Rosa, há um botão de apagar. Vamos clicar no botão de exclusão. Vai dizer que você está prestes a apagar esse contato, por favor. Confirma S. Tenho certeza que cancelei. Cancelando simplesmente removerá a caixa Della e você ficará aqui. Mas se eu clicar em excluir e dizer sim, tenho certeza que a ação real que está excluindo o contato ocorrerá. E depois da liderança, nós não vamos mais estar neste espaço, mas ele vai levá-lo para a lista de contatos em você pode ver que ele foi excluído agora. Então, vamos voltar para o dedo do pé. Mais um contato. Quando eu disse aldeia, eu poderia querer especificar que é um aviso ou um erro. Um aviso seria melhor. Então eu posso dizer aqui que, juntamente com a importância do texto título, eu também posso dizer Ícone está avisando sobre. Coloque uma vírgula. Salve isso. Voltem para trás. Se eu chutar no botão excluir agora você verá que há um aviso. Você está prestes a apagar essa confirmação da polícia de contato? Sim, tenho certeza. Cancelar Aldeia de Leitura. Sim. Tenho certeza que apagará o registro. 35. Construindo e implantando: nosso aplicativo de lista telefônica agora está pronto. E vamos dar uma olhada na pasta que temos, então ela está na minha área de trabalho. Neste é o aplicativo da lista telefônica e no McElroy Zika Press Space Bar. Eu recebo informações sobre o diretório, e você pode ver que é 302.4 e estar com 10 itens. Esta pasta específica consiste em vários arquivos, sugere Jason Files. Eu tenho arquivos de script nem modelos com pacotes representam instalados externamente, que ocupou a maior parte do nosso espaço de trabalho de aplicativos. Para executar este aplicativo, abrimos uma frente de homem no espaço de trabalho. Vou abrir um novo terminal. Eles foram a cidade, a lista telefônica de ações e depois a ONG. Portanto, há também uma mensagem de aviso de que este é um servidor simples usado para testes. RT. Reservar aplicações angulares localmente não pode ser o nosso não deve ser usado na produção. Ele também gerou um monte de Charles poderia arquivos que não estão fisicamente disponíveis ainda . Mas se eu ir para navegador e abrir local que é predito de um zero chamado a preocupação do desenvolvedor , você verá que na rede há muitos arquivos que teriam vindo então Todos esses amigos estão agora disponíveis aqui, mas não fisicamente disponível em qualquer lugar, então esses arquivos devem ser necessários. Quando empurramos isso no reboque um servidor de produção. Além disso, se você vai ver a pontuação fonte real HTML, você vai ver que há desenraizamento barra barra, que está lá em nossa aplicação também, assim você pode ver que sob índice SRC, HTML aprovou barra desenraizar-se. Mas entre a barra desenraizamento e o corpo da barra, você pode ver que há muito fora injeção de script que ocorreu. Então, na realidade, precisamos deste índice html em não eles cercaram Mel o que estamos tendo em nosso diretório de aplicativos . Então, a fim de converter este aplicativo em um formato que pode ser dado a um servidor de produção , temos toe compilar todos os nossos arquivos PS no reboque. Apropriado. HTM e criança estava embriagado como um tempero, e este processo é chamado de construção. A Andi. É muito simples porque angular vem com suas próprias ferramentas de construção. Então, se uma boa do pacote Doc Jason aqui, você pode ver que há um comando chamado Build que representa n g build onda. Nós também podemos executar a conta de energia diretamente Então vamos dar uma olhada nisso no prompt de comando. Então eu vou parar. Os desenvolvimentos valem a pena pressionando o controle Z e, em seguida, tipo n g construir realizou um monte de opções aqui. Podemos não estar usando todos eles. A primeira coisa que você tem que olhar é o uso. Ele diz n g construir, que é um espaço de trabalho do projeto em, em seguida, as opções. Agora, se você omitir o projeto, que espaço? Assumirá que você está trabalhando com ele mesmo. Existem poucas outras opções, como um Woody, que é chamado antes da compilação do tempo. Vamos discutir isso em um vídeo separado. Então você tem algo chamado baseado Um verdadeiro se o Ural fora do aplicativo que está sendo construído. Nós também vamos ter um olhar sobre isso quando nós construirmos sobre. Se você tiver um problema, como isso pode nos ajudar? Existem algumas outras opções. Um deles é o problema do lixo. Quando true define a configuração da conta para o destino de produção, estas são as duas únicas opções que podemos estar gravando para usar Dash es Kort. E isso é apenas o produto que vai tentar isso fora como fora. Agora, se você ver que não há nenhuma lista de canto de pasta, quando você terminar o processo de compilação que esta pasta é criada automaticamente que inicia a construção de energia. Isso é errado nisso. Apenas um corpo pressione entrar, dependendo da velocidade do tamanho do computador do aplicativo. Isso pode levar algum tempo, então, no meu caso, levou quase 35 segundos, o que é bastante tempo. Há poucos arquivos que você pode ver o ponto de tempo de execução Js, que é 1,41 kilobytes gerenciadores, que é apenas 388 kilobytes em. Praticamente todos eles são incubados, e você também pode ver que o bootstrap que adicionamos foi externalizado em estilos em algum número de hash, Garcia diz. Assim, o estilo, por exemplo, é um 136 kilobytes. Mas se você quiser comparar isso com o que geramos durante, os desenvolvimentos são trabalho. Então, se eu rolar para cima, você pode ver que estilos Js é que em um ponto 09 MB. Wender Jay etcetera são 4.0 dedos MBI, que é tudo em megabytes e ouvir que tudo está em kilobytes. Se você também ver a nova estrutura do diretor, há esta pasta que eu posso ver. O que há naquela pasta de teste. Consiste no diretor do aplicativo da lista telefônica. É assim que o projeto para construir um diretório tem alguns arquivos de licença, todos os ativos que tínhamos, como imagens. Estão todos guardados aqui um D de Fair Wycombe. Mas podemos mudar. Há apenas um único HTML, mesmo que tenhamos criado um. HTM. E para cada um dos quatro componentes, tudo é empacotado no reboque. Cadeiras da porta principal. Não há arquivos HTML adicionais, portanto, isso é chamado como um conteúdo estático fora do seu aplicativo. Então, quando isso é implantado e acesso por um poser, então esse aplicativo é executado no navegador do cliente. Portanto, não há serviço, um requisito fora do curso. Ainda temos nosso requisito final de descanso. Mas depois que a implantação dos EUA está preocupada, esses são os arquivos que temos que implantar em um servidor de produção para implantação. Há muitas opções que temos a opção número um seria um CD em que significam rede de entrega de conteúdo . Há uma hospedagem compartilhada, como a que estou usando no Go Daddy, existem plataformas mais baixas como Google Cloud ou Amazon Cloudwatch. E há muitas, muitas opções que você tem para nós. Conceito mais próximo. Um dos sírios que podemos explorar é o que a escola pesquisou nossa mensagem. Este é um sírio para hospedar sites estáticos com alguns sub-domínios, bem como prejudica o passado . Se você vai para o preço, você pode ver que há um uso gratuito de nível que tem opções de publicação ilimitadas . Cast mina SSL básico. Tudo que você tem que fazer é começar a usá-lo. Não há absolutamente nenhuma corda que teste. Havia também US $30 por mês opções que tem projetos ilimitados, editor ilimitado, personalizado domínio personalizado, SSL e muitos outros recursos. É claro que, para fins de demonstração, usaremos esta opção gratuita na forma como você pode começar a trabalhar. Isto é muito simples. Deixe-me demonstrar o mesmo. A primeira coisa que 1.000.000.000 a fazer é rebocar. Instale isto no seu computador usando o NB. M. Instalado esse chefe todo global em anti busca. Então eu corri para este problema durante a instalação porque no Mac, a fim de instalar um pacote global, nós temos que rodar com os comandos sudo quando você ouvir este pseudo em tempo real e nós fomos famintos Death G, e então eles pesquisam no e desta vez não deve haver um problema e ele foi instalado com sucesso. E se eu levar sua busca que a saúde do esconderijo, ele vai me dar algumas opções que o comando aqui toe melhor que eu amei em nós. E se eu o amei, posso trancar para fora. Posso entrar de volta. Posso listar todos os projetos que implantei. Posso limusine um projeto. Eu também posso ver que tipo de plano é meu. Então é muito, muito simples notar que eu não criei conta ainda, então eu vou ter que fazer é rebocar Executar o comando de pesquisa, e ele vai me perguntar O que é o aviso de e-mail que ele está indo para o login se meu e-mail já existe, ou limpará a nova conta de pesquisa inserindo o novo e-mail na senha. Então eu aluguei meus e-mails. Andi, vai me perguntar, qual é a senha na senha? Pode ser uma nova senha. Se você é um usuário pela primeira vez terminou e, em seguida, ele vai pedir que você assista o local do projeto. Agora está encontrando meu trabalho diretamente, que está na parada para olhar para cima. Mas o que eu quero implantar está na melhor lista telefônica e então eu fui carinhoso . Isso dura-me. O que é isso? Oh, meu nome. Dá-te nomes engraçados. Adições, como neste caso trouxeram operetas. Eu não quero isso. Eu vou dizer N g sete lista telefônica em que eu pressionei Enter. No caso de este embora meu nome N G sete lista telefônica já foi usado por outra pessoa, ele vai me dar um outro ditado que você não tem acesso a este divino particular. Mas se esta é a sua própria mente e você está tentando especificar o meu nome Dr., ele simplesmente substituirá sem perguntar. Então tenha cuidado com isso, porque Ender parece Engy sete lista telefônica waas disponíveis. E agora foi publicado com sucesso rebocar n g sete livro telefônico. Vamos para o Ural e depois dar uma olhada em como isso parece para que eu possa ir para um navegador aberto. E você aquele ponto da lista telefônica diz que você é uma imprensa. Digite e você pode ver que meu aplicativo agora é servido de um servidor Web remoto, não de local no topo. Mas há um pequeno problema aqui porque quando eu vou para uma lista de contatos aqui, a lista de contatos mais apta de um ponto final de descanso local. Por exemplo, se eu ir para o console do desenvolvedor e olhar para a guia Rede, por exemplo, solicitações http chute na lista de contatos. Você verá que ele volta com um para não para melhor para que você possa dar uma olhada nisso. Tinha uma mensagem aqui. Diz que o local 43 duplo zero barra contato página número um se falhar. Portanto, obviamente, temos de garantir que o nosso ponto de descanso esteja a funcionar. Então eu vou voltar para a frente de comando, NPM executar Jason serviu Ender e, em seguida, voltar para o navegador Ir para casa e voltar para a lista de contatos, e agora podemos ver nossa lista de contatos está disponível. Agora você deve entender angular é apenas sobre a frente, e por isso somos capazes de implantar com sucesso o amigo e aplicativo para um servidor de produção . No entanto, se você for angular, aplicativo depende de alguns pontos de extremidade melhores. Você precisa fornecer um endereço de endpoint de descanso válido. Neste momento,não temos isso, não temos isso, mas se você tiver acesso a um ponto de extremidade de repouso remoto, atualize-o. Então, em nossa aplicação, ele vai ser dado em SRC em listas telefônicas de serviço que começamos aqui. Então este é o local que temos que mudar para acessar este ponto de restaurante partir de mais endpoint. Mais uma opção de implantação que temos é implantando em um servidor de hospedagem compartilhada. Deixe-me abrir minhas opções de painel GoDaddy aqui. Será que meus produtos ouvi-los um opções de hospedagem? Eu acho que em gerenciar aqui eu tenho Ah, gerente de arquivos. Posso ouvir uma nova pasta com o nome fora da cabine telefônica N G 7. Si. OK. E que quatro lá foi criado bem aqui, então eu abri o mesmo. há absolutamente nenhum arquivo nele agora. Tudo o que eu tenho que fazer é ir à lista telefônica de teste para selecionar todos esses arquivos Dragon bêbado aqui. Onda. Uma vez que ele é carregado, agora temos acesso toe nosso aplicativo a partir de uma hospedagem compartilhada para que eu possa ir dedo do pé, a fim lidar barra n g sete telefone agenda ender. Você pode ver que parece haver um erro. Vamos dar uma olhada no melhor. Os editores são todos relacionados com a rede. Se você ver que há um editor grunhindo Js Polly Villages. Agora, a razão para isso acontece a ser a localização fora de cada um dos arquivos gerados. Então, por exemplo, se você apenas mover o mais sob taters Reagan sabemos escuro barra legal ponto principal hash numerado R J s enquanto era suposto ter vindo de n g sete barra da lista telefônica significa agora este é o lugar onde o baixo xerife chefe entra em cena. Se eu ver a fonte da praia aqui, você pode ver que lá que o chamado natureza baseada de igual a dois barra que era suposto ser barra n g sete barra de lista telefônica Isto pode ser abordado de duas maneiras. Agora um dos caminhos está indo toe índice html Aqui, editar que à deriva é igual toe barra n g sete lista telefônica barra Salve. E quando eu voltar aqui em recarga, você não deve ver que não há nenhum problema com isso ligado. Nós somos capazes de acessar a lista de contatos foram capazes de visualizá-los foram capazes de editá-los em. Seremos capazes de excluir todas as coisas que somos capazes de fazer sem qualquer problema. O segundo método está nas opções de compilação que tínhamos visto anteriormente. Havia uma opção chamada xerife baseado. Então, enquanto a construção em si, poderíamos ter especificado traço Basij de Igual a dois barra n g sete livros estrangeiros barra. Então, este é o quão fácil é construir sua aplicação angular e implantado no dedo do pé ou sírio como mensagem de cirurgia ou um compartilhamento de hospedagem como Go Daddy. 36. Compilação JIT e AOT: uma vez que estamos desenvolvendo aplicação angular usando typescript por No, você deve estar ciente de que angular usa um compilador para transformar sobre tipos. Ser chamado para um trabalho tão bom ex-que fecha pode entender. Angular vem com dois tipos de compiladores. Um é chamado JT são apenas em 10 compilador. O outro é um corpo que está à frente do tempo. Combine ER, a compilação de desenvolvimento padrão usa um compilador jit. Então, quando executamos o NJ Star Command por padrão, desenvolvimento, compilação é gerado. E, portanto, o compilador Jit é usado para entender o mesmo. Vamos construir nossa aplicação. Ele estava no comercial em Djibouti, que antes usa as opções de construção de desenvolvimento. Então, quando eu pressionei Enter, ele gerou o cálice necessário poderia encontrar. Um dos arquivos aqui é o RJ renderizado, que compreende off compilador angular e framework angular. Também vemos uma multa mapa para cada um dos JavaScript. Isso pode ser usado para explorar o conteúdo de um determinado JavaScript e suas dependências . Para isso, precisamos instalar uma ferramenta fonte Caldas. Mapear Explorer e vamos instalar o mesmo NPM. Eu forneço meu explorador. Agora temos um comando call source map Explorer na pasta North Modules barra Dark bin para explorar o RJ's renderizado Vamos digitar o comando dark slash north modules dot sendo barra source Map Explorer, seguido pelas cobranças do fornecedor que está lá na pasta de disco Lista telefônica em Render Chase. Então, eu pressiono nos enviar. Isso abre uma alegria no navegador, explorando vários aspectos fora de IGs renderizados você pode ver a filha diz que a renderização persegue 3.8 nb, ou média mais de 50% de desconto que é ocupado pela estrutura angular e o angular compilador. Então, se usarmos esta compilação, lutar e executar o aplicativo, cada componente de diamante tem que ser carregado. O compilador entra em imagem, reclama que a Índia JavaScript pela primeira vez e, em seguida, serve para o Broza. Os requisitos subsequentes usarão os arquivos obtidos Charles gerados. Agora podemos explorar o que acontece quando você está usando a inicialização de produção interrompendo este aplicativo e reconstruindo nosso aplicativo usando a opção dash dash broad. Então eu posso dizer Engy Build Broad, que inclui o compilador Woody A. Há duas coisas que você pode observar. Número um é que não há arquivos de mapa gerados, juntamente com as lutas JavaScript e isso é simples. Podemos adicionar outro flak ou tracejado nosso mapa de origem. Mas o mais importante, não há nenhum RJ renderizado em si. E esta é a família, porque a maior parte da perseguição do fornecedor era a estrutura no próprio compilador, que não estão mais lá. Então, ele é combinado com as principais igrejas em que está para que possamos explorar o ponto principal Js em. Também podemos gerar as tochas de janela explicitamente adicionando outro voo. Então vamos emitir o comando N g will. Isso é apenas um problema. Dash traço. Tão esperta. E isso é apenas quando o bloco nenhum outro Window GS, que é apenas 349 kilobytes em comparação com 3.8 nb fora da parte anterior. Então vamos explorar o mesmo dia barra escura nem módulos, fonte de barra escura. Minha porta explorador lista barra lista de telefone barra ab barra amigo ordem Js E agora você pode ver que não há compilador, bem como o quadro angular foram incluídos neste. Este foi o anterior que ocupou 3.8 e ser mais de 50% é o framework no compilador e não há nenhum compilador aqui, o que significa que todo o nosso tribunal tipográfico é convertido em JavaScript durante o próprio processo de construção . Portanto, se houver algum erro, como erros de vinculação de modelo, eles serão relatados durante a própria compilação. Mas como no desenvolvimento Washington, a compilação acontece tempo Darren. Portanto, a menos que haja um editor durante o tempo, ele não será relatado em tudo. Vamos entender o mesmo confirmando um erro de ebulição de modelo explicitamente e ver se o outro é relatado na hora errada ou na hora do construtor. Então eu vou para o núcleo. Eu vou para um dos componentes. Vamos para o outro componente de contato no DIA. Isso é claro que uma função nos chamou. Obter detetive retorna exatamente uma string em um novo contato e vamos chamar essa função em nosso HTML usando um duplo live como ele ficar intitulado em apenas para ter certeza de que temos um modelo de planejamento outro, vamos deliberadamente dar get Título sublinhado como uma função chamada Salvar isso. Vamos voltar ao prompt de comando. Parar o mapa de origem Explorer e usar o comando na alma, que por padrão usa a conta de desenvolvimento. Quando eu pressionei enter, você pode ver que não havia outro e disse, compilado com sucesso. Ele ganhou o outro modelo de ligação juntos. Então vamos para o navegador. Andi, abra o host local 47 0 e você pode ver que o aplicativo está sendo executado com êxito. Eu deveria ser capaz de ir para outros componentes, mas quando eu vou para o nosso novo contato, você verá que não há nenhum título e isso é principalmente porque agora que o componente de contato artístico é carregado, o compilador Jit tenta compilar que enfrenta, um modelo de ligação melhor. E que outro é relatado no console dizendo Get sublinhado Título não é uma função, então não há erro durante o processo de construção, mas, ao mesmo tempo, temos um erro. Agora vamos dar uma olhada no que acontece com uma opção woody. Então deixe-me fechar. Desta vez eu volto para o comando. Prompt confiança controla ele para parar isso, limpar o tipo de grito que o Comando Engy serviu com uma bandeira fora de um corpo que está incluído. Se você está fazendo Engy construir traços produto e que é ender, você deve ver que não há melhor indicando um modelo de ligação melhor, e você pode ver que o projeto de lei é falhou e eu não posso abrir um novo ataque, local primeiro para um duplo zero porque os edifícios completos falharam neste ponto no tempo, e apenas para se certificar de que isso é feito com sucesso. Se não houver edição, salve isso. Volte para o comando. Controle imediato, Veja para parar isso valem a pena no mesmo vir. E o que é mais desta vez não temos qualquer tipo de exaltação de combate, outros por causa dos quais nossos edifícios bem-sucedidos no aplicativo podem ser abertos sem qualquer problema também. 37. CONCLUSÃO: regulamentos sobre a conclusão deste curso. Este curso termina aqui para aprender continua. Espero que tenha se beneficiado com as pontuações e gostado de aprender. Angular. Por mais que tenha gostado de criar este curso, agradeço-vos sinceramente por produzirem o discurso e desejo-vos sucesso no vosso futuro. Se tiver alguma dúvida sobre as minhas palestras ou demonstrações, não hesite em voltar. Seu feedback me ajudou a empregar meus futuros cursos. Mais uma vez. Obrigado e desejo-lhe todo o melhor.