Sdílet prostřednictvím

Vytvoření aplikace Angular

  • Článek

V tomto 5-10minutovém úvodu do integrovaného vývojového prostředí (IDE) sady Visual Studio vytvoříte a spustíte jednoduchou front-endovou webovou aplikaci Angular.

Požadavky

Nezapomeňte nainstalovat následující:

Vytvoření aplikace

  1. V okně Start (otevření zvolte Okno Spustit soubor>) vyberte Vytvořit nový projekt.

    Screenshot showing Create a new project

  2. Na panelu hledání v horní části vyhledejte Angular a pak vyberte Samostatný projekt Angular TypeScriptu.

    Screenshot showing choosing a template

  3. Pojmenujte projekt a řešení.

    Když se dostanete do okna Další informace, nezapomeňte nekontrolovat možnost Přidat integraci pro prázdný projekt webového rozhraní API ASP.NET. Tato možnost přidá soubory do šablony Angular, aby bylo možné je připojit k projektu ASP.NET Core, pokud se přidá projekt ASP.NET Core.

    Screenshot showing Additional information

  4. Zvolte Vytvořit a počkejte na vytvoření projektu v sadě Visual Studio.

Zobrazení vlastností projektu

Výchozí nastavení projektu umožňuje sestavit a ladit projekt. Pokud ale potřebujete změnit nastavení, klikněte pravým tlačítkem myši na projekt v Průzkumník řešení, vyberte Vlastnosti a pak přejděte do části Sestavení nebo ladění.

Poznámka:

launch.json ukládá nastavení spuštění přidružené k tlačítku Start na panelu nástrojů Ladění. V současné době musí být soubor launch.json umístěný ve složce .vscode.

Sestavení projektu

Zvolte Sestavit>řešení pro sestavení a sestavte projekt.

Všimněte si, že počáteční sestavení může chvíli trvat, protože Rozhraní příkazového řádku Angular spustí příkaz npm install.

Spuštění projektu

Stiskněte klávesu F5 nebo vyberte tlačítko Start v horní části okna a zobrazí se příkazový řádek:

  • Rozhraní příkazového řádku Angular se spuštěným příkazem ng start

    Poznámka:

    Zkontrolujte výstup konzoly pro zprávy, například zprávu s pokynem k aktualizaci verze Node.js.

V dalším kroku by se měly zobrazit základní aplikace Angular.

Další kroky

Integrace ASP.NET Core:

Vytvoření aplikace ASP.NET Core pomocí Angular