1 00:00:04,070 --> 00:00:07,050 Ok, ok, eu ouço você dizer. 2 00:00:07,050 --> 00:00:08,280 Vamos continuar com isso, 3 00:00:08,280 --> 00:00:09,835 mostre-me algum código. 4 00:00:09,835 --> 00:00:13,440 Na verdade, vamos começar a criar 5 00:00:13,440 --> 00:00:17,770 nosso aplicativo Angular neste primeiro exercício. 6 00:00:17,770 --> 00:00:21,145 Vamos usar a interface de linha de comando Angular, 7 00:00:21,145 --> 00:00:28,020 o Angular CLI para andaime nossa aplicação Angular neste exercício. 8 00:00:28,020 --> 00:00:31,690 Então, à medida que passarmos pelo resto dos exercícios deste curso, 9 00:00:31,690 --> 00:00:36,180 vamos construir a nossa aplicação Angular passo a passo. 10 00:00:36,180 --> 00:00:44,195 O Angular CLI é uma maneira muito conveniente de criar um aplicativo Angular. 11 00:00:44,195 --> 00:00:48,620 O aplicativo Angular criado pela Angular CLI segue o estilo 12 00:00:48,620 --> 00:00:53,290 guias sugeridos pelos desenvolvedores de framework Angular. 13 00:00:53,290 --> 00:00:56,405 Podemos usar o Angular CLI para andaime 14 00:00:56,405 --> 00:01:00,980 muitas partes da nossa aplicação Angular incluindo os componentes, 15 00:01:00,980 --> 00:01:04,275 os serviços da nossa aplicação Angular. 16 00:01:04,275 --> 00:01:08,480 O Angular CLI também vem com seu próprio servidor embutido, 17 00:01:08,480 --> 00:01:14,405 que podemos usar para servir o aplicativo Angular como estamos construindo, 18 00:01:14,405 --> 00:01:17,930 e depois ver nosso aplicativo Angular em 19 00:01:17,930 --> 00:01:22,870 o navegador como uma prévia ao vivo de nosso aplicativo. 20 00:01:22,870 --> 00:01:24,805 Como quando fazemos alterações, 21 00:01:24,805 --> 00:01:28,940 as alterações serão refletidas imediatamente no navegador. 22 00:01:28,940 --> 00:01:33,650 Essa é a razão pela qual eu escolhi usar o Angular CLI como 23 00:01:33,650 --> 00:01:39,365 a abordagem para construir nossa aplicação Angular neste curso. 24 00:01:39,365 --> 00:01:43,100 Para começar, vá para um local conveniente em 25 00:01:43,100 --> 00:01:46,490 seu computador e crie uma pasta chamada Angular. 26 00:01:46,490 --> 00:01:52,065 Então, eu vou começar movendo para meus documentos pasta Coursera. 27 00:01:52,065 --> 00:01:58,260 É onde eu guardo todos os meus arquivos para o meu curso Coursera, 28 00:01:58,260 --> 00:02:03,230 e, em seguida, criarei uma pasta 29 00:02:03,230 --> 00:02:08,955 chamada Angular e, em seguida, um movimento para a pasta Angular. 30 00:02:08,955 --> 00:02:15,505 Agora, vamos criar nosso aplicativo Angular dentro desta pasta. 31 00:02:15,505 --> 00:02:21,080 O primeiro passo que fazemos neste exercício é instalar o Angular CLI. 32 00:02:21,080 --> 00:02:22,525 Então, no prompt, 33 00:02:22,525 --> 00:02:32,700 digite npm install -g @angular /cli @ 6.2.1. 34 00:02:32,700 --> 00:02:35,430 Agora, sempre que instalo um módulo NPM, 35 00:02:35,430 --> 00:02:39,725 também especificarei a versão exata do módulo NPM que estou instalando. 36 00:02:39,725 --> 00:02:41,720 Eu gostaria fortemente que você instale 37 00:02:41,720 --> 00:02:44,930 a mesma versão do módulo NPM para que você possa passar 38 00:02:44,930 --> 00:02:50,680 o resto dos exercícios sem ter nenhum problema com os exercícios. 39 00:02:50,680 --> 00:02:55,700 Então, neste caso, estou instalando a versão 6.2.1 do Angular CLI. 40 00:02:55,700 --> 00:02:58,310 Agora, se você estiver fazendo isso em um Mac ou Linux, 41 00:02:58,310 --> 00:03:02,565 não esqueça o sudo na frente da instalação do npm. 42 00:03:02,565 --> 00:03:05,095 A instalação levará algum tempo. 43 00:03:05,095 --> 00:03:08,095 Assim, uma vez concluída a instalação, 44 00:03:08,095 --> 00:03:13,655 então a Angular CLI estará disponível em sua linha de comando. 45 00:03:13,655 --> 00:03:15,750 Uma vez concluída a instalação, 46 00:03:15,750 --> 00:03:18,885 você pode verificar e ver se a Angular CLI está instalada. 47 00:03:18,885 --> 00:03:20,295 Uma vez instalado, 48 00:03:20,295 --> 00:03:25,190 talvez seja necessário reiniciar o terminal para 49 00:03:25,190 --> 00:03:30,835 para que as ferramentas Angular CLI estejam disponíveis no prompt. 50 00:03:30,835 --> 00:03:35,390 A Angular CLI está disponível digitando ng em 51 00:03:35,390 --> 00:03:39,910 o prompt seguido de um conjunto de instruções adicionais. 52 00:03:39,910 --> 00:03:46,105 Então, o primeiro comando que vamos testar é ng help, 53 00:03:46,105 --> 00:03:49,820 e isso irá listar um conjunto de todos os outros comandos 54 00:03:49,820 --> 00:03:53,855 que a Angular CLI nos permite executar. 55 00:03:53,855 --> 00:03:56,720 Ng, como você vê, será o prefixo para 56 00:03:56,720 --> 00:04:02,040 todos os comandos Angular CLI que você usará neste curso. 57 00:04:02,840 --> 00:04:09,685 Isto irá listar um conjunto de todas as opções que a Angular CLI fornece para nós. 58 00:04:09,685 --> 00:04:15,895 Vamos aprender muitos desses comandos à medida que percorrermos o resto deste curso. 59 00:04:15,895 --> 00:04:18,930 Para criar um novo aplicativo Angular, 60 00:04:18,930 --> 00:04:21,545 Eu vou criar esse aplicativo em 61 00:04:21,545 --> 00:04:25,660 a pasta Angular em uma subpasta chamada Confusão. 62 00:04:25,660 --> 00:04:29,210 Se você fez o curso anterior no Bootstrap quatro, 63 00:04:29,210 --> 00:04:33,500 você entenderia por que eu nomeei este aplicativo como Confusão. 64 00:04:33,500 --> 00:04:35,000 Então, no prompt, 65 00:04:35,000 --> 00:04:40,905 digite ng new Confusion, 66 00:04:40,905 --> 00:04:45,945 e então eu usaria sass como 67 00:04:45,945 --> 00:04:53,080 a estrutura de estilo CSS para minha aplicação Angular. 68 00:04:53,080 --> 00:04:58,015 Então, eu especifico menos estilo igual ao SCSS, 69 00:04:58,015 --> 00:05:01,610 e aperte o Return e vai levar algum tempo para 70 00:05:01,610 --> 00:05:05,750 o aplicativo Angular para ser criado na pasta atual. 71 00:05:05,750 --> 00:05:08,330 Uma vez que seu aplicativo é instalado, 72 00:05:08,330 --> 00:05:10,850 vamos usar o servidor embutido do 73 00:05:10,850 --> 00:05:16,100 o Angular CLI para compilar nosso aplicativo Angular e começar a servi-lo. 74 00:05:16,100 --> 00:05:18,650 Mover para a pasta Confusion, 75 00:05:18,650 --> 00:05:22,495 e no prompt, digite ng serve, 76 00:05:22,495 --> 00:05:27,470 e aguarde o servidor Angular Live Development para começar 77 00:05:27,470 --> 00:05:33,115 e construir nosso aplicativo Angular e começar a servir o aplicativo. 78 00:05:33,115 --> 00:05:35,175 Uma vez concluída, 79 00:05:35,175 --> 00:05:39,920 então você vai notar que esta aplicação estará disponível digitando 80 00:05:39,920 --> 00:05:50,425 a http://localhost:4200 na barra de endereço do nosso navegador. 81 00:05:50,425 --> 00:05:53,975 Você pode deixar o servidor de desenvolvimento funcionando continuamente. 82 00:05:53,975 --> 00:05:57,020 À medida que você faz alterações em seu aplicativo Angular, 83 00:05:57,020 --> 00:06:01,520 o servidor irá recompilar automaticamente as alterações e, em seguida, 84 00:06:01,520 --> 00:06:06,320 começar a servir o aplicativo Angular atualizado dentro do seu navegador. 85 00:06:06,320 --> 00:06:13,370 Então, esta seria uma boa maneira de assistir ao vivo as mudanças que você faz 86 00:06:13,370 --> 00:06:16,760 dentro do seu aplicativo Angular sendo imediatamente refletido 87 00:06:16,760 --> 00:06:21,265 no navegador onde você vê seu aplicativo Angular. 88 00:06:21,265 --> 00:06:28,610 Se você vai para o navegador e acessar o aplicativo Angular em localhost:4200, 89 00:06:28,610 --> 00:06:31,135 você vê que o aplicativo começa a funcionar, 90 00:06:31,135 --> 00:06:36,835 e ele vai servir este conjunto de palavras em nosso navegador. 91 00:06:36,835 --> 00:06:42,140 Então, este é um aplicativo muito simples que bare-bones Aplicação angular para 92 00:06:42,140 --> 00:06:47,490 começar com o desenvolvimento de sua aplicação Angular. 93 00:06:47,490 --> 00:06:52,460 Nós vamos construir sobre este aplicativo andaime da Angular CLI, 94 00:06:52,460 --> 00:06:57,420 implementando vários recursos como parte deste curso. 95 00:06:57,420 --> 00:07:01,710 Se você está planejando usar o Git para seu aplicativo Angular para versionamento, 96 00:07:01,710 --> 00:07:03,680 então neste momento, 97 00:07:03,680 --> 00:07:06,980 pode ser uma boa idéia inicializar seu repositório Git. 98 00:07:06,980 --> 00:07:12,620 A Angular CLI faz automaticamente a inicialização do seu repositório Git, 99 00:07:12,620 --> 00:07:18,765 e, portanto, o primeiro commit com a mensagem inicial commit para o repositório Git. 100 00:07:18,765 --> 00:07:23,610 Vamos verificar o status do nosso repositório Git. 101 00:07:23,610 --> 00:07:28,310 Vamos fazer check-out digitando git log 102 00:07:28,310 --> 00:07:29,600 uma linha e você verá que 103 00:07:29,600 --> 00:07:33,020 a configuração inicial foi confirmada no nosso repositório Git. 104 00:07:33,020 --> 00:07:36,920 Agora, podemos começar a trabalhar em nosso aplicativo Angular que 105 00:07:36,920 --> 00:07:41,020 tem andaimes nesta pasta aqui. 106 00:07:41,020 --> 00:07:46,800 Se você optar por sincronizar seu repositório Git com um repositório online, 107 00:07:46,800 --> 00:07:52,160 então certifique-se de que seu repositório online é um repositório privado. 108 00:07:52,160 --> 00:07:56,835 Bitbucket permite criar repositórios privados gratuitos. 109 00:07:56,835 --> 00:08:01,580 Então, vá em frente e configure seu repositório Git no Bitbucket. 110 00:08:01,580 --> 00:08:04,350 Com isso, completamos nosso exercício. 111 00:08:04,350 --> 00:08:06,395 Neste primeiro exercício, 112 00:08:06,395 --> 00:08:08,635 instalamos o Angular CLI. 113 00:08:08,635 --> 00:08:14,060 Em seguida, temos andaime nosso aplicativo Angular no qual vamos para 114 00:08:14,060 --> 00:08:22,150 trabalhar para desenvolver ainda mais como parte do resto dos exercícios deste curso.