AngularAan de slag met Angular


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 body tag)

<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

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.

Bestandsstructuur_1

Bestandsstructuur_2

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:

Welkom bij App

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';

Oorspronkelijke code

Gewijzigde code: waarde van title is gewijzigd.

Gewijzigde code

Evenzo is er een wijziging in ./src/app/app.component.html .

Oorspronkelijke HTML

voer hier de afbeeldingsbeschrijving in

Aangepaste HTML

voer hier de afbeeldingsbeschrijving in

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.

Hallo Wereld

Bezoek deze link hier voor meer informatie over het onderwerp.

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:

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