1 00:00:04,070 --> 00:00:07,050 Ok, ok, ti sento dire. 2 00:00:07,050 --> 00:00:08,280 Andiamo avanti, 3 00:00:08,280 --> 00:00:09,835 mostrami un po' di codice. 4 00:00:09,835 --> 00:00:13,440 In effetti, inizieremo a creare la 5 00:00:13,440 --> 00:00:17,770 nostra applicazione Angular in questo primo esercizio. 6 00:00:17,770 --> 00:00:21,145 Useremo l'interfaccia a riga di comando 7 00:00:21,145 --> 00:00:28,020 angolare, la CLI angolare per impalcare la nostra applicazione angolare in questo esercizio. 8 00:00:28,020 --> 00:00:31,690 Quindi, mentre passiamo attraverso il resto degli esercizi in questo corso, 9 00:00:31,690 --> 00:00:36,180 costruiremo la nostra applicazione Angular passo dopo passo. 10 00:00:36,180 --> 00:00:44,195 L' Angular CLI è un modo molto conveniente per creare un'applicazione Angular. 11 00:00:44,195 --> 00:00:48,620 L' applicazione angolare creata dalla CLI angolare segue le 12 00:00:48,620 --> 00:00:53,290 guide di stile suggerite dagli sviluppatori del framework angolare. 13 00:00:53,290 --> 00:00:56,405 Possiamo usare la CLI angolare per impalcare 14 00:00:56,405 --> 00:01:00,980 molte parti della nostra applicazione angolare compresi i componenti, 15 00:01:00,980 --> 00:01:04,275 i servizi della nostra applicazione angolare. 16 00:01:04,275 --> 00:01:08,480 La CLI angolare viene fornito anche con un proprio server integrato, 17 00:01:08,480 --> 00:01:14,405 che possiamo usare per servire l'applicazione angolare mentre stiamo costruendo, 18 00:01:14,405 --> 00:01:17,930 e quindi visualizzare la nostra applicazione angolare 19 00:01:17,930 --> 00:01:22,870 nel browser come anteprima live della nostra applicazione. 20 00:01:22,870 --> 00:01:24,805 Come quando apportiamo modifiche, 21 00:01:24,805 --> 00:01:28,940 le modifiche verranno riflesse immediatamente nel browser. 22 00:01:28,940 --> 00:01:33,650 Questo è il motivo per cui ho scelto di utilizzare la CLI Angular come 23 00:01:33,650 --> 00:01:39,365 approccio per costruire la nostra applicazione Angular in questo corso. 24 00:01:39,365 --> 00:01:43,100 Per iniziare, vai in una posizione comoda sul 25 00:01:43,100 --> 00:01:46,490 tuo computer e crea una cartella denominata Angular. 26 00:01:46,490 --> 00:01:52,065 Quindi, ho intenzione di iniziare a passare alla mia cartella documenti Coursera. 27 00:01:52,065 --> 00:01:58,260 Ecco dove memorizzo tutti i miei file per il mio corso Coursera, 28 00:01:58,260 --> 00:02:03,230 e poi creerò una cartella 29 00:02:03,230 --> 00:02:08,955 denominata Angular e quindi una mossa nella cartella Angular. 30 00:02:08,955 --> 00:02:15,505 Ora, stiamo andando a creare la nostra applicazione angolare all'interno di questa cartella. 31 00:02:15,505 --> 00:02:21,080 Il primo passo che facciamo in questo esercizio consiste nell'installare l'interfaccia CLI angolare. 32 00:02:21,080 --> 00:02:22,525 Quindi, al prompt, 33 00:02:22,525 --> 00:02:32,700 digitare npm install -g @angular /cli @ 6.2.1. 34 00:02:32,700 --> 00:02:35,430 Ora, ogni volta che installo un modulo NPM, 35 00:02:35,430 --> 00:02:39,725 specificherò anche la versione esatta del modulo NPM che sto installando. 36 00:02:39,725 --> 00:02:41,720 Ti esorto vivamente a installare 37 00:02:41,720 --> 00:02:44,930 la stessa versione del modulo NPM in modo da poter passare attraverso 38 00:02:44,930 --> 00:02:50,680 il resto degli esercizi senza avere alcun problema con gli esercizi. 39 00:02:50,680 --> 00:02:55,700 Quindi, in questo caso, sto installando la versione 6.2.1 della CLI Angular. 40 00:02:55,700 --> 00:02:58,310 Ora, se lo stai facendo su un Mac o Linux, 41 00:02:58,310 --> 00:03:02,565 non dimenticare il sudo davanti all'installazione di npm. 42 00:03:02,565 --> 00:03:05,095 L' installazione richiederà del tempo. 43 00:03:05,095 --> 00:03:08,095 Quindi, una volta completata l'installazione, 44 00:03:08,095 --> 00:03:13,655 la CLI angolare sarà disponibile sulla riga di comando. 45 00:03:13,655 --> 00:03:15,750 Una volta completata l'installazione, è 46 00:03:15,750 --> 00:03:18,885 possibile verificare che sia installata la CLI Angular. 47 00:03:18,885 --> 00:03:20,295 Una volta installato, 48 00:03:20,295 --> 00:03:25,190 potrebbe essere necessario riavviare il terminale 49 00:03:25,190 --> 00:03:30,835 affinché gli strumenti Angular CLI siano disponibili al prompt. 50 00:03:30,835 --> 00:03:35,390 La CLI angolare è disponibile digitando ng 51 00:03:35,390 --> 00:03:39,910 al prompt seguito da una serie di istruzioni aggiuntive. 52 00:03:39,910 --> 00:03:46,105 Quindi, il primo comando che proveremo è ng help, 53 00:03:46,105 --> 00:03:49,820 e questo elencherà un insieme di tutti gli altri comandi 54 00:03:49,820 --> 00:03:53,855 che la CLI Angular ci permette di eseguire. 55 00:03:53,855 --> 00:03:56,720 Ng come vedi sarà il prefisso di 56 00:03:56,720 --> 00:04:02,040 tutti i comandi Angular CLI che userai in questo corso. 57 00:04:02,840 --> 00:04:09,685 Questo elencherà un insieme di tutte le opzioni che la CLI angolare fornisce per noi. 58 00:04:09,685 --> 00:04:15,895 Impareremo molti di questi comandi mentre passiamo attraverso il resto di questo corso. 59 00:04:15,895 --> 00:04:18,930 Per creare una nuova applicazione Angular, 60 00:04:18,930 --> 00:04:21,545 creerò quell'applicazione 61 00:04:21,545 --> 00:04:25,660 nella cartella Angular in una sottocartella denominata Confusione. 62 00:04:25,660 --> 00:04:29,210 Se hai seguito il corso precedente su Bootstrap quattro, 63 00:04:29,210 --> 00:04:33,500 capiresti perché nomino questa applicazione come Confusione. 64 00:04:33,500 --> 00:04:35,000 Quindi, al prompt, 65 00:04:35,000 --> 00:04:40,905 digita ng new Confusione, 66 00:04:40,905 --> 00:04:45,945 e quindi userei sass come 67 00:04:45,945 --> 00:04:53,080 framework di stile CSS per la mia applicazione Angular. 68 00:04:53,080 --> 00:04:58,015 Quindi, specifico meno meno stile uguale a SCSS, 69 00:04:58,015 --> 00:05:01,610 e premo il ritorno e ci vorrà del tempo perché 70 00:05:01,610 --> 00:05:05,750 l'applicazione Angular venga creata nella cartella corrente. 71 00:05:05,750 --> 00:05:08,330 Una volta che l'applicazione viene installata, 72 00:05:08,330 --> 00:05:10,850 usiamo il server integrato 73 00:05:10,850 --> 00:05:16,100 dalla CLI angolare per compilare la nostra applicazione angolare e iniziare a servirla. 74 00:05:16,100 --> 00:05:18,650 Passare alla cartella Confusione, 75 00:05:18,650 --> 00:05:22,495 e al prompt, digitare ng serve, 76 00:05:22,495 --> 00:05:27,470 e attendere che il server Angular Live Development per 77 00:05:27,470 --> 00:05:33,115 iniziare e costruire la nostra applicazione Angular e iniziare a servire l'applicazione. 78 00:05:33,115 --> 00:05:35,175 Una volta completato 79 00:05:35,175 --> 00:05:39,920 , noterai che questa applicazione sarà disponibile digitando 80 00:05:39,920 --> 00:05:50,425 un http://localhost:4200 nella barra degli indirizzi del nostro browser. 81 00:05:50,425 --> 00:05:53,975 È possibile lasciare il server di sviluppo in esecuzione continua. 82 00:05:53,975 --> 00:05:57,020 Quando si apportano modifiche all'applicazione Angular, 83 00:05:57,020 --> 00:06:01,520 il server ricompilerà automaticamente le modifiche e quindi 84 00:06:01,520 --> 00:06:06,320 inizierà a servire l'applicazione Angular aggiornata all'interno del browser. 85 00:06:06,320 --> 00:06:13,370 Quindi, questo sarebbe un ottimo modo per guardare in diretta le modifiche che apporti 86 00:06:13,370 --> 00:06:16,760 all'interno dell'applicazione Angular che vengono immediatamente riflesse 87 00:06:16,760 --> 00:06:21,265 nel browser in cui visualizzi la tua applicazione Angular. 88 00:06:21,265 --> 00:06:28,610 Se vai al browser e accedi all'applicazione Angular su localhost: 4200, 89 00:06:28,610 --> 00:06:31,135 vedi che l'applicazione inizia a funzionare 90 00:06:31,135 --> 00:06:36,835 e servirà questo insieme di parole nel nostro browser. 91 00:06:36,835 --> 00:06:42,140 Quindi, questa è un'applicazione molto semplice che bare-bones applicazione angolare per 92 00:06:42,140 --> 00:06:47,490 iniziare a sviluppare la tua applicazione angolare. 93 00:06:47,490 --> 00:06:52,460 Stiamo andando a costruire su questa applicazione scaffolded da Angular CLI, 94 00:06:52,460 --> 00:06:57,420 implementando varie funzionalità come parte di questo corso. 95 00:06:57,420 --> 00:07:01,710 Se stai pianificando di utilizzare Git per la tua applicazione Angular per il controllo delle versioni, 96 00:07:01,710 --> 00:07:03,680 allora a questo punto, 97 00:07:03,680 --> 00:07:06,980 potrebbe essere una buona idea inizializzare il tuo repository Git. 98 00:07:06,980 --> 00:07:12,620 La CLI angolare esegue automaticamente l'inizializzazione del repository Git, 99 00:07:12,620 --> 00:07:18,765 e quindi il primo commit con il commit iniziale del messaggio al repository Git. 100 00:07:18,765 --> 00:07:23,610 Controlliamo lo stato del nostro repository Git. 101 00:07:23,610 --> 00:07:28,310 Consente di controllare digitando git log 102 00:07:28,310 --> 00:07:29,600 una riga e vedrete che 103 00:07:29,600 --> 00:07:33,020 la configurazione iniziale è stata impegnata nel nostro repository Git. 104 00:07:33,020 --> 00:07:36,920 Ora, possiamo iniziare a lavorare sulla nostra applicazione angolare che 105 00:07:36,920 --> 00:07:41,020 abbiamo impalcato in questa cartella qui. 106 00:07:41,020 --> 00:07:46,800 Se scegli di sincronizzare il tuo repository Git con un repository online, 107 00:07:46,800 --> 00:07:52,160 assicurati che il tuo repository online sia un repository privato. 108 00:07:52,160 --> 00:07:56,835 Bitbucket consente di creare repository privati gratuiti. 109 00:07:56,835 --> 00:08:01,580 Quindi, vai avanti e configura il tuo repository Git su Bitbucket. 110 00:08:01,580 --> 00:08:04,350 Con questo, completiamo il nostro esercizio. 111 00:08:04,350 --> 00:08:06,395 In questo primo esercizio, 112 00:08:06,395 --> 00:08:08,635 abbiamo installato la CLI angolare. 113 00:08:08,635 --> 00:08:14,060 Quindi, abbiamo impalcato la nostra applicazione Angular su cui 114 00:08:14,060 --> 00:08:22,150 lavoreremo per sviluppare ulteriormente come parte del resto degli esercizi in questo corso.