Angular Handledning
Komma igång med Angular
Sök…
Anmärkningar
Angular (vanligtvis benämnd " Angular 2+ " eller " Angular 2 ") är ett TypeScript- baserat öppet källkodsprogram med front-end ledd av Angular Team på Google och av en grupp av individer och företag för att adressera alla delar av utvecklarens arbetsflöde medan man bygger komplexa webbapplikationer. Angular är en komplett omskrivning från samma team som byggde AngularJS . ¹
Ramverket består av flera bibliotek , av vilka några är kärnor ( @ vinkel / kärna till exempel) och några valfria ( @ vinkel / animationer ).
Du skriver Angular-applikationer genom att komponera HTML- mallar med Angularized markup, skriva komponentklasser för att hantera dessa mallar, lägga till applikationslogik i tjänster och boxningskomponenter och tjänster i moduler .
Sedan startar du appen genom att starta om rotmodulen . Angular tar över, presenterar ditt applikationsinnehåll i en webbläsare och svarar på användarinteraktioner enligt instruktionerna du har angett.
Det är säkert att den mest grundläggande delen av utvecklingen av Angular-applikationer är komponenterna . En komponent är kombinationen av en HTML-mall och en komponentklass som styr en del av skärmen. Här är ett exempel på en komponent som visar en enkel sträng:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Varje komponent börjar med en @Component dekoratörsfunktion som tar ett metadataobjekt . Metadataobjektet beskriver hur HTML-mallen och komponentklassen fungerar tillsammans.
selector berättar för Angular att visa komponenten i en anpassad <my-app> -tagg i filen index.html .
index.html (inuti
bodytaggen)<my-app>Loading AppComponent content here ...</my-app>
Mallegenskapen definierar ett meddelande i en <h1> rubrik. Meddelandet börjar med "Hej" och slutar med {{name}} , vilket är ett vinklat interpolationsbindande uttryck. Vid körning, Vinkel ersätter {{name}} med värdet på komponentens name egendom. Interpoleringsbindning är en av många vinkelfunktioner som du kommer att upptäcka i den här dokumentationen. I exemplet, ändra komponent klassens name egendom från 'Angular' till 'World' och se vad som händer.
Detta exempel är skriven i TypeScript , en superset av JavaScript. Angular använder TypeScript eftersom dess typer gör det enkelt att stödja utvecklarens produktivitet med verktyg. Dessutom är nästan allt stöd för TypeScript och så att använda vanlig JavaScript för att skriva din applikation kommer att vara svårt . Att skriva vinkelkod i JavaScript är dock möjligt; den här guiden förklarar hur.
Mer information om arkitekturen i Angular finns här
versioner
| Version | Utgivningsdatum |
|---|---|
| 5.0.0-beta.1 (senaste) | 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 |
Installation av vinkel med hjälp av vinkel-cli
Detta exempel är en snabb inställning av Angular och hur man skapar ett snabbt exempelprojekt.
förutsättningar:
- Node.js 6.9.0 eller högre.
- npm v3 eller högre eller garn .
- Typ v1 eller högre.
Öppna en terminal och kör kommandona en efter en:
npm install -g typings eller yarn global add typings
npm install -g @angular/cli eller yarn global add @angular/cli
Det första kommandot installerar typbiblioteket globalt (och lägger till de typings köras till PATH). Den andra installerar @ vinkel / cli globalt och lägger till den körbara ng till PATH.
För att ställa in ett nytt projekt
Navigera med terminalen till en mapp där du vill ställa in det nya projektet.
Kör kommandona:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Det är det, du har nu ett enkelt exempelprojekt med Angular. Du kan nu navigera till länken som visas i terminalen och se vad den kör.
Lägga till i ett befintligt projekt
Navigera till roten till ditt nuvarande projekt.
Kör kommandot:
ng init
Detta kommer att lägga till nödvändigt byggnadsställning till ditt projekt. Filerna skapas i den aktuella katalogen så se till att köra detta i en tom katalog.
Kör projektet lokalt
För att se och interagera med din applikation medan den körs i webbläsaren måste du starta en lokal utvecklingsserver som är värd för filerna för ditt projekt.
ng serve
Om servern startade framgångsrikt bör den visa en adress där servern körs. Vanligtvis är detta:
http://localhost:4200
Utanför detta är denna lokala utvecklingsserver ansluten till Hot Module Reloading, så eventuella ändringar i html, typscript eller css kommer att göra att webbläsaren laddas om automatiskt (men kan avaktiveras om så önskas).
Generera komponenter, direktiv, rör och tjänster
Med ng generate <scaffold-type> <name> (eller helt enkelt ng g <scaffold-type> <name> ) kan du automatiskt generera vinkelkomponenter:
# 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
Det finns flera möjliga typer av byggnadsställningar vinkel-cli kan generera:
| Ställningstyp | Användande |
|---|---|
| Modul | ng g module my-new-module |
| Komponent | ng g component my-new-component |
| Direktiv | ng g directive my-new-directive |
| Rör | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Klass | ng g class my-new-class |
| Gränssnitt | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
Du kan också ersätta typnamnet med dess första bokstav. Till exempel:
ng gm my-new-module att generera en ny modul eller ng gc my-new-component att skapa en komponent.
Bygg / Bundling
När du är klar med att bygga din Angular-webbapp och du vill installera den på en webbserver som Apache Tomcat, behöver du bara köra build-kommandot antingen med eller utan produktionsflaggan. Produktion kommer att minimera koden och optimera för en produktionsinställning.
ng build
eller
ng build --prod
Titta sedan i projektkatalogen för en /dist mapp, som innehåller build.
Om du vill ha fördelarna med ett mindre produktionspaket kan du också använda Ahead-of-Time-mallen sammanställning, som tar bort mallkompilatorn från slutbyggnaden:
ng build --prod --aot
Enhetstestning
Angular tillhandahåller inbyggd enhetstestning, och varje objekt som skapas av angular-cli genererar ett grundläggande enhetstest som kan användas. Enhetstesterna skrivs med jasmine och körs genom Karma. Utför följande kommando för att börja testa:
ng test
Detta kommando kör alla tester i projektet och kommer att köra dem varje gång en källfil ändras, oavsett om det är ett test eller kod från applikationen.
Mer information finns också på: vinkel-cli github-sida
Vinkelformat "Hello World" -program
förutsättningar:
Ställa in utvecklingsmiljön
Innan vi kommer igång måste vi ställa in vår miljö.
Installera Node.js och npm om de inte redan finns på din maskin.
Kontrollera att du kör åtminstone nod 6.9.x och npm 3.xx genom att köra nod -v och npm -v i ett terminal- / konsolfönster. Äldre versioner ger fel, men nyare versioner är bra.
Installera Angular CLI globalt med
npm install -g @angular/cli.
Steg 1: Skapa ett nytt projekt
Öppna ett terminalfönster (eller Node.js-kommandotolken i windows).
Vi skapar ett nytt projekt och skelettapplikation med kommandot:
ng new my-app
Här är ng för Angular. Vi får en filstruktur något liknande.
Det finns många filer. Vi behöver inte oroa oss för dem alla nu.
Steg 2: Visar applikationen
Vi startar vår applikation med följande kommando:
ng serve
Vi kan använda en flagga- -open (eller helt enkelt -o ) som automatiskt öppnar vår webbläsare på http://localhost:4200/
ng serve --open
Navigera webbläsaren till adressen http://localhost:4200/ . Det ser ut så här:
Steg 3: Redigera vår första vinkelkomponent
CLI skapade standardvinkelkomponenten för oss. Detta är rotkomponenten och den heter app-root . Man kan hitta det i ./src/app/app.component.ts .
Öppna komponentfilen och ändra titelegenskapen från Welcome to app!! till Hello World . Webbläsaren laddar om automatiskt med den reviderade titeln.
Original kod: Lägg märke till title = 'app';
Modifierad kod: title värde ändras.
På liknande sätt är det en förändring i ./src/app/app.component.html .
Original HTML
Modifierad HTML
Lägg märke till att värdet av title från ./src/app/app.component.ts visas. Webbläsaren laddar om automatiskt när ändringarna är gjorda. Det ser ut så här.
För mer information om ämnet, besök den här länken här .