de Tracy Lee | ladyleet

Cum se configurează o aplicație Basic Ember.js

Cum se configureaza o aplicatie Basic Emberjs

Deci, vrei să-l testezi pe Ember, nu? Acest articol va trece prin construirea unei aplicații de bază.

Iată ce vom face:

  1. Configurați ember-cli
  2. Creați o aplicație nouă
  3. Utilizați materalize-css pentru coafare
  4. Creați componente
  5. Acoperiți utilizarea de bază a routerului Ember
  6. Explorează „fiecare” asistent pentru a itera peste date

În primul rând, ar trebui să instalați ember-cli. Aproape toate aplicațiile sunt construite cu ember-cli. Este foarte rar să găsești unul care nu este.

Și iată un avantaj major al Ember și al comunității Ember – se bazează pe convenție în ceea ce privește configurația mai mult decât Angular și React. Acestea le folosesc ca unul dintre punctele lor forte, făcându-le un cadru popular pentru companiile care doresc să construiască aplicații pe scară largă.

ad-banner

A fi convențional permite Ember să dezvolte standarde comunitare, cum ar fi povestea ember-cli-deploy, o poveste puternică în jurul datei Ember și încărcăturile de contribuții pe care comunitatea le poate aduce prin intermediul ecosistemului addon. (verifică emberaddons.com)

Pe site-ul Ember.js, veți găsi instrucțiuni simple de instalare și chiar și un ghid de pornire rapidă prin care puteți merge!

Continuați și instalați ember-cli pentru a începe:

$ npm install -g ember-cli
Cum se configureaza o aplicatie Basic Emberjs

Crearea unei noi aplicații

Acest lucru este la fel de ușor ca 1–2–3! Pur şi simplu ember new eu> și o aplicație va fi generată pentru dvs.

ember new yolobrolo

Veți vedea ember-cli creând destul de multe fișiere.

În principal, ar trebui să rețineți că Ember a creat:

  • application.hbs (ghidon, care este fișierul dvs. html)
  • app.js
  • router.js
  • pachet.json
  • bower.json
  • teste
1611282426 79 Cum se configureaza o aplicatie Basic Emberjs

Wahoo! Acum, dacă vă deschideți IDE-ul, ar trebui să vedeți structura unei aplicații Ember.

1611282427 600 Cum se configureaza o aplicatie Basic Emberjs

Instalarea Materialize-CSS

În cazul în care vă întrebați, îmi place material design și materialize-css.

Deci, dacă doriți să utilizați stilurile pe care le folosesc de obicei, executați următoarea comandă.

npm install materialize-css

Apoi, adăugați aceste linii în fișierul index.html

<!-- Compiled and minified CSS -->  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!--Import Google Icon Font-->      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

Când ați terminat, ucideți serverul și reporniți-l. Fontul dvs. ar trebui să se schimbe în Roboto:

1611282427 886 Cum se configureaza o aplicatie Basic Emberjs
Înainte de a instala materialize-css
1611282428 31 Cum se configureaza o aplicatie Basic Emberjs
După ce instalați materialize-css

Crearea componentelor

Ember, la fel ca majoritatea cadrelor JavaScript din zilele noastre, iubește componentele. Deci, să creăm componenta de care avem nevoie: o bară de navigare la care putem conecta routerul! Folosim bara de nav care ne materializează-css.

Tot ce trebuie să faceți pentru a crea o componentă este următorul:

ember g component <component-name>

Asigurați-vă că numele componentei dvs. are o liniuță în nume, deoarece aceasta este convenția.

Iată fișierele pe care mi le generează ember-cli. Creeaza:

  • component-name.hbs
  • component-name.js
  • adaugă teste de integrare
1611282428 465 Cum se configureaza o aplicatie Basic Emberjs

Așa arată drăguța mea nav-bar.

1611282428 686 Cum se configureaza o aplicatie Basic Emberjs

Iată codul implicit dacă doriți:

<nav>    <div class="nav-wrapper">      <a href="https://www.freecodecamp.org/news/setting-up-a-basic-ember-js-app-c9323760c675/#" class="brand-logo center">Logo</a>      <ul id="nav-mobile" class="left hide-on-med-and-down">        <li><a href="https://www.freecodecamp.org/news/setting-up-a-basic-ember-js-app-c9323760c675/#">Videos</a></li>        <li><a href="https://www.freecodecamp.org/news/setting-up-a-basic-ember-js-app-c9323760c675/#">About</a></li>      </ul>    </div>  </nav>

Oricând trebuie să refolosiți o bucată de cod din nou și din nou, este întotdeauna mai bine să o faceți o componentă. 🙂

Folosind routerul Ember

Cred că dau drumul la routerul Ember după ce am jucat atât de mult în Angular 2.

De fapt, cred că iau routere de la sine în general, dar aici este prietenul meu Jay Phelps spunându-ne de ce ar trebui să ne pese.

1611282429 874 Cum se configureaza o aplicatie Basic Emberjs

Iată o prezentare generală de bază a modului în care funcționează routerul Ember.

Mai întâi, trebuie să rețineți că există un fișier router.js în care sunt definite toate rutele. De asemenea, în fișierul dvs. application.hbs, există {{outlet}} care afișează orice specificați routerul.

În aplicația mea, vreau să creez 2 rute simple – o pagină despre informații și o pagină cu videoclipuri.

Pentru a crea un nou traseu executați această comandă în ember-cli.

ember g route <route-name>

Ember va genera apoi:

  • ruta-dvs..js
  • ruta-dvs..hbs
  • actualizați fișierul router.js
  • creați un test unitar.

Puteți vedea toată magia din linia de comandă:

1611282429 956 Cum se configureaza o aplicatie Basic Emberjs

Îmi place modul în care fișierul router.js este actualizat automat pentru mine. Puteți chiar crea rute imbricate din linia de comandă. Ghidurile Ember.js sunt destul de minunate și iată un legătură la tot ceea ce poate face routerul.

Un lucru pe care l-am făcut în captura de ecran de mai jos a fost să definesc ruta mea implicită. Am făcut asta specificând pur și simplu calea rutei ca /. Toate celelalte au fost pre-generate pentru mine cu CLI.

this.route(‘videos’, { path:’/’ });
1611282430 584 Cum se configureaza o aplicatie Basic Emberjs

Configurarea ieșirii routerului Ember

Să explorăm fișierul application.hbs. Aici va ieși routerul.

Într-adevăr, unul dintre singurele lucruri pe care le adaug în fișierul meu application.hbs este bara de navigare și subsolul. Creez rute pentru orice altceva.

În prezent, fișierul meu application.hbs arată astfel.

1611282430 529 Cum se configureaza o aplicatie Basic Emberjs

Acum, intrând în componenta mea de nav-bar, voi obține rute pentru ruta despre pagina și ruta videoclipurilor.

Ember folosește ajutorul {{link-to}} pentru tranziții între rute.

Iată cum arată sintaxa:

{{#link-to ‘videos’}}Videos{{/link-to}}

Asistentul {{link-to}} înlocuiește o etichetă și este modul în care trecem între rute în Ember. Tot ce trebuie să faceți este să specificați ruta în parens așa cum se arată mai sus. În Angular 2, echivalentul este routerLink.

Iată o captură de ecran a întregului meu navigator.

1611282431 748 Cum se configureaza o aplicatie Basic Emberjs

Acum știi cum să folosești funcționalitatea de bază a routerului!

Iterarea peste date folosind fiecare ajutor

Am un traseu video și aș dori să afișez un set de videoclipuri YouTube pe pagină. Voi crea o componentă simplă a plăcii video pe care o voi itera și afișa pe pagina video.

Așa arată o placă video:

1611282431 96 Cum se configureaza o aplicatie Basic Emberjs

O parte din frumusețea lui Ember sunt toți ajutoarele care vă permit să faceți lucruri interesante în aplicația dvs.

Ajutorul {{fiecare}} al lui Ember este echivalent cu directiva ng-repeat din Angular 1 și directiva * ngPentru din Angular 2.

Sunt disponibile documente complete pentru fiecare membru auxiliar și, în general, pentru ajutoare aici.

Iată cum arată codul pentru un videoclip YouTube afișat:

<div class=”row”> <div class=”col s12 m6 l4"> <div class=”card-panel center-align”> <div class=”purple-text”> <p>Title</p> </div> <div class=”video-container”> <iframe width=”853" height=”480" src=”https://www.youtube.com/embed/peNV2yJRMLo?rel=0" frameborder=”0" allowfullscreen></iframe> </div> <div class=”purple-text”> With Taras Mankovski </div> </div> </div></div>

După ce l-am prezentat, îmi dau seama că vreau să iterez peste 3 date – titlul, linkul video YouTube și persoana prezentată în videoclip.

Deci, trebuie să-mi definesc datele într-o matrice din fișierul component.js astfel:

model: [{ title: “Ember DND Helper”, people: “Taras Mankovski”, videoLink: “peNV2yJRMLo?rel=0” },{ title: “Dependency Injection in Angular 2”, people: “Patrick J. Stapleton”, videoLink: “46WovCX8i-I?rel=0” },{ title: “Angular CLI”, people: “Mike Brocchi”, videoLink: “BmZLpNRNnZo” },{ title: “Angular Material 2 Spelunking & Issue Submission”, people: “Ben Lesh”, videoLink: “3gNsyL7wpXU” }]});
1611282432 91 Cum se configureaza o aplicatie Basic Emberjs

Apoi, pot folosi în cele din urmă ajutorul {{each}} pentru a itera peste datele mele.

Înfășurați conținutul cu ajutorul {{fiecare}} ca mai jos, definind modelul și variabila dvs. locală:

{{#each model as |video|}} CONTENT {{/each}}

Apoi, luați conținutul pe care doriți să fie dinamic și înlocuiți-l cu ghidon și localVariable.x, astfel:

{{video.title}}
src="https://www.youtube.com/embed/{{video.videoLink}}"
{{video.people}}

Iată cum arată codul când totul este spus și făcut:

<div class=”row”> {{#each model as |video|}} <div class=”col s12 m6 l4"> <div class=”card-panel center-align”> <div class=”purple-text”> <p>{{video.title}}</p> </div> <div class=”video-container”> <iframe width=”853" height=”480" src=”https://www.youtube.com/embed/{{video.videoLink}}" frameborder=”0" allowfullscreen></iframe> </div> <div class=”purple-text”> With {{video.people}} </div> </div> </div> {{/each}}</div>
1611282432 106 Cum se configureaza o aplicatie Basic Emberjs

Iată rezultatul final al utilizării ajutorului {{each}}.

1611282433 454 Cum se configureaza o aplicatie Basic Emberjs

Implementarea pe Heroku

A fost odată un bărbat numit tonycoco. Și tonycoco a simplificat implementarea aplicațiilor de brățară pe Heroku. Iată a lui github repo dacă vrei să te uiți la asta.

În primul rând, ar trebui să aveți instalat Heroku Toolbelt și conectat la contul dvs. Heroku.

Apoi, tot ce trebuie să faceți pentru a implementa pe Heroku este să vă transferați modificările la master și push.

$ heroku create — buildpack https://github.com/tonycoco/heroku-buildpack-ember-cli.git
$ git push heroku master

Așteptați să se termine implementarea completă.

Du-te în Tabloul de bord al aplicației Heroku. Actualizați aplicația la numele dorit (pentru a se potrivi cu aplicația dvs.).

Acum schimbați numele la distanță Heroku pentru a se potrivi cu noul nume al aplicației din fișierul dvs. .git / config.

Atunci, git push heroku master din nou și ar trebui să fiți gata!

În acest caz, această aplicație a implementat: http://yolobrolo-ember-1.herokuapp.com/

Yolo! Distrează-te cu el. Sper că încercați Ember și să vă bucurați de ea.

Urmăriți-mă cum construiesc acest pas cu pas

Oh, de asemenea, pentru vizionarea dvs., mă puteți urmări construind acest lucru pe YouTube la yolobrolo.