Ok, ok, ti sento dire.
Andiamo avanti,
mostrami un po' di codice.
In effetti, inizieremo a creare la
nostra applicazione Angular in questo primo esercizio.
Useremo l'interfaccia a riga di comando
angolare, la CLI angolare per impalcare la nostra applicazione angolare in questo esercizio.
Quindi, mentre passiamo attraverso il resto degli esercizi in questo corso,
costruiremo la nostra applicazione Angular passo dopo passo.
L' Angular CLI è un modo molto conveniente per creare un'applicazione Angular.
L' applicazione angolare creata dalla CLI angolare segue le
guide di stile suggerite dagli sviluppatori del framework angolare.
Possiamo usare la CLI angolare per impalcare
molte parti della nostra applicazione angolare compresi i componenti,
i servizi della nostra applicazione angolare.
La CLI angolare viene fornito anche con un proprio server integrato,
che possiamo usare per servire l'applicazione angolare mentre stiamo costruendo,
e quindi visualizzare la nostra applicazione angolare
nel browser come anteprima live della nostra applicazione.
Come quando apportiamo modifiche,
le modifiche verranno riflesse immediatamente nel browser.
Questo è il motivo per cui ho scelto di utilizzare la CLI Angular come
approccio per costruire la nostra applicazione Angular in questo corso.
Per iniziare, vai in una posizione comoda sul
tuo computer e crea una cartella denominata Angular.
Quindi, ho intenzione di iniziare a passare alla mia cartella documenti Coursera.
Ecco dove memorizzo tutti i miei file per il mio corso Coursera,
e poi creerò una cartella
denominata Angular e quindi una mossa nella cartella Angular.
Ora, stiamo andando a creare la nostra applicazione angolare all'interno di questa cartella.
Il primo passo che facciamo in questo esercizio consiste nell'installare l'interfaccia CLI angolare.
Quindi, al prompt,
digitare npm install -g @angular /cli @ 6.2.1.
Ora, ogni volta che installo un modulo NPM,
specificherò anche la versione esatta del modulo NPM che sto installando.
Ti esorto vivamente a installare
la stessa versione del modulo NPM in modo da poter passare attraverso
il resto degli esercizi senza avere alcun problema con gli esercizi.
Quindi, in questo caso, sto installando la versione 6.2.1 della CLI Angular.
Ora, se lo stai facendo su un Mac o Linux,
non dimenticare il sudo davanti all'installazione di npm.
L' installazione richiederà del tempo.
Quindi, una volta completata l'installazione,
la CLI angolare sarà disponibile sulla riga di comando.
Una volta completata l'installazione, è
possibile verificare che sia installata la CLI Angular.
Una volta installato,
potrebbe essere necessario riavviare il terminale
affinché gli strumenti Angular CLI siano disponibili al prompt.
La CLI angolare è disponibile digitando ng
al prompt seguito da una serie di istruzioni aggiuntive.
Quindi, il primo comando che proveremo è ng help,
e questo elencherà un insieme di tutti gli altri comandi
che la CLI Angular ci permette di eseguire.
Ng come vedi sarà il prefisso di
tutti i comandi Angular CLI che userai in questo corso.
Questo elencherà un insieme di tutte le opzioni che la CLI angolare fornisce per noi.
Impareremo molti di questi comandi mentre passiamo attraverso il resto di questo corso.
Per creare una nuova applicazione Angular,
creerò quell'applicazione
nella cartella Angular in una sottocartella denominata Confusione.
Se hai seguito il corso precedente su Bootstrap quattro,
capiresti perché nomino questa applicazione come Confusione.
Quindi, al prompt,
digita ng new Confusione,
e quindi userei sass come
framework di stile CSS per la mia applicazione Angular.
Quindi, specifico meno meno stile uguale a SCSS,
e premo il ritorno e ci vorrà del tempo perché
l'applicazione Angular venga creata nella cartella corrente.
Una volta che l'applicazione viene installata,
usiamo il server integrato
dalla CLI angolare per compilare la nostra applicazione angolare e iniziare a servirla.
Passare alla cartella Confusione,
e al prompt, digitare ng serve,
e attendere che il server Angular Live Development per
iniziare e costruire la nostra applicazione Angular e iniziare a servire l'applicazione.
Una volta completato
, noterai che questa applicazione sarà disponibile digitando
un http://localhost:4200 nella barra degli indirizzi del nostro browser.
È possibile lasciare il server di sviluppo in esecuzione continua.
Quando si apportano modifiche all'applicazione Angular,
il server ricompilerà automaticamente le modifiche e quindi
inizierà a servire l'applicazione Angular aggiornata all'interno del browser.
Quindi, questo sarebbe un ottimo modo per guardare in diretta le modifiche che apporti
all'interno dell'applicazione Angular che vengono immediatamente riflesse
nel browser in cui visualizzi la tua applicazione Angular.
Se vai al browser e accedi all'applicazione Angular su localhost: 4200,
vedi che l'applicazione inizia a funzionare
e servirà questo insieme di parole nel nostro browser.
Quindi, questa è un'applicazione molto semplice che bare-bones applicazione angolare per
iniziare a sviluppare la tua applicazione angolare.
Stiamo andando a costruire su questa applicazione scaffolded da Angular CLI,
implementando varie funzionalità come parte di questo corso.
Se stai pianificando di utilizzare Git per la tua applicazione Angular per il controllo delle versioni,
allora a questo punto,
potrebbe essere una buona idea inizializzare il tuo repository Git.
La CLI angolare esegue automaticamente l'inizializzazione del repository Git,
e quindi il primo commit con il commit iniziale del messaggio al repository Git.
Controlliamo lo stato del nostro repository Git.
Consente di controllare digitando git log
una riga e vedrete che
la configurazione iniziale è stata impegnata nel nostro repository Git.
Ora, possiamo iniziare a lavorare sulla nostra applicazione angolare che
abbiamo impalcato in questa cartella qui.
Se scegli di sincronizzare il tuo repository Git con un repository online,
assicurati che il tuo repository online sia un repository privato.
Bitbucket consente di creare repository privati gratuiti.
Quindi, vai avanti e configura il tuo repository Git su Bitbucket.
Con questo, completiamo il nostro esercizio.
In questo primo esercizio,
abbiamo installato la CLI angolare.
Quindi, abbiamo impalcato la nostra applicazione Angular su cui
lavoreremo per sviluppare ulteriormente come parte del resto degli esercizi in questo corso.