1
00:00:00,000 --> 00:00:04,792
[musica]

2
00:00:04,792 --> 00:00:10,490
Benvenuti a questo corso sui
Framework Front-End in JavaScript: Angular

3
00:00:10,490 --> 00:00:16,178
Questo è il secondo corso nella specializzazione
sul full stack web e

4
00:00:16,178 --> 00:00:19,840
sulle applicazioni mobile multi piattaforma

5
00:00:19,840 --> 00:00:25,830
Questo corso tratta i framework JavaScript,
in particolare Angular

6
00:00:25,830 --> 00:00:30,070
Vi starete chiedendo, riguarda Angular 2
o semplicemente Angular?

7
00:00:30,070 --> 00:00:34,940
Chiariremo questo nella primissima
lezione di introduzione ad Angular

8
00:00:34,940 --> 00:00:35,740
in questo corso.

9
00:00:36,940 --> 00:00:39,390
Sono contento che abbiate deciso
di partecipare a questo corso.

10
00:00:39,390 --> 00:00:43,141
e spero che vi divertirete
andando avanti in questo corso.

11
00:00:44,766 --> 00:00:47,181
Prima di iniziare il corso,

12
00:00:47,181 --> 00:00:52,650
voglio assicurarmi che abbiate
sufficienti conoscenze di HTML e CSS

13
00:00:52,650 --> 00:00:59,448
e anche una buona esperienza pratica di JavaScript,
specialmente JavaScript ES 5

14
00:00:59,448 --> 00:01:04,526
A partire da questo corso,
utilizzeremo come linguaggio Typescript

15
00:01:04,526 --> 00:01:07,880
per la scrittura delle nostre applicazioni Angular

16
00:01:07,880 --> 00:01:11,463
Adesso, se vi state chiedendo:
Dovrei conoscere Typescript,

17
00:01:11,463 --> 00:01:15,870
ES 2015+ e le più recenti versioni di JavaScript?

18
00:01:15,870 --> 00:01:18,710
Bene, il vostro percorso potrebbe variare.

19
00:01:18,710 --> 00:01:23,050
Il mio approccio nell'apprendere questi
nuovi linguaggi consiste nell'iniziare ad utilizzarli

20
00:01:23,050 --> 00:01:24,900
e poi apprendere durante il percorso.

21
00:01:24,900 --> 00:01:27,230
Questo è quello che faremo in questo corso.

22
00:01:27,230 --> 00:01:32,208
In questo corso non ho intenzione esplicitamente
di presentarvi Typescript nello specifico

23
00:01:32,208 --> 00:01:36,884
ma al contrario mentre scriviamo il codice,
vi illustrerò varie

24
00:01:36,884 --> 00:01:41,842
caratteristiche di Typescript nel contesto
di Angular man mano che sviluppate

25
00:01:41,842 --> 00:01:47,190
l'applicazione Angular,
negli esercizi che fanno parte di questo corso.

26
00:01:48,330 --> 00:01:52,630
Un altro punto che mi piacerebbe fortemente
chiarire in questa fase

27
00:01:52,630 --> 00:01:57,600
è che considero lo sviluppo e
la progettazione web due parti separate.

28
00:01:57,600 --> 00:02:01,241
La prima parte è la progettazione in sé,
l'esperienza dell'utente o

29
00:02:01,241 --> 00:02:05,705
o progettazione dell'interfaccia utente,
il progetto visuale, la prototipazione, i colori,

30
00:02:05,705 --> 00:02:07,232
la grafica e l' animazione.

31
00:02:07,232 --> 00:02:10,477
E tutti quegli aspetti di come un sito web o

32
00:02:10,477 --> 00:02:15,170
anche un'applicazione mobile
devono essere progettati.

33
00:02:15,170 --> 00:02:18,367
Ora, esiste un'altro aspetto
che è la costruzione e

34
00:02:18,367 --> 00:02:22,183
la consegna delle applicazioni web
e delle applicazioni mobile.

35
00:02:22,183 --> 00:02:25,633
Adesso in questo corso,
ci concentreremo di più sulla costruzione

36
00:02:25,633 --> 00:02:27,464
e sulla consegna delle applicazioni web.

37
00:02:27,464 --> 00:02:32,450
Se siete in cerca dell'aspetto
di progettazione e sviluppo web,

38
00:02:32,450 --> 00:02:36,285
allora questo non è il corso adatto a voi.

39
00:02:36,285 --> 00:02:39,940
Quando mi riferisco alla consegna,
costruzione e

40
00:02:39,940 --> 00:02:44,440
sviluppo delle applicazioni web,
parliamo dell'apprendere le competenze

41
00:02:44,440 --> 00:02:50,020
che sono essenziali per trasformare
un progetto in codice funzionante.

42
00:02:50,020 --> 00:02:55,310
Così facendo qui, in questa specializzazione,
abbiamo già imparato Bootstrap 4.

43
00:02:55,310 --> 00:02:57,500
In questo corso,
apprenderemo Angular

44
00:02:57,500 --> 00:03:01,350
poi impareremo a conoscere Ionic e
NativeScript.

45
00:03:01,350 --> 00:03:06,780
E poi anche lo sviluppo lato server
utilizzando NodeJs e l'ecosistema NodeJs.

46
00:03:06,780 --> 00:03:10,240
Dunque questa è l'obiettivo
di questo corso in particolare.

47
00:03:10,240 --> 00:03:16,320
Quindi, stiamo parlando di sviluppo reale,
piuttosto che di progettazione di siti web.

48
00:03:16,320 --> 00:03:20,310
L'altra domanda che vi verrà in mente è:
Cosa è esattamente

49
00:03:20,310 --> 00:03:21,700
lo sviluppo web full stack?

50
00:03:21,700 --> 00:03:23,750
Se avete già seguito
il corso precedente,

51
00:03:23,750 --> 00:03:26,540
Vi ho presentato
lo sviluppo web full stack.

52
00:03:26,540 --> 00:03:29,930
In caso contrario,
la primissima lezione in questo

53
00:03:29,930 --> 00:03:34,430
corso sarà una piccola introduzione
allo sviluppo web full stack.

54
00:03:34,430 --> 00:03:39,900
E inseriremo questo corso nel
nel contesto dello sviluppo web full stack.

55
00:03:39,900 --> 00:03:42,830
Ecco perché nel primo corso
abbiamo coperto Bootstrap 4,

56
00:03:42,830 --> 00:03:46,470
in questo corso ci concentreremo su
su Angular.

57
00:03:46,470 --> 00:03:50,710
Poi, nel prossimo corso,
vedremo Ionic e Cordova per

58
00:03:50,710 --> 00:03:54,590
applicarlo allo sviluppo mobile.

59
00:03:54,590 --> 00:03:57,350
Poi nel quarto corso
vedremo NativeScript.

60
00:03:57,350 --> 00:04:00,335
E alla fine, vedremo
lo sviluppo lato server,

61
00:04:00,335 --> 00:04:05,745
includendo sia la realizzazione dello strato
di business logic utilizzando l'ecosistema NodeJs

62
00:04:05,745 --> 00:04:13,935
che lo strato di persistenza utilizzando
MongoDB in questa specializzazione.

63
00:04:13,935 --> 00:04:18,265
Questo corso specifico, come atteso,
si concentra su Angular.

64
00:04:18,265 --> 00:04:23,391
Vi saranno presentati i diversi
aspetti del framework Angular attraverso

65
00:04:23,391 --> 00:04:27,520
un insieme di esercizi
realizzati l'uno sull'altro.

66
00:04:27,520 --> 00:04:32,131
Così sarà una sequenza di esercizi dove
vi introdurrò diversi concetti di Angular.

67
00:04:32,131 --> 00:04:37,772
E vi mostrerò immediatamente come
possiamo applicare questi concetti nel contesto

68
00:04:37,772 --> 00:04:43,519
di un'applicazione Anguale che
svilupperemo durante questo corso.

69
00:04:43,519 --> 00:04:47,985
Dunque, lungo la strada,
dopo aver progettato le viste in Angular,

70
00:04:47,985 --> 00:04:54,551
faremo uso di Angular material, per
realizzare l'UI dei nostri componenti Angular.

71
00:04:54,551 --> 00:05:00,962
E realizzeremo i layouts utilizzando
il Flex-Layout di Angular in questo corso

72
00:05:00,962 --> 00:05:06,280
L'alternativa sarebbe quella di utilizzare
Bootstrap 4 che abbiamo appreso in precedenza.

73
00:05:06,280 --> 00:05:09,820
Ma ho pensato che così questo
corso vi darà anche

74
00:05:09,820 --> 00:05:15,060
l'opportunità di imparare ancora
un altro framework UI front end.

75
00:05:15,060 --> 00:05:18,230
Quindi utilizzeremo Angular Material e
Angular Flex-Layout per

76
00:05:18,230 --> 00:05:22,110
fare esattamente le stesse cose che
abbiamo fatto con Bootstrap 4.

77
00:05:22,110 --> 00:05:28,430
Inquesto modo imparerete due
approcci diversi alla progettazione della UI

78
00:05:28,430 --> 00:05:35,300
sia quello che prevede Bootstrap 4
che quello con Angular Material combinato a Flex-Layout.

79
00:05:35,300 --> 00:05:37,880
introdurremo anche le basi
di TypeScript

80
00:05:37,880 --> 00:05:42,650
durante gli esercizi appena raddoppieremo
la nostra applicazione Angular.

81
00:05:42,650 --> 00:05:47,346
Il corso in sé sarà
organizzato in quattro moduli.

82
00:05:47,346 --> 00:05:52,680
I quattro moduli sono strutturati per
corrispondere a quattro settimane di questo corso.

83
00:05:52,680 --> 00:05:55,450
ma naturalmente, lasciatemi evidenziare

84
00:05:55,450 --> 00:05:59,760
che non avete bisogno di farvi pressare
dalle scadenze stabilite nel corso.

85
00:05:59,760 --> 00:06:03,030
Potete prendevi tutto il tempo a voi necessario
nel seguire il corso.

86
00:06:03,030 --> 00:06:07,900
E' più importante comprendere
ciascuno e tutti gli aspetti di Angular.

87
00:06:07,900 --> 00:06:14,800
Se avete bisogno di tempo in pù, sentitevi liberi di
spostarvi alla prossima sessione del corso.

88
00:06:14,800 --> 00:06:16,450
e poi continuate

89
00:06:16,450 --> 00:06:19,950
tutto il lavoro che avete completato in
una sessione sarà automaticamente trasferito

90
00:06:19,950 --> 00:06:22,010
nella successiva sessione del corso

91
00:06:22,010 --> 00:06:27,340
Dunque, non lasciate che le scadenze vi pressino
ad affrettarvi a completare il corso.

92
00:06:27,340 --> 00:06:30,290
Adesso, avedo dato l'idea generale,

93
00:06:30,290 --> 00:06:35,810
date un'occhiata agli argomenti che ciascuno
dei quattro moduli coprirà nel corso.

94
00:06:35,810 --> 00:06:40,130
Il primo modulo presenterà
lo sviluppo Full Stack

95
00:06:40,130 --> 00:06:43,842
l'idea generale e il quadro di insieme.

96
00:06:43,842 --> 00:06:50,230
Subito dopo, vederemo
una breve introduzione a Git e NodeJs

97
00:06:50,230 --> 00:06:53,250
Se avete svolto il corso
precedente su Bootstrap4

98
00:06:53,250 --> 00:06:56,020
allora avete già coperto questi due punti
nel corso precedente

99
00:06:56,020 --> 00:06:59,310
Quindi potete facilmente saltare

100
00:06:59,310 --> 00:07:03,750
alla prima lezione che tratta Angular,
l'introduzione ad Angular.

101
00:07:04,970 --> 00:07:10,020
Dopo l'introduzione al framework
Angular e dopo aver configurato nella nostra

102
00:07:10,020 --> 00:07:15,060
applicazione Angular Material e
Angular Flex-Layout

103
00:07:15,060 --> 00:07:18,910
ci sposteremo a studiare
i componenti Angular.

104
00:07:18,910 --> 00:07:23,880
qual è il ruolo dei componenti Angular
nella progettazione di una applicazione Angular e

105
00:07:23,880 --> 00:07:27,530
nella progettazione delle varie viste che saranno
supportate nella vostra applicazione Angular.

106
00:07:28,610 --> 00:07:32,990
Tutto ciò dovrà consentirvi di affrontare il primissimo
compito assegnato in questo corso.

107
00:07:32,990 --> 00:07:38,570
Il secondo modulo si concentra
sui servizi Angular,

108
00:07:38,570 --> 00:07:41,110
il routing, e le single page applications.

109
00:07:41,110 --> 00:07:46,220
Vediamo come il feedback Angular
supporta l'accesso ai dati e

110
00:07:46,220 --> 00:07:50,210
come possiamo far uso dei servizi
per accedere ai dati.

111
00:07:50,210 --> 00:07:54,160
Inoltre, come possiamo
utilizzare i dati nella progettazione

112
00:07:55,420 --> 00:08:00,040
delle nostre viste per i nostri
componenti Angular.

113
00:08:00,040 --> 00:08:04,240
E qui che gli aspetti
legati al data binding vengono alla luce.

114
00:08:04,240 --> 00:08:06,920
Poi vedremo il routing Angular e

115
00:08:06,920 --> 00:08:11,200
come possiamo implementare
le single page applications in Angular

116
00:08:11,200 --> 00:08:13,920
Vi spiegherò cos'è una
sigle page application e

117
00:08:13,920 --> 00:08:18,930
poi vedremo come possiamo progettarne
una utilizzando il framework Angular

118
00:08:18,930 --> 00:08:24,060
Tutto ciò dovrà consentirvi di affrontare il secondo
compito assegnato in questo corso.

119
00:08:24,060 --> 00:08:29,120
Il terzo modulo si concentra
sulle Angular forms.

120
00:08:29,120 --> 00:08:32,517
In seguito vedremo le
Angular Reactive Forms e

121
00:08:32,517 --> 00:08:36,883
anche come Angular e
al programmazione reattiva lavorano insieme.

122
00:08:36,883 --> 00:08:40,236
E come Angular sfrutta
la programmazione reattiva per

123
00:08:40,236 --> 00:08:45,470
implementare diverse forms di supporto
all'interno dell'applicazione Angular.

124
00:08:45,470 --> 00:08:50,324
Quindi prima vedremo le Template Driven Forms,
e in seguito le Reactive Forms

125
00:08:50,324 --> 00:08:53,262
poi vedremo come Angular support le Promises.

126
00:08:53,262 --> 00:08:59,621
E inoltre daremo una rapida occhiata alla
programmazione reattiva in RxJS nel contesto

127
00:08:59,621 --> 00:09:07,565
come Angular sfrutta RxJS per supportare
diverse caratteristiche all'interno del framework.

128
00:09:07,565 --> 00:09:12,130
Tutto ciò dovrà consentirvi di affrontare il terzo
compito assegnato in questo corso.

129
00:09:12,130 --> 00:09:15,980
Il modulo finale riguarda la
comunicazione Client-Server.

130
00:09:15,980 --> 00:09:20,060
Come fa la vostra applicazione Angular
a comunicare con un server

131
00:09:20,060 --> 00:09:24,220
che fornisce i dati come questi possono
essere prelevati dal lato server e

132
00:09:24,220 --> 00:09:29,120
poi utilizzati per renderizzare le viste
all'interno della vostra applicazione Angular.

133
00:09:29,120 --> 00:09:33,370
In corrispondenza, vedremo anche come
ciascun cambiamento che desiderate

134
00:09:33,370 --> 00:09:38,020
effettuare ai dati si può riflettere
sul lato server,

135
00:09:38,020 --> 00:09:40,340
dalla vostra applicazione Angular

136
00:09:40,340 --> 00:09:44,670
Vedremo Angular e il
modulo HTTP di Angular.

137
00:09:44,670 --> 00:09:48,731
Vedremo le API REST
vengono sfruttate per

138
00:09:48,731 --> 00:09:52,171
progettare la vostra applicazione Angular

139
00:09:52,171 --> 00:09:57,398
Vedremo anche le Animazioni e
le direttive in Angular.

140
00:09:57,398 --> 00:10:00,040
Nello specifico,
le direttive di attributo di Angular.

141
00:10:00,040 --> 00:10:04,558
Vedremo le direttive di struttura
nel modulo iniziale.

142
00:10:04,558 --> 00:10:10,140
Vedremo brevemente il testing
delle applicazioni di Angular e infine

143
00:10:10,140 --> 00:10:16,040
vedremo come sarà costruita e consegnata
la nostra applicazione Angular al Server.

144
00:10:16,040 --> 00:10:22,030
Tutto ciò dovrà consentirvi di affrontare i
compito finale assegnato in questo corso.

145
00:10:22,030 --> 00:10:27,758
Durante la strada, esiste anche un percorso
per la lode costruito in questo corso.

146
00:10:27,758 --> 00:10:32,440
Se vi interessa lavorare ad un vostro
progetto personale utilizzando Angular,

147
00:10:32,440 --> 00:10:37,950
allora il percorso per la lode vi fornisce
l'opportunità di lavorare

148
00:10:37,950 --> 00:10:43,470
al vostro progetto personale
all'interno di questo specifico corso.

149
00:10:43,470 --> 00:10:48,840
Quindi date un occhiata la percorso per la lode,
e se vi interessa potete benissimo intraprendere

150
00:10:48,840 --> 00:10:53,150
lo sviluppo di un vostro progetto personale
in Angular durante questo corso.

151
00:10:54,190 --> 00:10:58,175
Spero che vi divertiate a seguire
questo corso e ad imparare Angular.

152
00:10:59,500 --> 00:11:04,550
L'ultimo consiglio che vi lascio è: siate pazienti!

153
00:11:04,550 --> 00:11:07,990
Imparare Angular richiede molta pazienza.

154
00:11:07,990 --> 00:11:11,020
Ci saranno molti concetti e

155
00:11:11,020 --> 00:11:15,740
tecnologie che incontrerete
non appena avanzerete nel corso.

156
00:11:15,740 --> 00:11:19,620
Per favore non abbiate fretta
di completare il corso

157
00:11:19,620 --> 00:11:26,716
Prendetevi tutto il tempo che vi occorre per capire
ogni singolo passaggio prima di finire questo corso.

158
00:11:26,716 --> 00:11:29,987
Spero che vi divertiate a seguire questo corso.

159
00:11:29,987 --> 00:11:33,049
[MUSICA].