Een Angular-project maken
In deze inleiding van 5-10 minuten tot de IDE (Integrated Development Environment) van Visual Studio maakt en voert u een eenvoudige Angular-front-endwebtoepassing uit.
Voorwaarden
Zorg ervoor dat u de volgende software installeert:
- Visual Studio 2022 of hoger. Ga naar de Visual Studio-downloadpagina om Visual Studio gratis te installeren.
- npm (
https://www.npmjs.com/), dat is opgenomen in Node.js - Angular CLI (
https://angular.dev/tools/cli), die de versie van uw keuze kan zijn.
Uw app maken
Selecteer in het startvenster (kies Bestand>om het startvenster te openen) Een nieuw projectaanmaken.
Zoek naar Angular in de zoekbalk bovenaan en selecteer vervolgens Angular App.
Vanaf Visual Studio 2022 versie 11 is de sjabloonnaam gewijzigd van Standalone TypeScript Angular Project in Angular App.
Geef uw project en oplossing een naam.
Kies maken en wacht tot visual Studio het project heeft gemaakt.
De projecteigenschappen weergeven
Met de standaardprojectinstellingen kunt u het project bouwen en fouten opsporen. Als u echter instellingen wilt wijzigen, klikt u met de rechtermuisknop op het project in Solution Explorer, selecteert u eigenschappenen gaat u vervolgens naar de sectie Linting, Build of Deploy.
Gebruik launch.jsonvoor de configuratie van het foutopsporingsprogramma.
Notitie
launch.json slaat de opstartinstellingen op die zijn gekoppeld aan de knop Start op de werkbalk Foutopsporing. Op dit moment moet launch.json zich onder de map .vscode bevinden.
Uw project bouwen
Kies Build>Build Solution om het project te bouwen.
Opmerking: de eerste build kan enige tijd duren, omdat de Angular CLI de npm-installatieopdracht uitvoert.
Uw project starten
Druk op F5 of selecteer de knop Start boven aan het venster en u ziet een opdrachtprompt:
De Angular CLI voert de opdracht ng start uit
Notitie
Controleer de console-uitvoer voor berichten, zoals een bericht waarin u wordt geïnstrueerd om uw versie van Node.jsbij te werken.
Vervolgens ziet u dat de basis-Angular-apps worden weergegeven.
Volgende stappen
Voor ASP.NET Core-integratie: