Share
La creazione di applicazioni Web implica l'utilizzo di diverse tecnologie e strumenti, che riguardano la manipolazione del database, le operazioni lato server e anche la gestione lato client e la visualizzazione dei dati provenienti dal server. Prima di iniziare un nuovo progetto, è necessario configurare tutti gli strumenti e la struttura del progetto, operazione che richiede molto tempo. Utilizzando un framework o a pila per questo compito può accelerare lo sviluppo e facilitare il lavoro per lo sviluppatore.
"MEAN è una piattaforma JavaScript fullstack per le moderne applicazioni web".
Questo è il modo in cui gli autori dello stack MEAN lo definiscono sul loro sito web. È chiaro che MEAN sta prendendo di mira tutti i tipi di sviluppatori JavaScript (lato server e lato client) e anche che è una piattaforma stack che, indica che ci sono diversi componenti che lo compongono.
Questi componenti sono:
Come puoi vedere, MEAN riunisce quattro delle tecnologie più utilizzate e apprezzate per lo sviluppo di JavaScript, gettando le basi per la creazione facile di applicazioni Web complesse.
Lo stack MEAN può essere installato in due modi:
Questo metodo è abbastanza semplice. Devi solo visitare il sito mean.io e quindi puoi scaricare il framework come cerniera lampo file facendo clic sul grande pulsante verde.
Un'altra opzione disponibile da qui è quella di clonare il repository Git. Basta aprire un terminale e inviare il seguente comando:
git clone https://github.com/linnovate/mean.git
Ci sono diversi generatori Yeoman, scritti da diversi sviluppatori. L'utilizzo di un generatore per l'installazione di MEAN avviene in due passaggi, prima di installare il generatore:
npm install -g generator-meanstack
e quindi usando yo per creare l'app:
intendi
L'esempio precedente presuppone l'installazione di meanstack generatore e anche che Yeoman è installato. Per un elenco di generatori MEAN, controllare questo link e filtrare con "media". Per informazioni sull'installazione di Yeoman, controllare il sito di Yeoman.
Addy Osmani ha scritto un post sul blog molto interessante su stack MEAN e generatori Yeoman per questo. Consiglio vivamente di leggerlo per scoprire come installare lo stack usando i generatori.
Ai fini di questo articolo, userò l'approccio alla clonazione Git.
Dopo l'installazione, solo CD nella cartella in cui è stato installato lo stack MEAN ed emesso il file grugnito comando (dovresti avere grugnito-cli installato). Questo comando avvierà un server in ascolto sulla porta 3000, quindi visitando http: // localhost: 3000 nel browser verrà visualizzato qualcosa come questo:
Lo stack MEAN è in effetti un'applicazione di blog engine completamente funzionale. Ha l'autenticazione utilizzando vari metodi: Facebook, GitHub, Twitter o Google e anche tramite semplice e-mail e password.
Scommetto che sei curioso di vedere un po 'di codice fino ad ora ... Quindi diamo un'occhiata. La struttura della cartella stack MEAN dovrebbe essere come la seguente:
Il server è diviso in due cartelle e un file:
Accentsconagua
App cartella: contiene i controller, i modelli e le viste che compongono l'applicazioneconfig cartella: contiene i file che controllano il comportamento delle parti dell'appserver.js - è il punto di accesso dell'applicazionePrendiamoli uno per uno:
server.js FileQuesto è il file che avvia l'intera applicazione. Se non vuoi usare grugnito Puoi usare server nodo, js per avviare il server.
Il server.js il file è responsabile di:
config CartellaQuesta cartella contiene i file di configurazione dell'applicazione. Dentro puoi trovare un ENV cartella contenente configurazioni per le modalità di sviluppo, produzione e test per l'esecuzione dell'applicazione.
Inoltre, ci sono file contenenti la configurazione per l'applicazione stessa, la parte espressa e la configurazione del passaporto per l'accesso.
App cartellaDentro il App cartella, risiede sull'intero codice lato server. Questa cartella contiene sottocartelle per i controller, i modelli e le viste che compongono l'applicazione MVC server e anche una cartella per i percorsi che vengono serviti.
Per impostazione predefinita, esistono controller per articoli, utenti e un file di indice per il percorso root. Inoltre, vengono creati modelli per gli articoli e gli utenti e durante l'installazione vengono creati percorsi per articoli, utenti e il percorso principale.
Come per le viste create di default, viene creata la seguente struttura:
Il include la cartella contiene le parti del footer e dell'intestazione delle pagine che sono inserite in tutte le pagine appartenenti all'app. Il disposizione la cartella contiene l'HTML di base per il layout di pagina. Questo layout è esteso nel index.html file dal visualizzazioni cartella.
Il utenti la cartella contiene il codice di markup per l'accesso, la registrazione e l'autenticazione.
Nella radice del visualizzazioni cartella, accanto al index.html file, ci sono file contenenti il markup per errori 404 e 500.
Il codice parte client risiede nel pubblico cartella. Questa cartella contiene a css sottocartella per lo stile dell'applicazione e un img cartella contenente le immagini utilizzate nell'applicazione.
Un'attenzione particolare dovrebbe essere prestata al js cartella che contiene il codice angolare per l'app lato client, il codice di inizializzazione, alcune direttive e il codice dei filtri (file attualmente vuoti) e i controller e i servizi per gli articoli e la parte di intestazione dell'applicazione. visualizzazioni la cartella contiene il markup per la creazione, la modifica, la visualizzazione e la visualizzazione degli articoli.
Finalmente, il lib cartella contiene il codice della libreria angolare.
Il test cartella contiene i file per testare l'applicazione. Principalmente ci sono file per testare la parte server usando Mocha e file per testare la parte client usando Karma.
Durante l'utilizzo dello stack MEAN, anche tu come sviluppatore, hai accesso a npm, bower e grunt che dovrebbero essere installati,
È importante ricordare che JSHint è fornito e che tutto il codice JavaScript è laccato. Inoltre, usando Grunt, il progetto può essere guardato per le modifiche e ricostruito automaticamente.
Questo articolo deve essere seguito da un secondo tutorial, in cui verrà compilata un'applicazione completa in cima allo stack MEAN, che mostra come MEAN può essere configurato e adattato, da utilizzare per altri tipi di applicazioni.
Restate sintonizzati per la seconda parte!
