Introducere în stiva MEAN

Dezvoltarea de aplicații web presupune utilizarea diferitelor tehnologii și instrumente, manipularea bazei de date, operațiile de pe server și, de asemenea, manipularea și afișarea datelor de la server. Înainte de a începe un nou proiect, trebuie să fie configurate toate instrumentele și structura proiectului, ceea ce reprezintă o sarcină consumatoare de timp. Utilizarea unui cadru sau a grămadă pentru această sarcină poate accelera dezvoltarea și ușura munca pentru dezvoltator.

Ce inseamna

"MEAN este o platformă JavaScript fullstack pentru aplicații web moderne".

Acesta este modul în care autorii stack-ului MEAN îl definesc pe site-ul lor. Este foarte clar faptul că MEAN vizează toate tipurile de dezvoltatori JavaScript (atât pentru server, cât și pentru client) și, de asemenea, că este o platformă de stivă care indică faptul că există mai multe componente care îi compun.

Aceste componente sunt:

• MongoDB
• Expres
• AngularJS
• NodeJS

După cum puteți vedea, MEAN reunește patru dintre cele mai utilizate și apreciate tehnologii pentru dezvoltarea JavaScript, stabilind fundația pentru construirea cu ușurință a aplicațiilor web complexe.

Instalare

Stack-ul MEAN poate fi instalat în două moduri:

• folosind site-ul media.io
• folosind diferite generatoare Yeoman.

Instalarea MEAN utilizând site-ul său

Această metodă este destul de simplă. Trebuie doar să vizitați site-ul mean.io și apoi să descărcați cadrul ca un zip fișier făcând clic pe butonul verde mare.

O altă opțiune disponibilă aici este clonarea depozitului Git. Doar deschideți un terminal și emiteți următoarea comandă:

git clone https://github.com/linnovate/mean.git

Instalarea MEAN Utilizând Yeoman

Există mai multe generatoare Yeoman, scrise de diverși dezvoltatori. Utilizarea unui generator pentru instalarea MEAN se face în două etape, instalând mai întâi generatorul:

npm instalează -g generator-meanstack

și apoi folosind yo pentru a crea aplicația:

yo meanstack

Exemplul de mai sus presupune instalarea meanstack generator și de asemenea că Yeoman este instalat. Pentru o listă a generatoarelor MEAN, bifați această legătură și filtrați-o pe "medie". Pentru informații despre instalarea Yeoman, verificați site-ul Yeoman.

Addy Osmani a scris un foarte interesant post pe blog despre MEAN stack și generatoare Yeoman pentru el. Vă recomandăm cu insistență să le citiți, pentru a afla cum să instalați stackul folosind generatoare.

În scopul acestui articol, voi folosi abordarea de clonare Git.

Instalarea postului

După instalare, doar CD în dosarul în care ați instalat stiva MEAN și lansați  mormăit comanda (ar trebui să aveți groh-cli instalat). Această comandă va porni un server care asculta pe portul 3000, astfel încât să viziteze http: // localhost: 3000 în browser se va afișa ceva de genul:

Ce am primit după instalare

Stack-ul MEAN este, de fapt, o aplicație de motor de blog pe deplin funcțională. Are autentificare folosind diferite metode: Facebook, GitHub, Twitter sau Google, precum și prin e-mail și parolă simple.

Pun pariu că ești curios să vezi până acum un cod ... Să verificăm asta. Structura folderului stack MEAN ar trebui să fie după cum urmează:

Partea de server

Serverul este împărțit în două foldere și un fișier:

• aplicaţia folder - conține controlerele, modelele și vizualizările care alcătuiesc aplicația
• config folder - conține fișierele care controlează modul în care se comportă componentele aplicației
• server.js - este punctul de intrare al cererii

Să le luăm unul câte unul:

server.js Fişier

Acesta este fișierul care inițiază întreaga aplicație. Dacă nu doriți să utilizați mormăit poți să folosești server nod, js pentru a porni serverul.

server.js fișierul este responsabil pentru:

• Încărcarea configurației. Sunt încărcate fișierele pentru configurarea aplicației în sine, autentificarea și conexiunea bazei de date.
• Bootstrapping modele. Acest lucru se face prin iterarea prin dosarul modelelor și încărcarea tuturor fișierelor din interiorul acelui director (sau subdirectoarele acestuia).
• Bootstrap pașaport
• Inițializați aplicația expresă
• Configurați aplicația expresă
• Configurați rutele de aplicare exprese
• Începeți să ascultați pe portul configurat.

config Pliant

Acest dosar conține fișierele de configurare a aplicației. În interior poți găsi un env care conține configurații pentru modurile de dezvoltare, producție și testare pentru rularea aplicației.

De asemenea, există fișiere care conțin configurația pentru aplicația în sine, partea explicită și configurația pașaportului pentru conectare.

aplicaţia pliant

În interiorul aplicaţia , se află întregul cod de server. Acest dosar conține sub-dosare pentru controlerele, modelele și vizualizările care compun aplicația serverului MVC și un dosar pentru rutele care sunt difuzate.

În mod implicit, există controale pentru articole, utilizatori și un fișier index pentru calea principală. De asemenea, sunt create modele pentru articole și utilizatori, iar rutele pentru articole, utilizatori și calea principală sunt create în timpul instalării.

În ceea ce privește afișările create implicit, se creează următoarea structură:

include conține dosarul subsolului și antetul paginilor care sunt inserate în toate paginile aparținând aplicației. schemă folderul conține baza HTML pentru aspectul paginii. Acest aspect este extins în index.html fișier de la vizualizari pliant.

utilizatori folder conține codul de marcare pentru conectare, înscriere și autentificare.

În rădăcina vizualizari dosar, lângă index.html fișier, există fișiere care conțin marcajul pentru erorile 404 și 500.

Partea clientului

Codul părții de client se află în public pliant. Acest dosar conține a css subfolder pentru stil de aplicare și un img care conține imaginile utilizate în aplicație.

O atenție deosebită ar trebui acordată js care conține codul unghiular pentru aplicația de pe partea clientului, codul de inițiere, unele directive și coduri de filtre (fișiere în prezent goale) și controlorii și serviciile pentru articole și partea antet a aplicației. vizualizari folder conține marcajul pentru crearea, editarea, afișarea și vizualizarea articolelor.

În cele din urmă, lib dosarul conține codul bibliotecii Angular.

Testarea aplicațiilor

Test folder conține fișierele pentru testarea aplicației. În principal există fișiere pentru testarea părții de server folosind Mocha și fișiere pentru testarea părții client folosind Karma.

Instrumente furnizate

În timp ce utilizați stiva MEAN, ca dezvoltator aveți și acces la npm, bower și grunt care ar trebui instalate,

Este important să menționăm că JSHint este furnizat și că tot codul JavaScript este mutat. De asemenea, folosind Grunt, proiectul poate fi urmărit pentru modificări și reconstruit automat.

Concluzie

Acest articol urmează să fie urmat de un al doilea tutorial, în care o aplicație completă va fi construită pe partea de sus a stiva MEAN, vă va arăta modul în care MEAN poate fi configurat și adaptat, pentru a fi utilizat pentru alte tipuri de aplicații. 

Rămâi acordat pentru a doua parte!