ember.jsAan de slag met ember.js


Opmerkingen

Deze sectie geeft een overzicht van wat ember.js is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen ember.js vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de documentatie voor ember.js nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Actuele release

Versie Publicatiedatum
2.14.0 beta 2017/04/29
2.13.0 2017/04/29

Installatie of instellingen

Aan de slag met Ember is eenvoudig. Ember-projecten worden gemaakt en beheerd via onze opdrachtregelbouwtool Ember CLI. Deze tool biedt:

  • Modern beheer van applicatieactiva (inclusief aaneenschakeling, minificatie en versiebeheer).
  • Generators om componenten, routes en meer te maken.
  • Een conventionele projectlay-out, waardoor bestaande Ember-applicaties gemakkelijk te benaderen zijn.
  • Ondersteuning voor ES2015 / ES6 JavaScript via het Babel- project. Dit omvat ondersteuning voor JavaScript-modules , die in deze handleiding worden gebruikt.
  • Een compleet QUnit testharnas .
  • De mogelijkheid om een groeiend ecosysteem van Ember Addons te consumeren.

afhankelijkheden

Node.js en npm

Ember CLI is gebouwd met JavaScript en verwacht de runtime van Node.js. Het vereist ook afhankelijkheden opgehaald via npm . npm is verpakt met Node.js, dus als Node.js op uw computer is geïnstalleerd, bent u klaar om te gaan.

Ember vereist Node.js 0,12 of hoger en npm 2,7 of hoger. Als u niet zeker weet of u Node.js of de juiste versie hebt, voert u dit uit op uw opdrachtregel:

node --version
npm --version

Als u de fout 'opdracht niet gevonden' of een verouderde versie voor Node krijgt:

Als u een verouderde versie van npm krijgt, voert u npm install -g npm .

Git

Ember vereist dat Git veel van zijn afhankelijkheden beheert. Git wordt geleverd met Mac OS X en de meeste Linux-distributies. Windows-gebruikers kunnen dit Git-installatieprogramma downloaden en uitvoeren.

Watchman (optioneel)

Op Mac en Linux kunt u de prestaties voor het bekijken van bestanden verbeteren door Watchman te installeren.

PhantomJS (optioneel)

U kunt uw tests uitvoeren vanaf de opdrachtregel met PhantomJS, zonder dat u een browser hoeft te openen. Raadpleeg de PhantomJS downloadinstructies .

Installatie

Installeer Ember met npm:

npm install -g ember-cli

Om te controleren of uw installatie is geslaagd, voert u het volgende uit:

ember -v

Als een versienummer wordt weergegeven, bent u klaar om te gaan.

Wijs localhost-poorten toe (in het bijzonder machtigingen / beschikbaarheidsproblemen, waarbij meerdere sintelsites tegelijkertijd worden uitgevoerd)

Af en toe is het handig om een of meer poorten handmatig toe te wijzen versus de standaardinstellingen te gebruiken. Hierdoor kunnen problemen met de beschikbaarheid van / de toegang tot de poort worden opgelost of kunnen meerdere exemplaren van ember tegelijk worden uitgevoerd.


Om ember-cli een beschikbare poort te laten identificeren en toewijzen, gebruikt u:

ember serve --port 0
 

Hulp per ember: "Geef 0 door om automatisch een beschikbare poort te kiezen". (Typ ember help in een terminal).


Als u meer dan één sintelsite tegelijkertijd wilt uitvoeren, heeft elke site zijn eigen server en live-herlaadpoorten nodig. Een eenvoudige benadering: navigeer in afzonderlijke Terminal-vensters naar elke instantie en gebruik het volgende om ze met hun eigen poorten te starten:

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

Als u in een van deze gevallen een foutmelding krijgt over beschikbaarheid of toestemming, voert u het volgende pythonscript in bij uw Terminal-prompt om een beschikbare poort te identificeren:

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

Gebruik de resultaten om poorten aan te geven waarvan u nu weet dat ze beschikbaar zijn:

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

App maken

Met Ember CLI kunt u een van de twee opties gebruiken om een nieuwe app te genereren:

  1. Maak een map en voer ember init (genereert applicatiestructuur en stelt git in en maakt je eerste commit)
  2. Voer ember new <app name> (maakt een map met de opgegeven naam, stapt erin en voert ember init )

Zodra het generatieproces is voltooid, start u een live-herlaadserver in de app-map op door het volgende te doen:

ember server
 

of ember s kort ember s . * Ta-da, nu heb je een actieve Ember-app! Officiële documenten

Uw eerste sjabloon maken

Laten we een nieuwe sjabloon maken met de opdracht ember generate .

ember generate template application
 

De application wordt altijd op het scherm weergegeven wanneer een gebruiker uw applicatie bezoekt. Open in uw gewenste editor de app/templates/application.hbs en voeg de volgende code toe:

<h2>My first Ember application</h2>

{{outlet}}
 

Nu zou u de nieuw toegevoegde tekst op de welkomstpagina van uw toepassing moeten zien. Merk ook op dat Ember automatisch het nieuwe bestand detecteert en de pagina opnieuw laadt. Netjes toch?

App implementeren

Om een Ember-toepassing te implementeren, brengt u de uitvoer eenvoudig over van ember build naar een webserver. Dit kan met standaard Unix-hulpmiddelen voor bestandsoverdracht, zoals rsync of scp . Er zijn ook services waarmee u eenvoudig kunt implementeren.

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

normaal gebruiken we ember build --environment=production die meer doet om uw code gereed te maken voor productie (gzip en minify code).

Hoe te werken met JavaScript-plug-ins

Er zijn vier manieren om met JavaScript-plug-ins te werken,

  1. Ember add-on
  2. JavaScript-plug-ins wereldwijd importeren
  3. Gebruik benoemde AMD-plug-ins
  4. Via ember-browserify