ember.jsIniziare con ember.js


Osservazioni

Questa sezione fornisce una panoramica su cosa sia ember.js e perché uno sviluppatore potrebbe volerlo utilizzare.

Dovrebbe anche menzionare qualsiasi argomento di grandi dimensioni all'interno di ember.js e collegarsi agli argomenti correlati. Poiché la documentazione di ember.js è nuova, potrebbe essere necessario creare versioni iniziali di tali argomenti correlati.

Versioni

Rilascio aggiornato

Versione Data di rilascio
2.14.0 beta 2017/04/29
2.13.0 2017/04/29

Installazione o configurazione

Iniziare con Ember è facile. I progetti Ember vengono creati e gestiti tramite il nostro strumento di compilazione della riga di comando di Ember CLI. Questo strumento fornisce:

  • Gestione degli asset delle applicazioni moderne (inclusi concatenazione, minification e versioning).
  • Generatori per aiutare a creare componenti, percorsi e altro.
  • Un layout di progetto convenzionale, che semplifica l'approccio alle applicazioni Ember esistenti.
  • Supporto per JavaScript ES2015 / ES6 tramite il progetto Babel . Ciò include il supporto per i moduli JavaScript , utilizzati in questa guida.
  • Un'imbracatura di prova QUnit completa.
  • La capacità di consumare un ecosistema in crescita di Addons Ember .

dipendenze

Node.js e npm

La CLI di Ember è costruita con JavaScript e prevede il runtime di Node.js. Richiede anche le dipendenze recuperate tramite npm . npm è confezionato con Node.js, quindi se il tuo computer ha installato Node.js sei pronto per andare.

Ember richiede Node.js 0.12 o versioni successive e npm 2.7 o versioni successive. Se non sei sicuro di avere Node.js o la versione corretta, esegui questo sulla tua riga di comando:

node --version
npm --version

Se si ottiene un errore "comando non trovato" o una versione non aggiornata per il nodo:

Se si ottiene una versione obsoleta di npm, eseguire npm install -g npm .

Idiota

Ember richiede a Git di gestire molte delle sue dipendenze. Git viene fornito con Mac OS X e la maggior parte delle distribuzioni Linux. Gli utenti Windows possono scaricare ed eseguire questo programma di installazione Git .

Watchman (opzionale)

Su Mac e Linux, è possibile migliorare le prestazioni di visualizzazione dei file installando Watchman .

PhantomJS (opzionale)

È possibile eseguire i test dalla riga di comando con PhantomJS, senza che sia necessario aprire un browser. Consulta le istruzioni per scaricare PhantomJS .

Installazione

Installa Ember usando npm:

npm install -g ember-cli

Per verificare che l'installazione sia avvenuta correttamente, esegui:

ember -v

Se viene mostrato un numero di versione, sei pronto per partire.

Assegna porte localhost (in particolare permessi / problemi di disponibilità, eseguendo contemporaneamente più siti di ember)

Occasionalmente è utile assegnare una o più porte manualmente rispetto all'utilizzo dei valori predefiniti. In questo modo è possibile risolvere i problemi di disponibilità / permessi delle porte o accettare l'esecuzione di più di un'istanza di ambra alla volta.


Per fare in modo che ember-cli tenti di identificare e assegnare una porta disponibile, usa:

ember serve --port 0
 

Aiuto per la brace: "Passa 0 per selezionare automaticamente una porta disponibile". (In un terminale, digitare help ember).


Per eseguire più di un sito di ember allo stesso tempo, ognuno ha bisogno del proprio server e delle porte di live-reload. Un approccio semplice: in finestre di Terminali separate, accedi a ciascuna istanza e utilizza quanto segue per avviarli con le proprie porte:

ember serve --port 0 --live-reload-port 0
 

Se si verifica un errore in merito alla disponibilità o all'autorizzazione in uno di questi casi, immettere il seguente script python al prompt del terminale per identificare una porta disponibile:

python -c 'import socket; s=socket.socket(); s.bind(("", 0)); print(s.getsockname()[1]); s.close()'
 

Utilizza i risultati per specificare le porte che ora sai essere disponibili:

ember serve --port <known_port_1> --live-reload-port <known_port_2>
 

Creazione di app

La CLI di Ember consente di utilizzare una delle due opzioni per generare una nuova app:

  1. Crea una cartella ed esegui ember init (genera la struttura dell'applicazione e imposta git e fa il tuo primo commit)
  2. Esegui ember new <app name> (crea una cartella con il nome specificato, vi entra e avvia ember init )

Una volta completato il processo di generazione, avviare un server live-reload all'interno della cartella dell'app eseguendo:

ember server
 

o ember s in breve. * Ta-da, ora hai un'app Ember in esecuzione! Documenti ufficiali

Creare il tuo primo modello

Creiamo un nuovo modello usando il comando ember generate .

ember generate template application
 

Il modello application è sempre sullo schermo quando un utente visita la tua applicazione. Nel tuo editor di scelta, apri app/templates/application.hbs e aggiungi il seguente codice:

<h2>My first Ember application</h2>

{{outlet}}
 

Ora dovresti vedere il testo appena aggiunto nella pagina di benvenuto della tua applicazione. Inoltre, Ember rileva automaticamente il nuovo file e ricarica la pagina. Neat, giusto?

Distribuisci app

Per distribuire un'applicazione Ember è sufficiente trasferire l'output da build ember a un server web. Questo può essere fatto con strumenti standard di trasferimento file Unix come rsync o scp . Ci sono anche servizi che ti permetteranno di dispiegarti facilmente.

ember build
scp -r dist/* myserver.com:/var/www/public/
 

normalmente dovremmo usare ember build --environment=production che fa di più per rendere il vostro codice pronto per la produzione (codice gzip e minify).

Come lavorare con i plugin JavaScript

Esistono quattro modi per lavorare con i plugin JavaScript,

  1. Componente aggiuntivo Ember
  2. Importa i plugin JavaScript a livello globale
  3. Consuma plugin AMD nominati
  4. Via ember-browserify