Angular Zelfstudie
Aan de slag met Angular
Zoeken…
Opmerkingen
Angular (gewoonlijk aangeduid als " Angular 2+ " of " Angular 2 ") is een TypeScript- gebaseerd open-source front-end webframework geleid door het Angular Team bij Google en door een gemeenschap van particulieren en bedrijven om alle delen van de workflow van de ontwikkelaar bij het bouwen van complexe webapplicaties. Angular is een complete herschrijving van hetzelfde team dat AngularJS heeft gebouwd. ¹
Het framework bestaat uit verschillende bibliotheken , sommige core (bijvoorbeeld @ angular / core ) en enkele optionele ( @ angular / animations ).
U schrijft Angular-applicaties door HTML- sjablonen samen te stellen met Angularized markup, componentklassen te schrijven om die sjablonen te beheren, applicatielogica toe te voegen aan services en boxing-componenten en services in modules .
Dan moet je de app te starten door bootstrapping de wortel-module. Angular neemt het over, presenteert uw applicatie-inhoud in een browser en reageert op gebruikersinteracties volgens de instructies die u hebt verstrekt.
Het belangrijkste van het ontwikkelen van hoektoepassingen zijn de componenten . Een component is de combinatie van een HTML-sjabloon en een componentklasse die een deel van het scherm bestuurt. Hier is een voorbeeld van een component die een eenvoudige string weergeeft:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Elk onderdeel begint met een @Component decorateurfunctie die een metadata- object gebruikt. Het metadata-object beschrijft hoe de HTML-sjabloon en de componentklasse samenwerken.
De eigenschap selector geeft Angular aan dat het onderdeel moet worden weergegeven in een aangepaste <my-app> -tag in het bestand index.html .
index.html (in de
bodytag)<my-app>Loading AppComponent content here ...</my-app>
De sjablooneigenschap definieert een bericht in een <h1> -kop. Het bericht begint met "Hallo" en eindigt met {{name}} , een bindende uitdrukking voor hoekige interpolatie . Tijdens runtime vervangt Angular {{name}} door de waarde van de eigenschap name van de component. Interpolatiebinding is een van de vele hoekfuncties die u in deze documentatie zult ontdekken. In het voorbeeld, wijzigt u de component klasse name eigendom van 'Angular' tot 'World' en zien wat er gebeurt.
Dit voorbeeld is geschreven in TypeScript , een superset van JavaScript. Angular maakt gebruik van TypeScript omdat de typen het gemakkelijk maken om de productiviteit van ontwikkelaars te ondersteunen met tooling. Bovendien is bijna alle ondersteuning voor TypeScript en daarom zal het moeilijk zijn om gewone JavaScript te gebruiken om uw toepassing te schrijven. Het schrijven van Angular code in JavaScript is echter mogelijk; deze gids legt uit hoe.
Meer informatie over de architectuur van Angular kan worden gevonden hier
versies
| Versie | Publicatiedatum |
|---|---|
| 5.0.0-beta.1 (laatste) | 2017/07/27 |
| 4.3.2 | 2017/07/26 |
| 5.0.0-beta.0 | 2017/07/19 |
| 4.3.1 | 2017/07/19 |
| 4.3.0 | 2017/07/14 |
| 4.2.6 | 2017/07/08 |
| 4.2.5 | 2017/06/09 |
| 4.2.4 | 2017/06/21 |
| 4.2.3 | 2017/06/16 |
| 4.2.2 | 2017/06/12 |
| 4.2.1 | 2017/06/09 |
| 4.2.0 | 2017/06/08 |
| 4.2.0-rc.2 | 2017/06/01 |
| 4.2.0-rc.1 | 2017/05/26 |
| 4.2.0-rc.0 | 2017/05/19 |
| 4.1.3 | 2017/05/17 |
| 4.1.2 | 2017/05/10 |
| 4.1.1 | 2017/05/04 |
| 4.1.0 | 2017/04/26 |
| 4.1.0-rc.0 | 2017/04/21 |
| 4.0.3 | 2017/04/21 |
| 4.0.2 | 2017/04/11 |
| 4.0.1 | 2017/03/29 |
| 4.0.0 | 2017/03/23 |
| 4.0.0-rc.6 | 2017/03/23 |
| 4.0.0-rc.5 | 2017/03/17 |
| 4.0.0-rc.4 | 2017/03/17 |
| 2.4.10 | 2017/03/17 |
| 4.0.0-rc.3 | 2017/03/10 |
| 2.4.9 | 2017/03/02 |
| 4.0.0-rc.2 | 2017/03/02 |
| 4.0.0-rc.1 | 2017/02/24 |
| 2.4.8 | 2017/02/18 |
| 2.4.7 | 2017/02/09 |
| 2.4.6 | 2017/02/03 |
| 2.4.5 | 2017/01/25 |
| 2.4.4 | 2017/01/19 |
| 2.4.3 | 2017/01/11 |
| 2.4.2 | 2017/01/06 |
| 2.4.1 | 2016/12/21 |
| 2.4.0 | 2016/12/20 |
| 2.3.1 | 2016/12/15 |
| 2.3.0 | 2016/12/07 |
| 2.3.0-rc.0 | 2016/11/30 |
| 2.2.4 | 2016/11/30 |
| 2.2.3 | 2016/11/23 |
| 2.2.2 | 2016/11/22 |
| 2.2.1 | 2016/11/17 |
| 2.2.0 | 2016/11/14 |
| 2.2.0-rc.0 | 2016/11/02 |
| 2.1.2 | 2016/10/27 |
| 2.1.1 | 2016/10/20 |
| 2.1.0 | 2016/10/12 |
| 2.1.0-rc.0 | 2016/10/05 |
| 2.0.2 | 2016/10/05 |
| 2.0.1 | 2016/09/23 |
| 2.0.0 | 2016/09/14 |
| 2.0.0-rc.7 | 2016/09/13 |
| 2.0.0-rc.6 | 2016/08/31 |
| 2.0.0-rc.5 | 2016/08/09 |
| 2.0.0-rc.4 | 2016/06/30 |
| 2.0.0-rc.3 | 2016/06/21 |
| 2.0.0-rc.2 | 2016/06/15 |
| 2.0.0-rc.1 | 2016/05/03 |
| 2.0.0-rc.0 | 2016/05/02 |
Installatie van Angular met behulp van angular-cli
Dit voorbeeld is een snelle instelling van Angular en hoe u een snel voorbeeldproject kunt genereren.
Vereisten:
- Node.js 6.9.0 of hoger.
- npm v3 of hoger of garen .
- Typen v1 of hoger.
Open een terminal en voer de opdrachten een voor een uit:
npm install -g typings of yarn global add typings
npm install -g @angular/cli of yarn global add @angular/cli
De eerste opdracht installeert de typingsbibliotheek wereldwijd (en voegt het uitvoerbare typings aan PATH). De tweede installeert @ angular / cli wereldwijd en voegt het uitvoerbare bestand ng aan PATH.
Om een nieuw project op te zetten
Navigeer met de terminal naar een map waarin u het nieuwe project wilt instellen.
Voer de opdrachten uit:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Dat is alles, u hebt nu een eenvoudig voorbeeldproject gemaakt met Angular. U kunt nu naar de koppeling navigeren die wordt weergegeven in terminal en zien wat deze uitvoert.
Toevoegen aan een bestaand project
Navigeer naar de hoofdmap van uw huidige project.
Voer de opdracht uit:
ng init
Hiermee voegt u de nodige steigers aan uw project toe. De bestanden worden in de huidige map gemaakt, dus zorg ervoor dat u deze in een lege map uitvoert.
Het project lokaal uitvoeren
Om uw applicatie te zien en ermee te werken terwijl deze in de browser draait, moet u een lokale ontwikkelingsserver starten die de bestanden voor uw project host.
ng serve
Als de server met succes is gestart, moet deze een adres weergeven waarop de server wordt uitgevoerd. Meestal is dit:
http://localhost:4200
Standaard wordt deze lokale ontwikkelingsserver aangesloten met Hot Module Reloading, dus wijzigingen in de html, typescript of css zorgen ervoor dat de browser automatisch opnieuw wordt geladen (maar kan desgewenst worden uitgeschakeld).
Componenten, richtlijnen, leidingen en services genereren
Met de opdracht ng generate <scaffold-type> <name> (of eenvoudigweg ng g <scaffold-type> <name> ) kunt u automatisch hoekcomponenten genereren:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
Er zijn verschillende mogelijke soorten steigers die angular-cli kan genereren:
| Steiger type | Gebruik |
|---|---|
| module | ng g module my-new-module |
| bestanddeel | ng g component my-new-component |
| Richtlijn | ng g directive my-new-directive |
| Pijp | ng g pipe my-new-pipe |
| Onderhoud | ng g service my-new-service |
| Klasse | ng g class my-new-class |
| Koppel | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
U kunt de typenaam ook vervangen door de eerste letter. Bijvoorbeeld:
ng gm my-new-module om een nieuwe ng gm my-new-module te genereren of ng gc my-new-component om een component te maken.
Bouw / Bundeling
Wanneer u klaar bent met het bouwen van uw Angular-web-app en deze wilt installeren op een webserver zoals Apache Tomcat, hoeft u alleen de build-opdracht uit te voeren met of zonder de productievlag ingesteld. Productie zal de code minimaliseren en optimaliseren voor een productie-instelling.
ng build
of
ng build --prod
Zoek vervolgens in de hoofdmap van het project naar een map /dist , die de build bevat.
Als u de voordelen van een kleinere productiebundel wilt, kunt u ook Ahead-of-Time sjablooncompilatie gebruiken, waardoor de sjablooncompiler uit de definitieve build wordt verwijderd:
ng build --prod --aot
Testen van een eenheid
Angular biedt ingebouwde unit-testen, en elk item gemaakt door angular-cli genereert een elementaire unit-test, die kan worden besteed. De eenheidstests zijn geschreven met behulp van jasmijn en uitgevoerd via Karma. Voer de volgende opdracht uit om te beginnen met testen:
ng test
Met deze opdracht worden alle tests in het project uitgevoerd en worden ze opnieuw uitgevoerd telkens wanneer een bronbestand verandert, ongeacht of dit een test of code van de toepassing is.
Voor meer info, bezoek ook: angular-cli github pagina
Hoekig "Hello World" -programma
Vereisten:
Het opzetten van de ontwikkelomgeving
Voordat we aan de slag gaan, moeten we onze omgeving instellen.
Installeer Node.js en npm als ze nog niet op uw computer staan.
Controleer of u ten minste knooppunt 6.9.x en npm 3.xx uitvoert door knooppunt -v en npm -v uit te voeren in een terminal / consolevenster. Oudere versies produceren fouten, maar nieuwere versies zijn prima.
Installeer de Angular CLI wereldwijd met
npm install -g @angular/cli.
Stap 1: een nieuw project maken
Open een terminalvenster (of Node.js-opdrachtprompt in Windows).
We maken een nieuwe project- en skeletapplicatie met de opdracht:
ng new my-app
Hier is de ng voor Angular. We krijgen zo een bestandsstructuur.
Er zijn veel bestanden. We hoeven ons nu niet allemaal zorgen te maken.
Stap 2: De applicatie serveren
We starten onze applicatie met behulp van de volgende opdracht:
ng serve
We kunnen een vlag -open (of eenvoudigweg -o ) gebruiken die onze browser automatisch opent op http://localhost:4200/
ng serve --open
Navigeer de browser naar het adres http://localhost:4200/ . Het ziet er ongeveer zo uit:
Stap 3: onze eerste hoekcomponent bewerken
De CLI heeft de standaard hoekcomponent voor ons gemaakt. Dit is de rootcomponent en deze wordt app-root . Je kunt het vinden in ./src/app/app.component.ts .
Open het componentbestand en wijzig de titeleigenschap van Welcome to app!! naar Hello World . De browser wordt automatisch opnieuw geladen met de herziene titel.
Oorspronkelijke code: let op de title = 'app';
Gewijzigde code: waarde van title is gewijzigd.
Evenzo is er een wijziging in ./src/app/app.component.html .
Oorspronkelijke HTML
Aangepaste HTML
Merk op dat de waarde van de title van de ./src/app/app.component.ts wordt weergegeven. De browser wordt automatisch opnieuw geladen als de wijzigingen zijn doorgevoerd. Het ziet er ongeveer zo uit.
Bezoek deze link hier voor meer informatie over het onderwerp.