buongiorno quindi ora no sono qui per
benvenuto a questo discorso chiamato un rapido
introduzione all’angolare 2 prima di arrivare
iniziato con le mani in mano quanti di voi
ho fatto in angolare 1 va bene una fiera
quantità di numero quanti di voi hanno
fatto angolare o visto angolare 2
molte molte ok, quindi hai già iniziato io
non sono sicuro del motivo per cui hai davvero bisogno di un rapido
introduzione ad angolare se già
ho iniziato a farlo sperando che tu possa ottenere
vedere alcune cose nuove l’angolare
2 è in realtà appena rilasciato una coppia
di settimane fa è arrivata come versione di rilascio
era nel lavoro per quasi o
in realtà più di due anni perché google
annunciato la loro intenzione di
uscendo con una nuova struttura su
due anni fa, iniziamo da un breve
presentazione il mio nome è Deborah Kovich
DB breve sono originario della Romania
trasferito dalla Romania 1996 e da allora
In realtà sto viaggiando per il mondo al
momento che sto vivendo a Tenerife è un
isola molto bella nell’immuno nel
Oceano Atlantico al di fuori della costa di
Nord Africa Ho fatto programmazione
dal 1991 quindi sono tutti i suoi 25 anni
un quarto di secolo molti di voi conoscono a
molto sviluppo conosco la mia esperienza
è quasi vecchio come fanno le persone
lo sviluppo front-end oggi non è così
sì, ho fatto ho fatto un sacco di questi
Sono stato un allenatore negli ultimi 12 anni
anni e non solo formatori ero io
ha lavorato anche come sviluppatore perché io
mi piace davvero tenerli, sai mantenere
è reale e cerca di capire esattamente
cosa gli altri hanno a sapere
soffrire per essere in grado di creare
quei momenti insegnabili che ho fatto
una conferenza che parla per le sette precedenti
anni faccio un sacco di mentoring tutto
to.net e tecnologie web se al
l’inizio era solo una velocità della rete I
capito a un certo punto che io davvero
bisogno di fare di più sapendo di guardare dentro
Sottotitoli di JavaScript sul lato delle cose e
poi da lì a fare un sacco di cose diverse
quadri per vedere come
posso migliorare il lavoro che sto facendo sono a
Microsoft MVP e un membro interno di ASP se si
sono sul sai come SB insider è
una specie di elenco con persone che
Microsoft cose sono specialisti
e ci viene affidato il loro
piani e loro segreti e poi puoi
vedi su quell’elenco un sacco di discussioni
su tutto tranne Microsoft
tecnologie perché ce ne sono molte
Loro fuori là sono un padre che ho due
figlie e un geek ovviamente altrimenti
Non sarei qui se sei su Twitter
puoi trovarmi a Tibor 19, se lo fai
ogni tweet oggi usa l’hashtag
vai a cph perché poi vedrai
li sul grande schermo sai qualunque cosa
devi dire di presentarsi per gli altri
la gente ora la mia presentazione powerpoint
non era così importante la cosa
era su questo era questo diapositiva che ho
in realtà un piccolo ordine del giorno quello che siamo
parlarne è una storia
lezione allora andremo a guardare il
Guida di avvio rapido quindi di nuovo scuse per
le persone che hanno già lavorato con
angolare 2 perché potrebbe esserci un po ‘
un po ‘ di delusione ma vediamo
allora parleremo del
moduli componenti servizi e alcuni di
la roba pronta all’uso che puoi
ottenere con angolare 2 in modo da non dover
reinventare la ruota ogni volta che si avvia
e tu un nuovo progetto con angolare 2 così
la lezione di storia angularjs è angolare
un framework JavaScript da parte di chi lo sa
dalle mani che mi hai mostrato di più
oltre la metà delle persone deve almeno
sapere cos’è angolare Google
provare a fare è creare un quadro
ha detto che non vogliamo essere troppo
prescrittivo non vogliamo essere MVC
non voglio essere mvvm ma ciò che vogliamo
creare è a 20 vie per te come a
sviluppatore per aumentare il motivo HTML
perché la programmazione dichiarativa è
molto più potente del
imperativo 1 e programmazione imperativa
era la roba che stavamo facendo
jquery di solito mi piace fare un confronto
sai quando spiego alla gente il
differenza tra la chiarezza di e
imperativo in un modo che possono
capire anche se non ci sono
i programmatori vanno così, presumendo
Mia moglie mi vuole sapere per comprarne alcuni
latte in modo imperativo in cui verrà
a me e disse per favore vai al tutto
Via, porta le scarpe sulla porta
al piano di sotto e poi girare a destra andare
200 metri girare a destra andare dentro il
il negozio prende la scatola e poi lo sai
fai tutti i passi indietro finché non vieni
torna a casa e poi metti il latte nel
frigo bene questo è ok è molto
prescrittivo e sai esattamente cosa
fai passo dopo passo a volte il
il che significa che devo comprare il latte
è nel profondo di tutto ciò che conosci
tutta roba di chiacchiere che ottieni
dovrebbe avere in giro in modo dichiarativo
Ho appena detto qualcosa come andare a comprare latte
conosco l’implementazione a cui tengo
Alla fine della giornata, così poche persone lo farebbero
fai l’implementazione perché sai
dopo un po ‘penso che sarò in grado di farlo
ottimizzare tutto questo viaggio e potrei
in realtà prendere l’ascensore perché io
pigro oggi potrei davvero prendere il
scorciatoia oh qualunque cosa tu sappia per lei
ancora non importa perché io finisco
portare il latte a casa così sei tu
conoscere in un modo la differenza tra
loro ora angolare 1 fatto bene può essere
in realtà molto potente perché quando tu
inizia a creare le tue direttive in
angolare 1 ciò che ottieni effettivamente
nuovi elementi come HTML che mostrano il
intento quindi cosa vuoi fare ora
ci sono stati molti problemi con te
sappia come 23 anni fa non non a due
anni fa, Google ha capito che il modo
hanno iniziato tutta la roba angolare
potrebbe non essere il più adatto lo sai
andava bene per i loro progetti
soprattutto quando hai le persone
lavorando sul framework facendo il
progetti anche perché poi sai
esattamente quali cose vuoi evitare
ma quando li ha ottenuti, conosci il
attenzione che ha ottenuto oggi molto
la gente realizza oh mio dio non funziona
Oh angolare 1 è così stupido che ci vuole così
tanto tempo non è che tu lo sappia
un sacco di problemi di prestazioni ha molto
di giorni e molto e molto
le persone si lamentavano, così hanno detto
ok, quello che dobbiamo fare ora è andare
di nuovo alla scheda di progettazione di cui abbiamo bisogno
capire cosa abbiamo sbagliato e come
dovremmo farlo come dovremmo farlo
meglio così tutto il progetto intero i
direi
a volte è a gennaio 2014 e così
culminato con un grande annuncio
hanno fatto nel settembre 2014 quando loro
detto angolare 1 è morto lunga vita angolare
2 e poi tutti hanno dato di matto
incluso me e poi sai che ero
molto molto arrabbiato perché e io sono ancora dentro
un modo sconvolto perché quello che ho detto loro
allora e cosa dirò ancora a loro
ora è che tu sai che potresti avere
hai scelto un nome diverso che conosci
cercano di convincere un Microsoft onesto I
direbbe che sai che scelgono il nome
quello era molto clamoroso con il
comunità di sviluppatori hanno detto che facciamo
che sai ancora proviamo a
replicare qualsiasi cosa abbiamo fatto finora e
quindi usa bene quel nome quindi essendo un
società di ricerca che sai dovrebbero avere
noto che se vai su google e dici
mostrami qualcosa relativo all’angolare
la maggior parte delle risposte pertinenti sarebbe
relativo all’angolare 1 almeno per il
primi adattatori e quello era uno dei
i miei maggiori problemi si sa quando io
ho iniziato a lavorare con angular 2 e I
ho cercato di trovare i problemi di altre persone
avevo dove li avrei trovati?
google è sicuro e lo farebbe
è stata la piattaforma per farti sapere
il posto per trovarlo quindi era un sacco di
prove e un sacco di combattere te
conosci la mancanza di documentazione e tu
conoscere il modo in cui gli altri stanno pensando
quindi era abbastanza difficile, ma poi
hanno lavorato molto duramente e sono riusciti
fare entro la fine dello scorso anno in realtà
2015 sono riusciti a venire fuori con la
primissima meglio quello che penso in
l’inizio di dicembre hanno
alfa per un po ‘e poi hanno iniziato
venire con i betta e poi loro
anno hanno iniziato a giocare con
i candidati al rilascio e loro hanno
cambiato hanno ucciso molto voglio dire che ho
fatto già due workshop e tutti
una volta sola quando ho fatto un seminario
ha dovuto riscrivere tutta la roba perché
sai che il cambiamento è nel mezzo e io
Farò un seminario tra due giorni e lo farò
dover riscrivere di nuovo tutto il materiale
ora questa è una versione di rilascio speriamo
sarà in grado di sapere in giro per a
mentre più a lungo quindi il prossimo workshop i
potrebbe riutilizzare parte del lavoro anche se
Sapresti che le mie speranze non sono molto alte
quando si tratta di questo in ogni caso in modo
questo è angolare 2 ora se sei qui
pensando che ho fatto un sacco di cose
angolare 1
So che angular2 mi dispiace che tu sappia il mio
condoglianze ma non è quello che è successo
quello non è quello che succederà
o sono concettualmente come dire
equivalente se non sono veramente voi
conosci lo stesso ma l’idea dietro di loro
è quasi da dire ora ne hanno fatti altri
scelte hanno deciso di usare dattiloscritto
quindi l’intero angolare 2 è scritto dentro
dattiloscritto e parlato di voi conoscete il
grandi giganti che lavorano insieme al risultato
è di nuovo piuttosto impressionante uno dei
cose che accadono essendo un membro interno di ASP
ed essendo un EVP per Microsoft ottengo
invitato al quartier generale di Microsoft
una volta all’anno fanno una conferenza dove
sei a conoscenza solo a porte chiuse di Microsoft
persone e quegli MVP e abbiamo
L’India è finita in Das che non lo siamo
permesso di parlare di qualsiasi cosa
che stanno mostrando e così via e giusto
come nota a margine abbiamo potuto vedere l’asp.net
core back nel 2013, quindi l’abbiamo visto tre
anni avevano tutti gli altri più o meno
perché si sa che è stato uno dei
vantaggi o in esso è ancora uno dei
vantaggi di essere un MVP di Microsoft
il punto è l’anno scorso a novembre
uno dei relatori era nientemeno che
Brad green Brad green è il programma
gestore da google che si occupa di
angolare 2 quindi era dentro quelli chiusi
le porte ci dicono cosa sta progettando Google
fare con angolare 2 e come sono
usando dattiloscritto e così via quale era
di nuovo molto impressionante e in un certo senso
sentivo che Google stava facendo bracconaggio, lo sai
come gli sviluppatori in Microsoft
comunità da adottare e quindi iniziare ad essere
sai difendere il loro per loro
anche la tecnologia funzionava già
con l’angolare 1 stavo già lavorando
con angolare 2 e poi ovviamente ho avuto
per dirgli che non mi piace il nome
e ha detto sì, so che non lo farai
solo uno ce l’abbiamo, ma ora lo è
troppo tardi non possiamo tornare indietro e fare
nulla su di esso quindi questo è molto
il momento interessante ora è il tempo di strisciare
lo sviluppano in dattiloscritto quasi tutti
gli esempi sono in effetti in dattiloscritto
per quattro giorni e la ragione per cui hanno scelto
il dattiloscritto è perché funziona molto bene
con javascript in realtà suona meglio
di Java
Direi nella maggior parte delle situazioni così
quanti di voi non sanno cosa?
dattiloscritto è tutti sanno di che tipo
script è a posto perfetto un superset di
JavaScript rende la vita più semplice, quindi se
prendi semplicemente un file JS e rinomini
a TS si ottiene esattamente un identrio
file sarà esattamente lo stesso sul
dall’altra parte e funzionerà solo ora
i vantaggi di utilizzare questo è perché
compila alla fine della giornata in un
es5 di nuovo il versioning conosci cinque anni
anni venti sedici anni 2017 e così
su così quando si ottiene un file TS che compila
di nuovo in un es cinque o qualche volta tu
potrebbe essere necessario compilarlo in un es 2015
e poi si esegue un transpiler bolla
quello che prende da te è il 2016 in un
ds5 larga tutte queste cose perché non tutte
i browser sono nati uguali ad alcuni di loro
sono più uguali degli altri se tu
sai se puoi non averlo
lo stesso supporto per tutte le cose così
alcuni di loro potrebbero aver bisogno di polyfill alcuni di
li ho bisogno di altre cose quindi ci sono a
molte cose che sono successe così le mie
ID per fare una rapida introduzione
lo sai troppo debole per usare il
guida di avvio rapido che Oracle il libro
per google è uno di quei grandi te
conosci il grande gigante scusa fanno il Java
cosa che la cosa javascript sì sì
Google ha messo insieme molto bene
documentazione se non hai usato
per ora si prega di farlo , in realtà è
molto bene ci sono un sacco di curiosità
ci sono molti buoni
documentazione che stanno spiegando molto
delle cose molto bene ed è successo così
che lavoravo con il ragazzo che è
responsabile della documentazione effettivamente e
Lo conosco e lui è lui è lui è abbastanza
Gooden quando appassionato di ciò che è
facendo così lascia che ti mostri quello che ho ottenuto io
ha la guida di avvio rapido fa tutti
vede okay il codice va bene così noi
ho avuto il rapido avvio angolare, solo
ho seguito i passaggi che ho effettivamente copiato
e incollare con lo sai con il normale
errori quando si copia e incolla e
poi ho trovato fortunatamente ciò che era sbagliato
con esso prima che io mostri
qui so II copia tutti i file da
google site in realtà da angular io
sito e poi li metto in un progetto
e poi eseguo npm install come loro
istruito e quindi eseguo npm dall’inizio
assicurati che tutto funzioni e
apparentemente funziona quindi prima di tutto npm e
package.json che mi dice solo cosa
le dipendenze sono ciò di cui ho bisogno in ordine
essere in grado di correre su un angolo
applicazione quindi ho bisogno di alcune cose comuni
Ho bisogno di un compilatore Ho bisogno delle cose principali
ho bisogno dei moduli e poi di HTTP e
quindi qualcosa che ha a che fare con il
browser nella dinamica del browser ora a
browser di piattaforma a Bruxelles è dinamico
la via per la squadra angolare a
astratto il modo in cui conosci il
implementazioni che sono necessarie in
per lavorare con la cupola o per lavorare
con un’applicazione nativa su a su a
dispositivo mobile quindi sto usando router e
quindi aggiorna nel caso in cui tu lo sappia
voglio davvero combinare il mio angolare 1 e
progetto angolare 2 in un unico progetto
sai di usarne alcuni alcuni
alcuni dei codici esistenti qui altro
le cose che sono necessarie è stupendo
stupendo è in realtà il sistema dei moduli
necessario per poter essere in grado di
per aiutare i browser a capire cosa
modulo e di nuovo quando parliamo
moduli abbiamo due diversi tipi di
i moduli qui al gioco uno sono i
Modulo JavaScript o dattiloscritto
modello che è lo stesso che è il modo
per me incapsulare il codice e fare
sicuro che nulla vada oltre lo scopo
di voi conoscete quel modulo se non lo sono
esplicito su di esso in modo da indicare che sai
ma il punto è quando voglio mostrare
qualcosa al di fuori di te conosce un file
JavaScript mostra tutto all’esterno
il file a meno che tu non lo stia mettendo
all’interno di una funzione che sta invocando
automaticamente e utilizzare l’effetto collaterale di
eseguendo bene la funzione quando vuoi
fare un modulo in JavaScript o un
es2015 lo dichiari solo all’interno del
file e quindi non esportare nulla
da esso significa che tutto è
locale a quel file in modo che sia uno dei
moduli e poi ovviamente
avere la nozione di moduli angolari
che sono stati introdotti di recente e poi
finalmente sono arrivati al taglio finale così
ora fanno parte del nuovo
la specifica di un modulo angolare è un modo
per noi come in angolare 1 in realtà a
raggruppa insieme cose di cui abbiamo veramente bisogno
per le nostre applicazioni in modo da tornare a
questo sto usando riflettono i metadati
rifletti i metadati che hai usato sai che è così
effettivamente utilizzato per la dipendenza
iniezione e poi alcuni altri
altre librerie che sono lì dentro
impostazione predefinita nel caso in cui si desideri andare oltre
con esso e usarlo allora abbiamo il
index.html index HTML è semplice come questo
potrebbe farti dire che sai di cosa si tratta
un rapido avvio angolare abbiamo bisogno di un po ‘di poli
campi in cui sono necessarie 44 linee
per me poter essere in grado di eseguire questo
applicazione su diversi browser
compresi ie9 sai che mandano moderni
browser, ma sono tornati nella loro
parola e detto usiamolo per I 92
perché ci sono un sacco di persone
usando I 9 là fuori e poi questo è
dove inizia la mia applicazione, dice
si prega di configurare il sistema j syst MJS
sarebbe quello che sarebbe in carica
di caricare tutti i moduli e poi i
avviare la mia applicazione dicendo sistema
dot import app ora questo sarebbe più o
meno della direttiva ng up in cui eri
angolare 1 questo è dove indosso il mio
avviata l’applicazione non ho bisogno di
caricare esplicitamente qualsiasi roba angolare
perché, perché la mia app lo farebbe
l’applicazione lo facciamo così ancora due
cose che ho qui per la configurazione
scopi uno è la configurazione di TS questo è
un file di configurazione per il mio dattiloscritto
ogni qualvolta modifico qualcosa in a
file dattiloscritto perché l’ho eseguito
all’interno del codice Visual Studio Visual Studio
il codice lo sa e poi io
automaticamente utilizzerà queste informazioni
compilare il file e creare creare
File JavaScript fuori dal mio tipo di script
file e poi ho appena un Taipings
Jason typing’s Jason sono i nostri file DTS
file di definizione per il mio top per il mio
librerie di script perché JavaScript tu
conosci normalmente quando lavori
JavaScript puoi ottenere molti metodi
e non ha davvero il tipo
informazioni e per questo quando tu
la stampa pensava che tu non ti facessi conoscere
il resharper ti funziona come te
non avere tutti i metodi che potresti
essere in grado di usare si potrebbe ottenere un altro
errori e quindi abbiamo il sistema J così
questo è il nostro primo file come questo
dovrebbe funzionare anche con es5 non solo
con i file TS usa il
funzione invocata immediatamente qui nel
esecuzione e stiamo configurando il sistema
sistema JSI dire che ogni volta che vedi
qualcosa che inizia con m pm per favore
utilizzare le cartelle del modulo nodo in
la produzione sarebbe stata cambiata nel mio CDN
probabilmente o per qualcosa di simile così
sa esattamente cosa portare i file
da e poi sto facendo un po ‘di mappatura così
ogni volta che sto mettendo qualcosa dentro il mio
sezione di importazione se non sai cosa
le sezioni di importazione sono solo quelle
pensato per altri due minuti e poi io
ti mostrerò di cosa si tratta nella mia importazione
sezione ogni volta che inizio qualcosa con
app lo saprà oh quindi avrò bisogno di guardare
nella cartella chiamata app che
capita di essere questo piegato dentro il mio
applicazione ogni volta che vedo qualcosa
come n pm dovrò guardare in
la cartella dei moduli del nodo e poi vai tu
conosci e cerca questo al centro angolare
bundle score um DJ s e così via, tutto qui
quelle cose sono in realtà parte delle mie
la mia configurazione del sistema di prigione così sono
solo aiutando il mio ambiente a
capire come dovrebbe funzionare e poi
Sto facendo cose come creare diversi
pacchetti che posso dire per ognuno
uno di loro come comportarsi così per
istanza se qualcuno vuole usare l’app
il pacchetto dirà il punto di ingresso
metodo principale di quel particolare pacchetto
è il file main.js che ovviamente non ho
any main.js Ho un file TS principale ma
quando compilo che sarebbe
trasformato in un pisolino in un main.js
file e poi sto dicendo il default
l’estensione è Jas quale estensione predefinita
JS mi aiuta a salvare le mie battute
e non so se tu se lo sei
era familiare con Scott Hanselman
facendo il keynote la scorsa notte lui sempre
dice che le persone hanno un numero limitato
delle sequenze di tasti quindi dovresti usarle
con saggezza
lo sai scarsamente mettendolo
qui significa che ogni volta che dico a me
dire in mia nel mio file che voglio
importa da qualcosa che non devo
metti un punto a scacchi alla fine di ogni
Singolo ogni singolo nome là fuori così
è per questo che sto usando l’impostazione predefinita
estensione e questo è tutto per il mio
applicazione quindi tornare all’indice HTML
quando dico importare quello che sono in realtà
dicendo che sto dicendo andare alla cartella dell’app
e cercare il punto di ingresso che era
il file TS principale e da lì per favore
avvia la mia applicazione ora prossima parte qui
è un corpo e quindi ho un tag qui
chiamato il mio up non è niente che sia un
Standard HTML ma quello che ho detto
invece ho la mia domanda potrei
ho definito la mia applicazione angolare
quale è la mia app e ti mostrerò di nuovo
in un minuto da dove viene così
la prima cosa che dobbiamo definire è
un modulo ora il mio modulo è un modo per me
mettere insieme le cose per creare riutilizzabili
pezzi di codice così ti creo sai se io
li ho se ho una caratteristica qui io
lo inserirà in un modulo e lì dentro
avrò tutte le dichiarazioni
o le direttive tutti i componenti
che voglio creare e così via
compreso il significato delle importazioni se ho
dipendenze su un altro modulo allora
è lì che li ho specificati di nuovo
se ricordi come hai fatto cose dentro
angolare 1 tu ogni qualvolta dichiari un
il modulo ii ha dichiarato la modalità che utilizzerai
nome e quindi si specifica tutto il
dipendenze ora forse voglio essere un
un po ‘troppo veloce lasciami tornare
la primissima linea di codice lo stesso
la prima cosa che sto dicendo lì per favore
modulo di importazione da nucleo angolare cosa
In realtà sto dicendo che dentro
file di core angolare che se torniamo a
configurazione del sistema J come vedremo lì
esattamente quale file è noto che tu
avere una definizione di qualcosa chiamata ng
modulo quindi ng modulo userò in seguito
qui questo perché ha un annuncio in
davanti ad esso si chiama decoratore come
molti di voi hanno familiarità con i decoratori
pochissimi, quanti di voi sono
familiare con gli attributi
meta programmazione e metadata vanno bene così
quello che sto dicendo qui per favore inserisci questo
classe voglio che tu aggiunga altro
informazioni che non ha nulla a che fare con
l’implementazione stessa è ambient
le informazioni sulla mia classe non interessano a nessuno
almeno dentro la mia classe
non mi interessa l’ambiente interno I
potrei semplicemente prendere questa classe e poi muoverti
e da qualche altra parte e basta lavorare con
ma perché angolare sa di questo
particolare decoratore dirà bene così
vuoi che usi questa classe di moduli up
come un modulo oh e dal modo in cui vuoi
io dentro quella classe per aggiungere tutti quelli
componenti per creare una dichiarazione da fare
un bootstrap per fare qualche importazione
forse un po ‘di esportazione perché vorrei te
sapere che alcuni moduli potrebbero essere riutilizzati
altre applicazioni quindi per favore spinge tutto
quelli là dentro e crea questo tu
conoscere questo punto di partenza per il mio
applicazione ora all’interno delle dichiarazioni
hai bisogno di mettere tutti i componenti
vuoi usare anche all’interno del modulo
se non hai roba al suo interno allora
angolare ti dirà ad un certo punto
scusa ma non vedo alcuna importazione per
quello particolare per quel particolare
componente o per quel particolare
direttiva sei sicuro che quello che?
vuoi farlo perché non lo vedo
da dove viene e poi sto usando
su modulo e sto dicendo okay dentro
Perchè questo modulo funzioni, ho bisogno di farlo
importa un’altra modalità che chiamerai il
modulo del browser questo è quello che fa
tutta la manipolazione di Dom e tutto il
roba dove ho preso il mio sai dove
conosce le mie interpolazioni e le mie
banda e le associazioni di dati che voglio
da usare dentro la mia applicazione e poi io
dimmi che voglio che tu parta dall’app
componente che è componente nella sua
girare è una classe che non ha nulla di più
o meno unità hanno solo una definizione
un’altra cosa che è lì dentro è
in realtà il decoratore di componenti di nuovo a
decoratore l’abbiamo visto prima e poi
il suo angolare che ne è familiare
lo sa e dice oh così tu
voglio che questa classe ora agisca come a
componente quindi come vorresti usare
bene se qualcuno dentro l’HTML che
lo analizzerai quando inizierai
l’applicazione angolare 2 ha a
compilatore
e va e analizza tutto l’HTML che
trova e cerca di dare un senso
di loro così dice oh così dentro questo tu
voglio che faccia per fare cose come sai
come cercare un selettore è a
selettore css3 se hai lavorato con te
Conoscere con CSS o con jQuery che dovrebbe
essere molto familiare, quindi ogni volta che lavori
sai dove si imposta il dollaro che conosci
qualunque selettore II metta nel
parentesi è quello che vorresti fare
ecco quindi cosa succederebbe
il mio quando angolare vede questo file qui
index.html e vede la mia app lo farà
dì oh così in realtà vuoi che me lo metta
qualunque sia il tuo tube per invocarlo
componente ora quel componente se vado
di nuovo qui ha un modello di modello
è in realtà l’HTML che voglio
usa il tentativo quindi se guardi il
definizioni in realtà un modello
componente non è altro che un
direttiva che non ha un HD
componente è una direttiva che ha a
modello quindi se non hai nulla
per mostrare o se sei solo comportamentale o
hai modificato, sai se sei
sei una direttiva strutturale allora tu
non è necessario essere un componente ma a
componente è tutto il resto così quando tu
stavano lavorando con le direttive più
delle direttive che stai creando
in realtà alcuni di loro erano
comportamentale dove andresti e tu
sai fare magari aggiungerne alcuni
funzionalità per gli elementi esistenti
o ai tuoi stessi elementi ma alla maggior parte dei
tempo in cui stavi creando componenti
combinarli insieme e sì
perché siamo in Legoland per creare
come un Lego conosci come un Lego
applicazione o mettere insieme cose in
ordina che funzionino così che io sia
dire qui è che ogni volta che vedi il mio
per favore usa questo pezzo di HTML lì
è rimasta un’altra cosa che io
saltato su quale è la mia voce principale
indica il punto di ingresso principale che conosci
in ogni applicazione hai nullo principale
vuoto o qualsiasi cosa tu voglia sapere
lo chiami in qualsiasi applicazione qui
è il TS principale che sapevi quale
è il primo che sto importando
quando sono questo lo sai che questa è una copia
e incollando che farai sempre il
principale il modulo principale all’interno del tuo
applicazione la raccomandazione di Google è
per richiamarlo modulo il componente principale
dovresti chiamarlo componente e così via
su quello che sto dicendo qui è quello
importare il browser della piattaforma dinamica così io
voglio che tu faccia una compilation dinamica di
il contenuto dei file e poi
Voglio che tu importi il modulo dell’app da
il file ha richiamato il modulo se tu
ricorda che ti ho detto che il mio default
l’estensione è jas quindi non devo dire
il modulo ab dot DOJ posso solo dire
modulo e poi il no poi tutto
altrimenti viene fatto automaticamente creo a
reggiseno platformer un browser di piattaforma
dinamico e poi con questo lo farei
dì per favore avvia l’applicazione da
modulo app quindi è quello che faremo e
allora andrà nel mio modulo lo farà
guarda il componente bootstrap e lo farà
avvia questo componente che dirà
si prega di utilizzare quando si vede nella mia app
che il mio up e quindi sostituirlo con questo
quindi con quello detto posso andare
qui ora e basta eseguire questo direi
npm avvia ciò che npm ha avviato esegue due
le cose su cui gira il dattiloscritto
compilatore e poi la seconda roba
fa funzionare il compilatore dattiloscritto
in modalità orologio significa che qualunque cosa
le modifiche che sto facendo lo faranno automaticamente
riflettendo qui dopo la ricompilazione così
fammi fare questo okay, dove sei?
Questo
probabilmente così qualunque cambiamento sto facendo
qui dovrebbe riflettersi qui così
se dico la mia seconda angolazione dovrebbe
ricompilare e quindi dovrebbe essere mostrato in
qui così semplice che così lo rende
molto più facile per me in realtà fare
sviluppo ovviamente non lo farò
uno schermo lo faccio su tre perché io
bisogno del CSS sull’altro e
in effetti impiliamo l’overflow, siamo onesti
sai il terzo, quindi si
devi aver bisogno di avere questo per avere
questo di fronte a te un’altra cosa che sono
facendo quando sto facendo questo tipo di
cose che mi piacciono di questa F12 solo per avere
tutte le informazioni qui giù così io
capisco cosa sta succedendo ne ho due
errori vediamo cosa stanno dicendo se
ce n’è uno interessante qui o no
nella console, penso che lo farà
dimmi che non riesce a trovare il
style.css e il file econ sto bene
con quello ho dimenticato di copiare lo stile
file va bene così ora possiamo iniziare
lavorando un po ‘con il nostro spigoloso
applicazione quindi la prima cosa che ho
vorrei mostrarti che ho questo corso
ora possiamo fare cose come l’associazione dei dati
ora il binding dei dati è diventato in Angular 2 it
sono diventati dati unidirezionali che legano il mondo
molte discussioni hanno detto molte persone
quell’angolare è stato davvero spaventato da
Facebook e reagire perché reagisce
non usare veramente non usa davvero i dati
vincolante ciò che ha un legame dati unidirezionale
tutto il resto è basato su eventi e
Hanno detto che vogliamo fare qualcosa
simile quindi perché non farlo così
sto creando facciamo qualcosa di simile
questo sto creando una variabile che chiamerò
esco con me e gli darò un valore di TB
e poi voglio usare questo dentro
il mio modello ora questa è una stringa che ha 6 anni
ha introdotto qualcosa chiamato il
stringa multi-linea ma lo fai usando
la spunta posteriore come questa e poi di
Ovviamente puoi aggiungere elementi che puoi fare
qualunque cosa tu voglia abbiamo fatto l’eliminazione e
questo perfetto quindi ora posso creare
in realtà una stringa multi-linea fuori di questo
uno e rendere più facile quanti di voi
avere
reattore sì, va bene, in realtà è perché
Inizio a piacermi Odio ancora il
fatto che devo mettere HTML con
JavaScript del caso ovviamente lo dirai
io no no non è gsx II non sono sicuro
Ho sentito tutte le storie e tutto il
argomenti per cui sono stato in questo settore
troppo lungo per capire quando hai
codice spaghetti che stai effettivamente chiedendo
per guai potrebbe funzionare, ma lo sono
Non sono sicuro, quindi lo so sempre io
Mi piace separare il mio codice HTML in realtà
il mio JavaScript anche quando sai che l’abbiamo usato
e abbiamo detto che non ti è permesso
usa qualsiasi JavaScript vince dentro il tuo
funzione di rendering che conosci come te
esegui il rendering come è supposto
da fare e ancora si ottiene la gente
facendo ogni genere di cose miste che conosci
è stato lo stesso che conosci e
finita e non conosco altre persone se
non lasciano che la loro storia sia questo
finiscono per farti sapere che pensano
che possono fare meglio di e loro
precursori e si scopre a volte
loro non fanno ma torniamo qui così io
creato quello e ora questo è in realtà un
HTML semplice direi deve e poi di
Certo che con il mio caro metterei qui il
dati quindi questo è il mio primo dato
vincolante è un legame dati unidirezionale così
non invia nulla indietro semplicemente
guarda dentro il mio modello dentro il mio
componente classe e trova che ho
una variabile precedente chiamata data o in realtà
un campo chiamato dati ci vorrà questo
valore e lo mostrerà lì così se
Sto salvando questo ricompilerà e
dovrebbe mostrare qualcosa qui
sì hai ragione perché questo non è un
dati digita lui grazie vedi Stack
L’overflow avrebbe aiutato in questo modo
tornando qui ora ho questo
sto mostrando che sto mostrando le cose
e posso sapere che posso lavorare con
Posso usare l’associazione dati unidirezionale in a
modo diverso posso legare a diversi
proprietà che una delle proprietà avrebbe
essere stili non a colori e poi ovviamente
stili è uno degli attributi conosciuti
e ci vuole
in realtà è un soggetto di stile quindi
qualsiasi cosa posso mettere lì dentro come
il colore del colore di sfondo e il carattere
qualunque cosa io possa effettivamente mettere qui come
bene e ora ho bisogno di acquistare un valore
e il valore deve essere un nome di a
colore non riesco a mettere il rosso in questo modo perché
se metto il rosso in questo modo, in realtà lo farebbe
inizia a cercare una variabile chiamata rosso
e non lo trova ho bisogno di mettere un
stringa rossa quindi posso fare come questo, invece
e salvalo così se metto la stringa in rosso
quindi mostrerà TB nel punto Stiles rosso
il colore è rosso okay salva forse questo
legato sapere perché non perché è un
stile singolare come questo mi dispiace così il
lo stile del colore è rosso, quindi ottieni
così come ora, questa è una strada a senso unico
legatura dei dati Posso fare di più in cui posso entrare
qui e prendere alcuni dati e direi
sai cosa voglio creare un input
elemento e quindi direi tipo di input
è uguale al testo e quindi direi di
Ovviamente il valore di quel testo sarebbe
i dati che abbiamo appena aggiunto sembrano
quindi ora devo essere qui è esattamente
gli stessi dati ma quello che voglio normalmente
è quando io uso cose come elementi di input
Voglio i dati ogni volta che lo cambio
essere fuori bulimico ora non capisco il
possibilità di non doverlo sapere
possibilità di ottenere i dati così che io
può fare è specificare non quello che voglio
i dati e il modo in cui fai ciò che dici
che ogni volta che qualcuno cambia l’input
questo è un evento ora, ecco l’altro
legando i dati in modo direi i dati
vincolante in un modo per l’origine, quindi sto inviando
dati indietro ora ma questo è un metodo così
questo è un evento che si aspetta che io invii
il metodo JavaScript così come questo
funzionerà sarebbe quello di scrivere a
metodo o effettivamente scrivere il codice
direttamente così potrei stare qualcosa di simile
questo punto evento punto target entrambi i valori
equivale a dati così posso salvarlo ora e
ora ogni volta che sto cambiando qualcosa io
avere un collegamento dati bidirezionale ora è a
tipo di associazione dati bidirezionale e il
cosa che la ragione per cui leggono dicono
che non vogliamo che sia
ovunque è perché era così
creando molti problemi con tutti quelli
conosci i cicli di digestione e più vecchio di te
conoscere osservare di osservare tutto il
le modifiche all’interno dell’input stavano creando a
molti problemi e poi ottieni un riassunto
ciclo che innesca un altro ciclo di digestione
e così via e così via in modo che volevano
evitare questo e quello è il modo in cui hanno fatto
ma ora diventa un po ‘troppo
ingombrante e ogni volta quando io
voglio fare qualcosa se devo farlo
in questo modo si sente un po ‘troppo
quindi un modo per alleviare questo problema è
per iniziare a usare diverso per usare a
approccio diverso e diverso
approccio è quello di utilizzare qualcosa chiamato ng
modello ovviamente quando usi il modello ng
questo è troppo nel modo in cui devi farlo
a conosci un po ‘diverso te
devo dire che entrambi ne conoscete uno
dalla fonte e dalla sola via alla fonte
e usi qualcosa che chiamano il
banana in scatola perché si chiama banana
nella scatola perché sembra che tu
sapere se rimuovi questo sembra un
scatola all’esterno e poi la banana
dall’interno lo sai, ecco perché
lo chiamano così, ce n’è un altro
ragione pratica per questo ogni volta a
Almeno all’inizio vedi che no
pensa così quale era quello giusto dentro
lo sai dentro le parentesi o
le parentesi all’interno di quella giusta così
ora quando ci pensi è banana in
una scatola sai esattamente cosa devi fare
fallo così ora se salvo
questo e dire usare ng-model lo dirà
mi dispiace non ho idea di cosa sia il modello ng
di nuovo ho l’errore qui se guardo
in realtà è piuttosto esplicito
un’altra cosa quindi se tu sai se tu
guarda il messaggio di errore ora è molto
ha molto più senso che dice
qualcosa come non posso non può legare a ng
modelli non è non è conosciuto
proprietà che significa che ho qualcosa
che è manca quindi sì è qui
Lo trovo non so esattamente esattamente
cosa sta succedendo, forse dovresti
mostra che dovresti dirmi dove ng modello
viene da così ora che cosa devo fare I
devo tornare nel mio modulo e dire
oh dal modo in cui abbiamo alcune dipendenze
qui così sarà una delle dipendenze
importazione di importazione vieni si chiama il
modulo moduli perché ora siamo noi vogliamo
per usare cose come te conosci legate a
due forme di input e poi viene da
forma angolare / forma punto e virgola e poi
direi per favore importa quel modulo così
rendere questo modulo e il suo contenuto
disponibile per qualsiasi componente che ho
dentro il mio modulo interno, quindi se lo sono
tornando indietro e risparmiando ora vedremo
che questo è tornato qui e posso farlo
cambiamenti e tutto mostrerà il loro
un’altra cosa che posso fare con quello che sta succedendo
al mio componente dal modo in cui posso tornare indietro
qui nel mio codice di Visual Studio e
cambia un po ‘i miei riferimenti e
il modo in cui lo farò dirò che io
voler escludere alcuni di essi
file Torniamo qui penso di avere
qui da qualche parte le impostazioni tornano indietro
qui e cosa fa in realtà
rimuove i miei file javascript e il mio
File di mappe JavaScript, quindi lascia che ti mostri
come sembra che sia così
dice ogni volta che vedi il file di un punto J se
c’è già un file TS con lo stesso
nome si prega di rimuovere il file GS se si
vedi il file di una mappa di J se vedi qualcosa
che conosci già come un file JS
lì per favore non mostrarmi tutto
altrimenti così lo rende molto più facile
per farlo, quanto 10 minuti ok
Bene, così abbiamo ottenuto che siamo arrivati così lontano ora
vediamo se torniamo ora eccoci
prendi questo, mostriamolo qui
facciamolo è per sapere, dai
questo è già stato fatto questo è il k1 ok
e poi questo qui dentro, quindi anche noi
riavuto questo va bene così ora abbiamo
questa una delle cose che conosci i dati
è hard-coded quindi mi piacerebbe ottenere il
dati da un servizio così un altro bene
cosa e un altro sai che cose
hanno fatto davvero molto bene
aggiungo che l’iniezione di dipendenza così io
puoi dire qualcosa come creare un nuovo file
questo sarebbe il mio servizio di caricamento punto TS
questo è un servizio che è esportazione
ogni volta che ho bisogno di qualcosa per essere visibile
fuori ho bisogno di esportare così se ne hai
errori e dicendoti okay, dimmelo
riguardo al servizio app ma non mi sembra
per trovarlo sai che ti sei dimenticato
in realtà per esportare la classe stessa
Esportare il servizio di classe e poi lo sono
dicendo in realtà nessuna parentesi qui
mi dispiace per quello fammi chiudere questa app
servizio e poi dentro il mio servizio app che
avere un metodo chiamato get name e quindi
ovviamente il nome verrebbe restituito
dal servizio TB va bene così sappiamo che arriva
dal servizio e ora posso andare qui
nel componente dell’app e all’interno della mia app
componente direi punto app di importazione
servizio nessun osservatorio dal punto in alto
servizio ed è nella mia cartella corrente così
posso usare quello e poi è salvato
nulla è cambiato in realtà, quindi non è così
fare qualche differenza ma ora ho bisogno di questo
uno per essere parte della mia domanda così io
dovrebbe o essere parte del mio
iniezione di dipendenza quindi direi
fornitori e aggiungerò il servizio come
fornitore ok di servizio qui e in
Per avere quello iniettato ho bisogno di
aggiungilo nel mio semi-costruttore così
costruttore e nel costruttore i
avere un oggetto applicazione privato
in realtà oggetto di servizio SVC del tipo
servizio app quindi se ricordi rifletti
metadati che ti stavo mostrando come uno
dei pacchetti ora quello che fa
guarda qui e dice okay, no tu
ora hai un file dattiloscritto e tu
voglio iniettare in quello un oggetto di
il tipo di servizio, quindi cosa fa l’angolare
guarda nei miei fornitori perché
senza questo fornitore non lo sa
esattamente ciò che un appt servizi e come
istanziarlo in modo che crei un
istanza di quella ora la parte bella
è che ogni singolo componente figlio o
qualsiasi componente sto usando ora in questo
componente utilizzerà questa istanza in modo tutto
i servizi sono Singleton, quindi se io
bisogno di creare il secondo singleton I
so che suona un po ‘sai
tortuoso anche tu lo sai perché non lo è
davvero singleton più ho bisogno di
specificarlo a un livello diverso, quindi se io
ha bisogno di un componente bambino freddo da avere
una diversa istanza di quel servizio I
avrebbe bisogno di specificarlo di nuovo all’interno
la lista dei fornitori se non lo faccio allora
il componente andrà al suo genitore a
al suo genitore al suo genitore fino a te
raggiungere il modulo e poi a guardare
anche tutti i moduli dipendenti che ho
così saranno prese tutte le importazioni
nella considerazione per trovare
le informazioni sul servizio dove
in realtà è iniettato così ora voglio
usa questo direi qualcosa come SVC
dot prendi nome e questo lo farò
in realtà dire questo punto theta equivale a giorni
quindi uno degli errori che faccio sempre
sai che è dimenticare di mettere il DS
perché lo sfondo nitido C sai
mi dice che questo è sempre lo sai
è sempre l’implicito a dattiloscritto
ti richiede di farlo, quindi se vedrai
non dirai mai che i dati non sono definiti
solo vedere se non è qualcosa che tu
perso così ora mostra dal servizio TB
ovviamente all’interno del costruttore te
non dovrebbe fare nessuno di questi tipi
cose che non dovresti chiamare altri servizi
uno dei maggiori problemi che potremmo avere
qui sai quando inizi
chiamando ai servizi che sono
in realtà un sincrono o servizi che
prendere un po ‘più a lungo in modo unidirezionale
è quello di utilizzare una vita di hook di evento
il ciclo ci ha invitato, quindi fammi fare questo
Ne farò uno proprio così su di me
componente sì farà un’implementazione
implementare su di esso in esso ma su di esso
dice oh, devi avere un
metodo qui chiamato ng proprio in esso e poi
l’energia sul metodo init sarà
invocato automaticamente così posso farlo
dentro il mio e unire il metodo init il
implementa solo in essa non è in realtà
davvero necessario perché JavaScript
non si preoccupa delle interfacce ma
è molto buono per me perché poi
mi rende onesto e non mi dimentica
per aggiungere il motore in esso così se lo metto
lì a livello di componenti vorrei
so per certo che devo farlo
ce ne sono altri come ondestroy così
scaricare e così via così loro sono il
predefinito che puoi, che puoi
usalo ancora adesso funziona se
ora chiamarlo servizio HTTP che posso fare
che ora c’è un’altra cosa che io
ho bisogno di fare con il mio servizio perché il mio
il servizio potrebbe non vivere in isolamento
supponiamo che questo servizio sarebbe
piace utilizzare ora un servizio HTTP a
invocare i dati cosa dovrò fare io
dovrà decorare questo con a
netto con un decoratore chiamato iniettabile
iniettabile di nuovo il nome potrebbe essere
fuorviante perché potresti pensare oh
questo significa che questo è un
servizio iniettabile tutti loro sono
iniettabile per impostazione predefinita quando si aggiunge
iniettabile tu dici oh, in realtà voglio
fare parte dell’iniezione di dipendenza e
ogni volta che vedi una dipendenza all’interno del
servizio salire il magazzino e trovare il
la dipendenza è anche inclusa in là
lascia che ti mostri l’ultima soluzione per dire
sì sì, solo veloce voglio mostrare
tu che alcuni la soluzione finale qui con
con il servizio ho il servizio up
e dico che ho bisogno di una dipendenza
sul servizio HTTP e perché mi inietti
Servizio HTTP automaticamente posso usare il
Servizio HTTP come dipendenza senza la sua
iniettabile otterrò un errore nel dire
mi dispiace non trovo iniettabile 50
minuti non so come tu sai come
bene è avere una buona presentazione
spero che tu abbia abbastanza informazioni o
almeno un bene si conosce il menu degustazione così
andrai là fuori e proverai a usarlo
se sei veramente interessato, non so se
c’è un interesse sotto codice mostrami
la mano e posso metterla sul mio github
va bene allora metterò che vedrai il
il routing così è github.com /
Tibor 19 Vorrei davvero aggiungere ora che ho
per darti la presentazione che aggiungerei
sull’ultima diapositiva che il repository Github
nome in modo da poterlo ottenere dal
presentazione abbiamo parlato di alcune delle
le cose che abbiamo visto fuori dagli schemi
cose come te conoscono moduli e modulo
abbiamo alzato gli occhi non proprio guardati ma lì
è un servizio HTTP una cosa che avresti
allenarsi è guardare reattivo
estensioni se hai lavorato molto con
promette e se non vuoi spendere
tempo nel mondo delle estensioni reattive
ricorda solo una funzione
chiamato a promettere e poi quella volontà
risolvi saprai che ti riporterà a
la terra promessa che non conosci
terra osservabile
gioco di parole voluto grazie
abbiamo un sacco di domande e solo noi
hai due minuti ok, devi essere
veloce ce n’è uno qui mi consiglia
migrazione dell’angolo di produzione esistente 1
alla migrazione angolare 2 è un it’s a
parola forte sai come non lo so
so che conosco i tentativi angolari di vendere il
storia che è molto facile da fare
migrazione ti dirò dalla mia
esperienza che conosci come non con
angolare ma con altri quadri voi
sapere nonostante tu conosci il
promette che stanno facendo o l’osservato
osservazioni stanno cercando di farti
lo so ancora non lo è ancora
lavora come facile sai tornare indietro di 10 anni
e parla con Microsoft e loro lo diranno
tu sp2 asp.net è come te
sai vb sai vb.net tu lo sai
stavano usando esattamente lo stesso
trucco di marketing per tenerti d’occhio
con le loro cose se non hai
problemi di prestazioni 1.5 sei ancora tu
so che è una versione molto buona da provare
migrare 1.5 rimanere fino a quando
puoi puoi rubare lo sviluppo
Google continuerà a supportarlo e
continueranno a investire in esso
e per continuare a migliorarlo effettivamente
sai che sono un consulente e lo darò
sai che le due parole rispondono
dipende sì guarda il tuo tuo
cose sì, penso che abbiamo 30 secondi
o qualcosa in quale caso d’uso
preferisci e glutes che distruggeresti è 0
quindi grazie anche tu sei molto molto veloce
grandi applicazioni line-of-business
le applicazioni aziendali sono molto buone se
hai un sacco di dati che provengono
il server sai che avremmo reagito
in realtà brilla in quel modo come sai
hai un sacco di abbonamenti che tu
bisogno di fare sul server e poi tu
è necessario aggiornare solo la dimensione parziale del
schermo penso che reagire è molto meglio
che angolare al momento, ma sono
lavorando lì è in corso una guerra, lo sai
è un lavoro tranquillo al momento di nuovo se
hai cose come Facebook dove tu
avere un flusso di dati e sempre
l’aggiornamento sai che non si vuole
Aggiorna l’intero schermo che non vuoi
fare un sacco di componenti intorno a questo
ha bisogno di essere rear-ended vorrei
Vorrei usare il reattore è perfetto per te
conosco lo scenario del caso d’uso e lo sono
usarlo perfettamente mentre cose simili
Gmail sai dove hai un sacco di cose
dati che devi leggere e di cui hai bisogno
per aggiornare e hai un sacco di
cose indipendenti che potrebbero aver bisogno di
lavorare insieme l’uno con l’altro angolare 2
potrebbe essere ballerino grazie a tutti per essere venuti
e dategli un miglio in più grazie
benvenuto a questo discorso chiamato un rapido
introduzione all’angolare 2 prima di arrivare
iniziato con le mani in mano quanti di voi
ho fatto in angolare 1 va bene una fiera
quantità di numero quanti di voi hanno
fatto angolare o visto angolare 2
molte molte ok, quindi hai già iniziato io
non sono sicuro del motivo per cui hai davvero bisogno di un rapido
introduzione ad angolare se già
ho iniziato a farlo sperando che tu possa ottenere
vedere alcune cose nuove l’angolare
2 è in realtà appena rilasciato una coppia
di settimane fa è arrivata come versione di rilascio
era nel lavoro per quasi o
in realtà più di due anni perché google
annunciato la loro intenzione di
uscendo con una nuova struttura su
due anni fa, iniziamo da un breve
presentazione il mio nome è Deborah Kovich
DB breve sono originario della Romania
trasferito dalla Romania 1996 e da allora
In realtà sto viaggiando per il mondo al
momento che sto vivendo a Tenerife è un
isola molto bella nell’immuno nel
Oceano Atlantico al di fuori della costa di
Nord Africa Ho fatto programmazione
dal 1991 quindi sono tutti i suoi 25 anni
un quarto di secolo molti di voi conoscono a
molto sviluppo conosco la mia esperienza
è quasi vecchio come fanno le persone
lo sviluppo front-end oggi non è così
sì, ho fatto ho fatto un sacco di questi
Sono stato un allenatore negli ultimi 12 anni
anni e non solo formatori ero io
ha lavorato anche come sviluppatore perché io
mi piace davvero tenerli, sai mantenere
è reale e cerca di capire esattamente
cosa gli altri hanno a sapere
soffrire per essere in grado di creare
quei momenti insegnabili che ho fatto
una conferenza che parla per le sette precedenti
anni faccio un sacco di mentoring tutto
to.net e tecnologie web se al
l’inizio era solo una velocità della rete I
capito a un certo punto che io davvero
bisogno di fare di più sapendo di guardare dentro
Sottotitoli di JavaScript sul lato delle cose e
poi da lì a fare un sacco di cose diverse
quadri per vedere come
posso migliorare il lavoro che sto facendo sono a
Microsoft MVP e un membro interno di ASP se si
sono sul sai come SB insider è
una specie di elenco con persone che
Microsoft cose sono specialisti
e ci viene affidato il loro
piani e loro segreti e poi puoi
vedi su quell’elenco un sacco di discussioni
su tutto tranne Microsoft
tecnologie perché ce ne sono molte
Loro fuori là sono un padre che ho due
figlie e un geek ovviamente altrimenti
Non sarei qui se sei su Twitter
puoi trovarmi a Tibor 19, se lo fai
ogni tweet oggi usa l’hashtag
vai a cph perché poi vedrai
li sul grande schermo sai qualunque cosa
devi dire di presentarsi per gli altri
la gente ora la mia presentazione powerpoint
non era così importante la cosa
era su questo era questo diapositiva che ho
in realtà un piccolo ordine del giorno quello che siamo
parlarne è una storia
lezione allora andremo a guardare il
Guida di avvio rapido quindi di nuovo scuse per
le persone che hanno già lavorato con
angolare 2 perché potrebbe esserci un po ‘
un po ‘ di delusione ma vediamo
allora parleremo del
moduli componenti servizi e alcuni di
la roba pronta all’uso che puoi
ottenere con angolare 2 in modo da non dover
reinventare la ruota ogni volta che si avvia
e tu un nuovo progetto con angolare 2 così
la lezione di storia angularjs è angolare
un framework JavaScript da parte di chi lo sa
dalle mani che mi hai mostrato di più
oltre la metà delle persone deve almeno
sapere cos’è angolare Google
provare a fare è creare un quadro
ha detto che non vogliamo essere troppo
prescrittivo non vogliamo essere MVC
non voglio essere mvvm ma ciò che vogliamo
creare è a 20 vie per te come a
sviluppatore per aumentare il motivo HTML
perché la programmazione dichiarativa è
molto più potente del
imperativo 1 e programmazione imperativa
era la roba che stavamo facendo
jquery di solito mi piace fare un confronto
sai quando spiego alla gente il
differenza tra la chiarezza di e
imperativo in un modo che possono
capire anche se non ci sono
i programmatori vanno così, presumendo
Mia moglie mi vuole sapere per comprarne alcuni
latte in modo imperativo in cui verrà
a me e disse per favore vai al tutto
Via, porta le scarpe sulla porta
al piano di sotto e poi girare a destra andare
200 metri girare a destra andare dentro il
il negozio prende la scatola e poi lo sai
fai tutti i passi indietro finché non vieni
torna a casa e poi metti il latte nel
frigo bene questo è ok è molto
prescrittivo e sai esattamente cosa
fai passo dopo passo a volte il
il che significa che devo comprare il latte
è nel profondo di tutto ciò che conosci
tutta roba di chiacchiere che ottieni
dovrebbe avere in giro in modo dichiarativo
Ho appena detto qualcosa come andare a comprare latte
conosco l’implementazione a cui tengo
Alla fine della giornata, così poche persone lo farebbero
fai l’implementazione perché sai
dopo un po ‘penso che sarò in grado di farlo
ottimizzare tutto questo viaggio e potrei
in realtà prendere l’ascensore perché io
pigro oggi potrei davvero prendere il
scorciatoia oh qualunque cosa tu sappia per lei
ancora non importa perché io finisco
portare il latte a casa così sei tu
conoscere in un modo la differenza tra
loro ora angolare 1 fatto bene può essere
in realtà molto potente perché quando tu
inizia a creare le tue direttive in
angolare 1 ciò che ottieni effettivamente
nuovi elementi come HTML che mostrano il
intento quindi cosa vuoi fare ora
ci sono stati molti problemi con te
sappia come 23 anni fa non non a due
anni fa, Google ha capito che il modo
hanno iniziato tutta la roba angolare
potrebbe non essere il più adatto lo sai
andava bene per i loro progetti
soprattutto quando hai le persone
lavorando sul framework facendo il
progetti anche perché poi sai
esattamente quali cose vuoi evitare
ma quando li ha ottenuti, conosci il
attenzione che ha ottenuto oggi molto
la gente realizza oh mio dio non funziona
Oh angolare 1 è così stupido che ci vuole così
tanto tempo non è che tu lo sappia
un sacco di problemi di prestazioni ha molto
di giorni e molto e molto
le persone si lamentavano, così hanno detto
ok, quello che dobbiamo fare ora è andare
di nuovo alla scheda di progettazione di cui abbiamo bisogno
capire cosa abbiamo sbagliato e come
dovremmo farlo come dovremmo farlo
meglio così tutto il progetto intero i
direi
a volte è a gennaio 2014 e così
culminato con un grande annuncio
hanno fatto nel settembre 2014 quando loro
detto angolare 1 è morto lunga vita angolare
2 e poi tutti hanno dato di matto
incluso me e poi sai che ero
molto molto arrabbiato perché e io sono ancora dentro
un modo sconvolto perché quello che ho detto loro
allora e cosa dirò ancora a loro
ora è che tu sai che potresti avere
hai scelto un nome diverso che conosci
cercano di convincere un Microsoft onesto I
direbbe che sai che scelgono il nome
quello era molto clamoroso con il
comunità di sviluppatori hanno detto che facciamo
che sai ancora proviamo a
replicare qualsiasi cosa abbiamo fatto finora e
quindi usa bene quel nome quindi essendo un
società di ricerca che sai dovrebbero avere
noto che se vai su google e dici
mostrami qualcosa relativo all’angolare
la maggior parte delle risposte pertinenti sarebbe
relativo all’angolare 1 almeno per il
primi adattatori e quello era uno dei
i miei maggiori problemi si sa quando io
ho iniziato a lavorare con angular 2 e I
ho cercato di trovare i problemi di altre persone
avevo dove li avrei trovati?
google è sicuro e lo farebbe
è stata la piattaforma per farti sapere
il posto per trovarlo quindi era un sacco di
prove e un sacco di combattere te
conosci la mancanza di documentazione e tu
conoscere il modo in cui gli altri stanno pensando
quindi era abbastanza difficile, ma poi
hanno lavorato molto duramente e sono riusciti
fare entro la fine dello scorso anno in realtà
2015 sono riusciti a venire fuori con la
primissima meglio quello che penso in
l’inizio di dicembre hanno
alfa per un po ‘e poi hanno iniziato
venire con i betta e poi loro
anno hanno iniziato a giocare con
i candidati al rilascio e loro hanno
cambiato hanno ucciso molto voglio dire che ho
fatto già due workshop e tutti
una volta sola quando ho fatto un seminario
ha dovuto riscrivere tutta la roba perché
sai che il cambiamento è nel mezzo e io
Farò un seminario tra due giorni e lo farò
dover riscrivere di nuovo tutto il materiale
ora questa è una versione di rilascio speriamo
sarà in grado di sapere in giro per a
mentre più a lungo quindi il prossimo workshop i
potrebbe riutilizzare parte del lavoro anche se
Sapresti che le mie speranze non sono molto alte
quando si tratta di questo in ogni caso in modo
questo è angolare 2 ora se sei qui
pensando che ho fatto un sacco di cose
angolare 1
So che angular2 mi dispiace che tu sappia il mio
condoglianze ma non è quello che è successo
quello non è quello che succederà
o sono concettualmente come dire
equivalente se non sono veramente voi
conosci lo stesso ma l’idea dietro di loro
è quasi da dire ora ne hanno fatti altri
scelte hanno deciso di usare dattiloscritto
quindi l’intero angolare 2 è scritto dentro
dattiloscritto e parlato di voi conoscete il
grandi giganti che lavorano insieme al risultato
è di nuovo piuttosto impressionante uno dei
cose che accadono essendo un membro interno di ASP
ed essendo un EVP per Microsoft ottengo
invitato al quartier generale di Microsoft
una volta all’anno fanno una conferenza dove
sei a conoscenza solo a porte chiuse di Microsoft
persone e quegli MVP e abbiamo
L’India è finita in Das che non lo siamo
permesso di parlare di qualsiasi cosa
che stanno mostrando e così via e giusto
come nota a margine abbiamo potuto vedere l’asp.net
core back nel 2013, quindi l’abbiamo visto tre
anni avevano tutti gli altri più o meno
perché si sa che è stato uno dei
vantaggi o in esso è ancora uno dei
vantaggi di essere un MVP di Microsoft
il punto è l’anno scorso a novembre
uno dei relatori era nientemeno che
Brad green Brad green è il programma
gestore da google che si occupa di
angolare 2 quindi era dentro quelli chiusi
le porte ci dicono cosa sta progettando Google
fare con angolare 2 e come sono
usando dattiloscritto e così via quale era
di nuovo molto impressionante e in un certo senso
sentivo che Google stava facendo bracconaggio, lo sai
come gli sviluppatori in Microsoft
comunità da adottare e quindi iniziare ad essere
sai difendere il loro per loro
anche la tecnologia funzionava già
con l’angolare 1 stavo già lavorando
con angolare 2 e poi ovviamente ho avuto
per dirgli che non mi piace il nome
e ha detto sì, so che non lo farai
solo uno ce l’abbiamo, ma ora lo è
troppo tardi non possiamo tornare indietro e fare
nulla su di esso quindi questo è molto
il momento interessante ora è il tempo di strisciare
lo sviluppano in dattiloscritto quasi tutti
gli esempi sono in effetti in dattiloscritto
per quattro giorni e la ragione per cui hanno scelto
il dattiloscritto è perché funziona molto bene
con javascript in realtà suona meglio
di Java
Direi nella maggior parte delle situazioni così
quanti di voi non sanno cosa?
dattiloscritto è tutti sanno di che tipo
script è a posto perfetto un superset di
JavaScript rende la vita più semplice, quindi se
prendi semplicemente un file JS e rinomini
a TS si ottiene esattamente un identrio
file sarà esattamente lo stesso sul
dall’altra parte e funzionerà solo ora
i vantaggi di utilizzare questo è perché
compila alla fine della giornata in un
es5 di nuovo il versioning conosci cinque anni
anni venti sedici anni 2017 e così
su così quando si ottiene un file TS che compila
di nuovo in un es cinque o qualche volta tu
potrebbe essere necessario compilarlo in un es 2015
e poi si esegue un transpiler bolla
quello che prende da te è il 2016 in un
ds5 larga tutte queste cose perché non tutte
i browser sono nati uguali ad alcuni di loro
sono più uguali degli altri se tu
sai se puoi non averlo
lo stesso supporto per tutte le cose così
alcuni di loro potrebbero aver bisogno di polyfill alcuni di
li ho bisogno di altre cose quindi ci sono a
molte cose che sono successe così le mie
ID per fare una rapida introduzione
lo sai troppo debole per usare il
guida di avvio rapido che Oracle il libro
per google è uno di quei grandi te
conosci il grande gigante scusa fanno il Java
cosa che la cosa javascript sì sì
Google ha messo insieme molto bene
documentazione se non hai usato
per ora si prega di farlo , in realtà è
molto bene ci sono un sacco di curiosità
ci sono molti buoni
documentazione che stanno spiegando molto
delle cose molto bene ed è successo così
che lavoravo con il ragazzo che è
responsabile della documentazione effettivamente e
Lo conosco e lui è lui è lui è abbastanza
Gooden quando appassionato di ciò che è
facendo così lascia che ti mostri quello che ho ottenuto io
ha la guida di avvio rapido fa tutti
vede okay il codice va bene così noi
ho avuto il rapido avvio angolare, solo
ho seguito i passaggi che ho effettivamente copiato
e incollare con lo sai con il normale
errori quando si copia e incolla e
poi ho trovato fortunatamente ciò che era sbagliato
con esso prima che io mostri
qui so II copia tutti i file da
google site in realtà da angular io
sito e poi li metto in un progetto
e poi eseguo npm install come loro
istruito e quindi eseguo npm dall’inizio
assicurati che tutto funzioni e
apparentemente funziona quindi prima di tutto npm e
package.json che mi dice solo cosa
le dipendenze sono ciò di cui ho bisogno in ordine
essere in grado di correre su un angolo
applicazione quindi ho bisogno di alcune cose comuni
Ho bisogno di un compilatore Ho bisogno delle cose principali
ho bisogno dei moduli e poi di HTTP e
quindi qualcosa che ha a che fare con il
browser nella dinamica del browser ora a
browser di piattaforma a Bruxelles è dinamico
la via per la squadra angolare a
astratto il modo in cui conosci il
implementazioni che sono necessarie in
per lavorare con la cupola o per lavorare
con un’applicazione nativa su a su a
dispositivo mobile quindi sto usando router e
quindi aggiorna nel caso in cui tu lo sappia
voglio davvero combinare il mio angolare 1 e
progetto angolare 2 in un unico progetto
sai di usarne alcuni alcuni
alcuni dei codici esistenti qui altro
le cose che sono necessarie è stupendo
stupendo è in realtà il sistema dei moduli
necessario per poter essere in grado di
per aiutare i browser a capire cosa
modulo e di nuovo quando parliamo
moduli abbiamo due diversi tipi di
i moduli qui al gioco uno sono i
Modulo JavaScript o dattiloscritto
modello che è lo stesso che è il modo
per me incapsulare il codice e fare
sicuro che nulla vada oltre lo scopo
di voi conoscete quel modulo se non lo sono
esplicito su di esso in modo da indicare che sai
ma il punto è quando voglio mostrare
qualcosa al di fuori di te conosce un file
JavaScript mostra tutto all’esterno
il file a meno che tu non lo stia mettendo
all’interno di una funzione che sta invocando
automaticamente e utilizzare l’effetto collaterale di
eseguendo bene la funzione quando vuoi
fare un modulo in JavaScript o un
es2015 lo dichiari solo all’interno del
file e quindi non esportare nulla
da esso significa che tutto è
locale a quel file in modo che sia uno dei
moduli e poi ovviamente
avere la nozione di moduli angolari
che sono stati introdotti di recente e poi
finalmente sono arrivati al taglio finale così
ora fanno parte del nuovo
la specifica di un modulo angolare è un modo
per noi come in angolare 1 in realtà a
raggruppa insieme cose di cui abbiamo veramente bisogno
per le nostre applicazioni in modo da tornare a
questo sto usando riflettono i metadati
rifletti i metadati che hai usato sai che è così
effettivamente utilizzato per la dipendenza
iniezione e poi alcuni altri
altre librerie che sono lì dentro
impostazione predefinita nel caso in cui si desideri andare oltre
con esso e usarlo allora abbiamo il
index.html index HTML è semplice come questo
potrebbe farti dire che sai di cosa si tratta
un rapido avvio angolare abbiamo bisogno di un po ‘di poli
campi in cui sono necessarie 44 linee
per me poter essere in grado di eseguire questo
applicazione su diversi browser
compresi ie9 sai che mandano moderni
browser, ma sono tornati nella loro
parola e detto usiamolo per I 92
perché ci sono un sacco di persone
usando I 9 là fuori e poi questo è
dove inizia la mia applicazione, dice
si prega di configurare il sistema j syst MJS
sarebbe quello che sarebbe in carica
di caricare tutti i moduli e poi i
avviare la mia applicazione dicendo sistema
dot import app ora questo sarebbe più o
meno della direttiva ng up in cui eri
angolare 1 questo è dove indosso il mio
avviata l’applicazione non ho bisogno di
caricare esplicitamente qualsiasi roba angolare
perché, perché la mia app lo farebbe
l’applicazione lo facciamo così ancora due
cose che ho qui per la configurazione
scopi uno è la configurazione di TS questo è
un file di configurazione per il mio dattiloscritto
ogni qualvolta modifico qualcosa in a
file dattiloscritto perché l’ho eseguito
all’interno del codice Visual Studio Visual Studio
il codice lo sa e poi io
automaticamente utilizzerà queste informazioni
compilare il file e creare creare
File JavaScript fuori dal mio tipo di script
file e poi ho appena un Taipings
Jason typing’s Jason sono i nostri file DTS
file di definizione per il mio top per il mio
librerie di script perché JavaScript tu
conosci normalmente quando lavori
JavaScript puoi ottenere molti metodi
e non ha davvero il tipo
informazioni e per questo quando tu
la stampa pensava che tu non ti facessi conoscere
il resharper ti funziona come te
non avere tutti i metodi che potresti
essere in grado di usare si potrebbe ottenere un altro
errori e quindi abbiamo il sistema J così
questo è il nostro primo file come questo
dovrebbe funzionare anche con es5 non solo
con i file TS usa il
funzione invocata immediatamente qui nel
esecuzione e stiamo configurando il sistema
sistema JSI dire che ogni volta che vedi
qualcosa che inizia con m pm per favore
utilizzare le cartelle del modulo nodo in
la produzione sarebbe stata cambiata nel mio CDN
probabilmente o per qualcosa di simile così
sa esattamente cosa portare i file
da e poi sto facendo un po ‘di mappatura così
ogni volta che sto mettendo qualcosa dentro il mio
sezione di importazione se non sai cosa
le sezioni di importazione sono solo quelle
pensato per altri due minuti e poi io
ti mostrerò di cosa si tratta nella mia importazione
sezione ogni volta che inizio qualcosa con
app lo saprà oh quindi avrò bisogno di guardare
nella cartella chiamata app che
capita di essere questo piegato dentro il mio
applicazione ogni volta che vedo qualcosa
come n pm dovrò guardare in
la cartella dei moduli del nodo e poi vai tu
conosci e cerca questo al centro angolare
bundle score um DJ s e così via, tutto qui
quelle cose sono in realtà parte delle mie
la mia configurazione del sistema di prigione così sono
solo aiutando il mio ambiente a
capire come dovrebbe funzionare e poi
Sto facendo cose come creare diversi
pacchetti che posso dire per ognuno
uno di loro come comportarsi così per
istanza se qualcuno vuole usare l’app
il pacchetto dirà il punto di ingresso
metodo principale di quel particolare pacchetto
è il file main.js che ovviamente non ho
any main.js Ho un file TS principale ma
quando compilo che sarebbe
trasformato in un pisolino in un main.js
file e poi sto dicendo il default
l’estensione è Jas quale estensione predefinita
JS mi aiuta a salvare le mie battute
e non so se tu se lo sei
era familiare con Scott Hanselman
facendo il keynote la scorsa notte lui sempre
dice che le persone hanno un numero limitato
delle sequenze di tasti quindi dovresti usarle
con saggezza
lo sai scarsamente mettendolo
qui significa che ogni volta che dico a me
dire in mia nel mio file che voglio
importa da qualcosa che non devo
metti un punto a scacchi alla fine di ogni
Singolo ogni singolo nome là fuori così
è per questo che sto usando l’impostazione predefinita
estensione e questo è tutto per il mio
applicazione quindi tornare all’indice HTML
quando dico importare quello che sono in realtà
dicendo che sto dicendo andare alla cartella dell’app
e cercare il punto di ingresso che era
il file TS principale e da lì per favore
avvia la mia applicazione ora prossima parte qui
è un corpo e quindi ho un tag qui
chiamato il mio up non è niente che sia un
Standard HTML ma quello che ho detto
invece ho la mia domanda potrei
ho definito la mia applicazione angolare
quale è la mia app e ti mostrerò di nuovo
in un minuto da dove viene così
la prima cosa che dobbiamo definire è
un modulo ora il mio modulo è un modo per me
mettere insieme le cose per creare riutilizzabili
pezzi di codice così ti creo sai se io
li ho se ho una caratteristica qui io
lo inserirà in un modulo e lì dentro
avrò tutte le dichiarazioni
o le direttive tutti i componenti
che voglio creare e così via
compreso il significato delle importazioni se ho
dipendenze su un altro modulo allora
è lì che li ho specificati di nuovo
se ricordi come hai fatto cose dentro
angolare 1 tu ogni qualvolta dichiari un
il modulo ii ha dichiarato la modalità che utilizzerai
nome e quindi si specifica tutto il
dipendenze ora forse voglio essere un
un po ‘troppo veloce lasciami tornare
la primissima linea di codice lo stesso
la prima cosa che sto dicendo lì per favore
modulo di importazione da nucleo angolare cosa
In realtà sto dicendo che dentro
file di core angolare che se torniamo a
configurazione del sistema J come vedremo lì
esattamente quale file è noto che tu
avere una definizione di qualcosa chiamata ng
modulo quindi ng modulo userò in seguito
qui questo perché ha un annuncio in
davanti ad esso si chiama decoratore come
molti di voi hanno familiarità con i decoratori
pochissimi, quanti di voi sono
familiare con gli attributi
meta programmazione e metadata vanno bene così
quello che sto dicendo qui per favore inserisci questo
classe voglio che tu aggiunga altro
informazioni che non ha nulla a che fare con
l’implementazione stessa è ambient
le informazioni sulla mia classe non interessano a nessuno
almeno dentro la mia classe
non mi interessa l’ambiente interno I
potrei semplicemente prendere questa classe e poi muoverti
e da qualche altra parte e basta lavorare con
ma perché angolare sa di questo
particolare decoratore dirà bene così
vuoi che usi questa classe di moduli up
come un modulo oh e dal modo in cui vuoi
io dentro quella classe per aggiungere tutti quelli
componenti per creare una dichiarazione da fare
un bootstrap per fare qualche importazione
forse un po ‘di esportazione perché vorrei te
sapere che alcuni moduli potrebbero essere riutilizzati
altre applicazioni quindi per favore spinge tutto
quelli là dentro e crea questo tu
conoscere questo punto di partenza per il mio
applicazione ora all’interno delle dichiarazioni
hai bisogno di mettere tutti i componenti
vuoi usare anche all’interno del modulo
se non hai roba al suo interno allora
angolare ti dirà ad un certo punto
scusa ma non vedo alcuna importazione per
quello particolare per quel particolare
componente o per quel particolare
direttiva sei sicuro che quello che?
vuoi farlo perché non lo vedo
da dove viene e poi sto usando
su modulo e sto dicendo okay dentro
Perchè questo modulo funzioni, ho bisogno di farlo
importa un’altra modalità che chiamerai il
modulo del browser questo è quello che fa
tutta la manipolazione di Dom e tutto il
roba dove ho preso il mio sai dove
conosce le mie interpolazioni e le mie
banda e le associazioni di dati che voglio
da usare dentro la mia applicazione e poi io
dimmi che voglio che tu parta dall’app
componente che è componente nella sua
girare è una classe che non ha nulla di più
o meno unità hanno solo una definizione
un’altra cosa che è lì dentro è
in realtà il decoratore di componenti di nuovo a
decoratore l’abbiamo visto prima e poi
il suo angolare che ne è familiare
lo sa e dice oh così tu
voglio che questa classe ora agisca come a
componente quindi come vorresti usare
bene se qualcuno dentro l’HTML che
lo analizzerai quando inizierai
l’applicazione angolare 2 ha a
compilatore
e va e analizza tutto l’HTML che
trova e cerca di dare un senso
di loro così dice oh così dentro questo tu
voglio che faccia per fare cose come sai
come cercare un selettore è a
selettore css3 se hai lavorato con te
Conoscere con CSS o con jQuery che dovrebbe
essere molto familiare, quindi ogni volta che lavori
sai dove si imposta il dollaro che conosci
qualunque selettore II metta nel
parentesi è quello che vorresti fare
ecco quindi cosa succederebbe
il mio quando angolare vede questo file qui
index.html e vede la mia app lo farà
dì oh così in realtà vuoi che me lo metta
qualunque sia il tuo tube per invocarlo
componente ora quel componente se vado
di nuovo qui ha un modello di modello
è in realtà l’HTML che voglio
usa il tentativo quindi se guardi il
definizioni in realtà un modello
componente non è altro che un
direttiva che non ha un HD
componente è una direttiva che ha a
modello quindi se non hai nulla
per mostrare o se sei solo comportamentale o
hai modificato, sai se sei
sei una direttiva strutturale allora tu
non è necessario essere un componente ma a
componente è tutto il resto così quando tu
stavano lavorando con le direttive più
delle direttive che stai creando
in realtà alcuni di loro erano
comportamentale dove andresti e tu
sai fare magari aggiungerne alcuni
funzionalità per gli elementi esistenti
o ai tuoi stessi elementi ma alla maggior parte dei
tempo in cui stavi creando componenti
combinarli insieme e sì
perché siamo in Legoland per creare
come un Lego conosci come un Lego
applicazione o mettere insieme cose in
ordina che funzionino così che io sia
dire qui è che ogni volta che vedi il mio
per favore usa questo pezzo di HTML lì
è rimasta un’altra cosa che io
saltato su quale è la mia voce principale
indica il punto di ingresso principale che conosci
in ogni applicazione hai nullo principale
vuoto o qualsiasi cosa tu voglia sapere
lo chiami in qualsiasi applicazione qui
è il TS principale che sapevi quale
è il primo che sto importando
quando sono questo lo sai che questa è una copia
e incollando che farai sempre il
principale il modulo principale all’interno del tuo
applicazione la raccomandazione di Google è
per richiamarlo modulo il componente principale
dovresti chiamarlo componente e così via
su quello che sto dicendo qui è quello
importare il browser della piattaforma dinamica così io
voglio che tu faccia una compilation dinamica di
il contenuto dei file e poi
Voglio che tu importi il modulo dell’app da
il file ha richiamato il modulo se tu
ricorda che ti ho detto che il mio default
l’estensione è jas quindi non devo dire
il modulo ab dot DOJ posso solo dire
modulo e poi il no poi tutto
altrimenti viene fatto automaticamente creo a
reggiseno platformer un browser di piattaforma
dinamico e poi con questo lo farei
dì per favore avvia l’applicazione da
modulo app quindi è quello che faremo e
allora andrà nel mio modulo lo farà
guarda il componente bootstrap e lo farà
avvia questo componente che dirà
si prega di utilizzare quando si vede nella mia app
che il mio up e quindi sostituirlo con questo
quindi con quello detto posso andare
qui ora e basta eseguire questo direi
npm avvia ciò che npm ha avviato esegue due
le cose su cui gira il dattiloscritto
compilatore e poi la seconda roba
fa funzionare il compilatore dattiloscritto
in modalità orologio significa che qualunque cosa
le modifiche che sto facendo lo faranno automaticamente
riflettendo qui dopo la ricompilazione così
fammi fare questo okay, dove sei?
Questo
probabilmente così qualunque cambiamento sto facendo
qui dovrebbe riflettersi qui così
se dico la mia seconda angolazione dovrebbe
ricompilare e quindi dovrebbe essere mostrato in
qui così semplice che così lo rende
molto più facile per me in realtà fare
sviluppo ovviamente non lo farò
uno schermo lo faccio su tre perché io
bisogno del CSS sull’altro e
in effetti impiliamo l’overflow, siamo onesti
sai il terzo, quindi si
devi aver bisogno di avere questo per avere
questo di fronte a te un’altra cosa che sono
facendo quando sto facendo questo tipo di
cose che mi piacciono di questa F12 solo per avere
tutte le informazioni qui giù così io
capisco cosa sta succedendo ne ho due
errori vediamo cosa stanno dicendo se
ce n’è uno interessante qui o no
nella console, penso che lo farà
dimmi che non riesce a trovare il
style.css e il file econ sto bene
con quello ho dimenticato di copiare lo stile
file va bene così ora possiamo iniziare
lavorando un po ‘con il nostro spigoloso
applicazione quindi la prima cosa che ho
vorrei mostrarti che ho questo corso
ora possiamo fare cose come l’associazione dei dati
ora il binding dei dati è diventato in Angular 2 it
sono diventati dati unidirezionali che legano il mondo
molte discussioni hanno detto molte persone
quell’angolare è stato davvero spaventato da
Facebook e reagire perché reagisce
non usare veramente non usa davvero i dati
vincolante ciò che ha un legame dati unidirezionale
tutto il resto è basato su eventi e
Hanno detto che vogliamo fare qualcosa
simile quindi perché non farlo così
sto creando facciamo qualcosa di simile
questo sto creando una variabile che chiamerò
esco con me e gli darò un valore di TB
e poi voglio usare questo dentro
il mio modello ora questa è una stringa che ha 6 anni
ha introdotto qualcosa chiamato il
stringa multi-linea ma lo fai usando
la spunta posteriore come questa e poi di
Ovviamente puoi aggiungere elementi che puoi fare
qualunque cosa tu voglia abbiamo fatto l’eliminazione e
questo perfetto quindi ora posso creare
in realtà una stringa multi-linea fuori di questo
uno e rendere più facile quanti di voi
avere
reattore sì, va bene, in realtà è perché
Inizio a piacermi Odio ancora il
fatto che devo mettere HTML con
JavaScript del caso ovviamente lo dirai
io no no non è gsx II non sono sicuro
Ho sentito tutte le storie e tutto il
argomenti per cui sono stato in questo settore
troppo lungo per capire quando hai
codice spaghetti che stai effettivamente chiedendo
per guai potrebbe funzionare, ma lo sono
Non sono sicuro, quindi lo so sempre io
Mi piace separare il mio codice HTML in realtà
il mio JavaScript anche quando sai che l’abbiamo usato
e abbiamo detto che non ti è permesso
usa qualsiasi JavaScript vince dentro il tuo
funzione di rendering che conosci come te
esegui il rendering come è supposto
da fare e ancora si ottiene la gente
facendo ogni genere di cose miste che conosci
è stato lo stesso che conosci e
finita e non conosco altre persone se
non lasciano che la loro storia sia questo
finiscono per farti sapere che pensano
che possono fare meglio di e loro
precursori e si scopre a volte
loro non fanno ma torniamo qui così io
creato quello e ora questo è in realtà un
HTML semplice direi deve e poi di
Certo che con il mio caro metterei qui il
dati quindi questo è il mio primo dato
vincolante è un legame dati unidirezionale così
non invia nulla indietro semplicemente
guarda dentro il mio modello dentro il mio
componente classe e trova che ho
una variabile precedente chiamata data o in realtà
un campo chiamato dati ci vorrà questo
valore e lo mostrerà lì così se
Sto salvando questo ricompilerà e
dovrebbe mostrare qualcosa qui
sì hai ragione perché questo non è un
dati digita lui grazie vedi Stack
L’overflow avrebbe aiutato in questo modo
tornando qui ora ho questo
sto mostrando che sto mostrando le cose
e posso sapere che posso lavorare con
Posso usare l’associazione dati unidirezionale in a
modo diverso posso legare a diversi
proprietà che una delle proprietà avrebbe
essere stili non a colori e poi ovviamente
stili è uno degli attributi conosciuti
e ci vuole
in realtà è un soggetto di stile quindi
qualsiasi cosa posso mettere lì dentro come
il colore del colore di sfondo e il carattere
qualunque cosa io possa effettivamente mettere qui come
bene e ora ho bisogno di acquistare un valore
e il valore deve essere un nome di a
colore non riesco a mettere il rosso in questo modo perché
se metto il rosso in questo modo, in realtà lo farebbe
inizia a cercare una variabile chiamata rosso
e non lo trova ho bisogno di mettere un
stringa rossa quindi posso fare come questo, invece
e salvalo così se metto la stringa in rosso
quindi mostrerà TB nel punto Stiles rosso
il colore è rosso okay salva forse questo
legato sapere perché non perché è un
stile singolare come questo mi dispiace così il
lo stile del colore è rosso, quindi ottieni
così come ora, questa è una strada a senso unico
legatura dei dati Posso fare di più in cui posso entrare
qui e prendere alcuni dati e direi
sai cosa voglio creare un input
elemento e quindi direi tipo di input
è uguale al testo e quindi direi di
Ovviamente il valore di quel testo sarebbe
i dati che abbiamo appena aggiunto sembrano
quindi ora devo essere qui è esattamente
gli stessi dati ma quello che voglio normalmente
è quando io uso cose come elementi di input
Voglio i dati ogni volta che lo cambio
essere fuori bulimico ora non capisco il
possibilità di non doverlo sapere
possibilità di ottenere i dati così che io
può fare è specificare non quello che voglio
i dati e il modo in cui fai ciò che dici
che ogni volta che qualcuno cambia l’input
questo è un evento ora, ecco l’altro
legando i dati in modo direi i dati
vincolante in un modo per l’origine, quindi sto inviando
dati indietro ora ma questo è un metodo così
questo è un evento che si aspetta che io invii
il metodo JavaScript così come questo
funzionerà sarebbe quello di scrivere a
metodo o effettivamente scrivere il codice
direttamente così potrei stare qualcosa di simile
questo punto evento punto target entrambi i valori
equivale a dati così posso salvarlo ora e
ora ogni volta che sto cambiando qualcosa io
avere un collegamento dati bidirezionale ora è a
tipo di associazione dati bidirezionale e il
cosa che la ragione per cui leggono dicono
che non vogliamo che sia
ovunque è perché era così
creando molti problemi con tutti quelli
conosci i cicli di digestione e più vecchio di te
conoscere osservare di osservare tutto il
le modifiche all’interno dell’input stavano creando a
molti problemi e poi ottieni un riassunto
ciclo che innesca un altro ciclo di digestione
e così via e così via in modo che volevano
evitare questo e quello è il modo in cui hanno fatto
ma ora diventa un po ‘troppo
ingombrante e ogni volta quando io
voglio fare qualcosa se devo farlo
in questo modo si sente un po ‘troppo
quindi un modo per alleviare questo problema è
per iniziare a usare diverso per usare a
approccio diverso e diverso
approccio è quello di utilizzare qualcosa chiamato ng
modello ovviamente quando usi il modello ng
questo è troppo nel modo in cui devi farlo
a conosci un po ‘diverso te
devo dire che entrambi ne conoscete uno
dalla fonte e dalla sola via alla fonte
e usi qualcosa che chiamano il
banana in scatola perché si chiama banana
nella scatola perché sembra che tu
sapere se rimuovi questo sembra un
scatola all’esterno e poi la banana
dall’interno lo sai, ecco perché
lo chiamano così, ce n’è un altro
ragione pratica per questo ogni volta a
Almeno all’inizio vedi che no
pensa così quale era quello giusto dentro
lo sai dentro le parentesi o
le parentesi all’interno di quella giusta così
ora quando ci pensi è banana in
una scatola sai esattamente cosa devi fare
fallo così ora se salvo
questo e dire usare ng-model lo dirà
mi dispiace non ho idea di cosa sia il modello ng
di nuovo ho l’errore qui se guardo
in realtà è piuttosto esplicito
un’altra cosa quindi se tu sai se tu
guarda il messaggio di errore ora è molto
ha molto più senso che dice
qualcosa come non posso non può legare a ng
modelli non è non è conosciuto
proprietà che significa che ho qualcosa
che è manca quindi sì è qui
Lo trovo non so esattamente esattamente
cosa sta succedendo, forse dovresti
mostra che dovresti dirmi dove ng modello
viene da così ora che cosa devo fare I
devo tornare nel mio modulo e dire
oh dal modo in cui abbiamo alcune dipendenze
qui così sarà una delle dipendenze
importazione di importazione vieni si chiama il
modulo moduli perché ora siamo noi vogliamo
per usare cose come te conosci legate a
due forme di input e poi viene da
forma angolare / forma punto e virgola e poi
direi per favore importa quel modulo così
rendere questo modulo e il suo contenuto
disponibile per qualsiasi componente che ho
dentro il mio modulo interno, quindi se lo sono
tornando indietro e risparmiando ora vedremo
che questo è tornato qui e posso farlo
cambiamenti e tutto mostrerà il loro
un’altra cosa che posso fare con quello che sta succedendo
al mio componente dal modo in cui posso tornare indietro
qui nel mio codice di Visual Studio e
cambia un po ‘i miei riferimenti e
il modo in cui lo farò dirò che io
voler escludere alcuni di essi
file Torniamo qui penso di avere
qui da qualche parte le impostazioni tornano indietro
qui e cosa fa in realtà
rimuove i miei file javascript e il mio
File di mappe JavaScript, quindi lascia che ti mostri
come sembra che sia così
dice ogni volta che vedi il file di un punto J se
c’è già un file TS con lo stesso
nome si prega di rimuovere il file GS se si
vedi il file di una mappa di J se vedi qualcosa
che conosci già come un file JS
lì per favore non mostrarmi tutto
altrimenti così lo rende molto più facile
per farlo, quanto 10 minuti ok
Bene, così abbiamo ottenuto che siamo arrivati così lontano ora
vediamo se torniamo ora eccoci
prendi questo, mostriamolo qui
facciamolo è per sapere, dai
questo è già stato fatto questo è il k1 ok
e poi questo qui dentro, quindi anche noi
riavuto questo va bene così ora abbiamo
questa una delle cose che conosci i dati
è hard-coded quindi mi piacerebbe ottenere il
dati da un servizio così un altro bene
cosa e un altro sai che cose
hanno fatto davvero molto bene
aggiungo che l’iniezione di dipendenza così io
puoi dire qualcosa come creare un nuovo file
questo sarebbe il mio servizio di caricamento punto TS
questo è un servizio che è esportazione
ogni volta che ho bisogno di qualcosa per essere visibile
fuori ho bisogno di esportare così se ne hai
errori e dicendoti okay, dimmelo
riguardo al servizio app ma non mi sembra
per trovarlo sai che ti sei dimenticato
in realtà per esportare la classe stessa
Esportare il servizio di classe e poi lo sono
dicendo in realtà nessuna parentesi qui
mi dispiace per quello fammi chiudere questa app
servizio e poi dentro il mio servizio app che
avere un metodo chiamato get name e quindi
ovviamente il nome verrebbe restituito
dal servizio TB va bene così sappiamo che arriva
dal servizio e ora posso andare qui
nel componente dell’app e all’interno della mia app
componente direi punto app di importazione
servizio nessun osservatorio dal punto in alto
servizio ed è nella mia cartella corrente così
posso usare quello e poi è salvato
nulla è cambiato in realtà, quindi non è così
fare qualche differenza ma ora ho bisogno di questo
uno per essere parte della mia domanda così io
dovrebbe o essere parte del mio
iniezione di dipendenza quindi direi
fornitori e aggiungerò il servizio come
fornitore ok di servizio qui e in
Per avere quello iniettato ho bisogno di
aggiungilo nel mio semi-costruttore così
costruttore e nel costruttore i
avere un oggetto applicazione privato
in realtà oggetto di servizio SVC del tipo
servizio app quindi se ricordi rifletti
metadati che ti stavo mostrando come uno
dei pacchetti ora quello che fa
guarda qui e dice okay, no tu
ora hai un file dattiloscritto e tu
voglio iniettare in quello un oggetto di
il tipo di servizio, quindi cosa fa l’angolare
guarda nei miei fornitori perché
senza questo fornitore non lo sa
esattamente ciò che un appt servizi e come
istanziarlo in modo che crei un
istanza di quella ora la parte bella
è che ogni singolo componente figlio o
qualsiasi componente sto usando ora in questo
componente utilizzerà questa istanza in modo tutto
i servizi sono Singleton, quindi se io
bisogno di creare il secondo singleton I
so che suona un po ‘sai
tortuoso anche tu lo sai perché non lo è
davvero singleton più ho bisogno di
specificarlo a un livello diverso, quindi se io
ha bisogno di un componente bambino freddo da avere
una diversa istanza di quel servizio I
avrebbe bisogno di specificarlo di nuovo all’interno
la lista dei fornitori se non lo faccio allora
il componente andrà al suo genitore a
al suo genitore al suo genitore fino a te
raggiungere il modulo e poi a guardare
anche tutti i moduli dipendenti che ho
così saranno prese tutte le importazioni
nella considerazione per trovare
le informazioni sul servizio dove
in realtà è iniettato così ora voglio
usa questo direi qualcosa come SVC
dot prendi nome e questo lo farò
in realtà dire questo punto theta equivale a giorni
quindi uno degli errori che faccio sempre
sai che è dimenticare di mettere il DS
perché lo sfondo nitido C sai
mi dice che questo è sempre lo sai
è sempre l’implicito a dattiloscritto
ti richiede di farlo, quindi se vedrai
non dirai mai che i dati non sono definiti
solo vedere se non è qualcosa che tu
perso così ora mostra dal servizio TB
ovviamente all’interno del costruttore te
non dovrebbe fare nessuno di questi tipi
cose che non dovresti chiamare altri servizi
uno dei maggiori problemi che potremmo avere
qui sai quando inizi
chiamando ai servizi che sono
in realtà un sincrono o servizi che
prendere un po ‘più a lungo in modo unidirezionale
è quello di utilizzare una vita di hook di evento
il ciclo ci ha invitato, quindi fammi fare questo
Ne farò uno proprio così su di me
componente sì farà un’implementazione
implementare su di esso in esso ma su di esso
dice oh, devi avere un
metodo qui chiamato ng proprio in esso e poi
l’energia sul metodo init sarà
invocato automaticamente così posso farlo
dentro il mio e unire il metodo init il
implementa solo in essa non è in realtà
davvero necessario perché JavaScript
non si preoccupa delle interfacce ma
è molto buono per me perché poi
mi rende onesto e non mi dimentica
per aggiungere il motore in esso così se lo metto
lì a livello di componenti vorrei
so per certo che devo farlo
ce ne sono altri come ondestroy così
scaricare e così via così loro sono il
predefinito che puoi, che puoi
usalo ancora adesso funziona se
ora chiamarlo servizio HTTP che posso fare
che ora c’è un’altra cosa che io
ho bisogno di fare con il mio servizio perché il mio
il servizio potrebbe non vivere in isolamento
supponiamo che questo servizio sarebbe
piace utilizzare ora un servizio HTTP a
invocare i dati cosa dovrò fare io
dovrà decorare questo con a
netto con un decoratore chiamato iniettabile
iniettabile di nuovo il nome potrebbe essere
fuorviante perché potresti pensare oh
questo significa che questo è un
servizio iniettabile tutti loro sono
iniettabile per impostazione predefinita quando si aggiunge
iniettabile tu dici oh, in realtà voglio
fare parte dell’iniezione di dipendenza e
ogni volta che vedi una dipendenza all’interno del
servizio salire il magazzino e trovare il
la dipendenza è anche inclusa in là
lascia che ti mostri l’ultima soluzione per dire
sì sì, solo veloce voglio mostrare
tu che alcuni la soluzione finale qui con
con il servizio ho il servizio up
e dico che ho bisogno di una dipendenza
sul servizio HTTP e perché mi inietti
Servizio HTTP automaticamente posso usare il
Servizio HTTP come dipendenza senza la sua
iniettabile otterrò un errore nel dire
mi dispiace non trovo iniettabile 50
minuti non so come tu sai come
bene è avere una buona presentazione
spero che tu abbia abbastanza informazioni o
almeno un bene si conosce il menu degustazione così
andrai là fuori e proverai a usarlo
se sei veramente interessato, non so se
c’è un interesse sotto codice mostrami
la mano e posso metterla sul mio github
va bene allora metterò che vedrai il
il routing così è github.com /
Tibor 19 Vorrei davvero aggiungere ora che ho
per darti la presentazione che aggiungerei
sull’ultima diapositiva che il repository Github
nome in modo da poterlo ottenere dal
presentazione abbiamo parlato di alcune delle
le cose che abbiamo visto fuori dagli schemi
cose come te conoscono moduli e modulo
abbiamo alzato gli occhi non proprio guardati ma lì
è un servizio HTTP una cosa che avresti
allenarsi è guardare reattivo
estensioni se hai lavorato molto con
promette e se non vuoi spendere
tempo nel mondo delle estensioni reattive
ricorda solo una funzione
chiamato a promettere e poi quella volontà
risolvi saprai che ti riporterà a
la terra promessa che non conosci
terra osservabile
gioco di parole voluto grazie
abbiamo un sacco di domande e solo noi
hai due minuti ok, devi essere
veloce ce n’è uno qui mi consiglia
migrazione dell’angolo di produzione esistente 1
alla migrazione angolare 2 è un it’s a
parola forte sai come non lo so
so che conosco i tentativi angolari di vendere il
storia che è molto facile da fare
migrazione ti dirò dalla mia
esperienza che conosci come non con
angolare ma con altri quadri voi
sapere nonostante tu conosci il
promette che stanno facendo o l’osservato
osservazioni stanno cercando di farti
lo so ancora non lo è ancora
lavora come facile sai tornare indietro di 10 anni
e parla con Microsoft e loro lo diranno
tu sp2 asp.net è come te
sai vb sai vb.net tu lo sai
stavano usando esattamente lo stesso
trucco di marketing per tenerti d’occhio
con le loro cose se non hai
problemi di prestazioni 1.5 sei ancora tu
so che è una versione molto buona da provare
migrare 1.5 rimanere fino a quando
puoi puoi rubare lo sviluppo
Google continuerà a supportarlo e
continueranno a investire in esso
e per continuare a migliorarlo effettivamente
sai che sono un consulente e lo darò
sai che le due parole rispondono
dipende sì guarda il tuo tuo
cose sì, penso che abbiamo 30 secondi
o qualcosa in quale caso d’uso
preferisci e glutes che distruggeresti è 0
quindi grazie anche tu sei molto molto veloce
grandi applicazioni line-of-business
le applicazioni aziendali sono molto buone se
hai un sacco di dati che provengono
il server sai che avremmo reagito
in realtà brilla in quel modo come sai
hai un sacco di abbonamenti che tu
bisogno di fare sul server e poi tu
è necessario aggiornare solo la dimensione parziale del
schermo penso che reagire è molto meglio
che angolare al momento, ma sono
lavorando lì è in corso una guerra, lo sai
è un lavoro tranquillo al momento di nuovo se
hai cose come Facebook dove tu
avere un flusso di dati e sempre
l’aggiornamento sai che non si vuole
Aggiorna l’intero schermo che non vuoi
fare un sacco di componenti intorno a questo
ha bisogno di essere rear-ended vorrei
Vorrei usare il reattore è perfetto per te
conosco lo scenario del caso d’uso e lo sono
usarlo perfettamente mentre cose simili
Gmail sai dove hai un sacco di cose
dati che devi leggere e di cui hai bisogno
per aggiornare e hai un sacco di
cose indipendenti che potrebbero aver bisogno di
lavorare insieme l’uno con l’altro angolare 2
potrebbe essere ballerino grazie a tutti per essere venuti
e dategli un miglio in più grazie
Please follow and like us: