použití šablony projektu Angular s ASP.NET Core

  • Článek
  • 3 min ke čtení

aktualizovaná šablona projektu Angular poskytuje pohodlný výchozí bod pro ASP.NET Core aplikace pomocí Angular a Angular CLI k implementaci bohatě funkčního uživatelského rozhraní (UI) na straně klienta.

šablona je ekvivalentní k vytvoření ASP.NET Core projektu, který bude fungovat jako back-end rozhraní API a projekt Angular CLI, který bude fungovat jako uživatelské rozhraní. Šablona nabízí pohodlí hostování obou typů projektů v jednom projektu aplikace. V důsledku toho může být projekt aplikace sestaven a publikován jako jediná jednotka.

Vytvoření nové aplikace

pokud máte nainstalovanou ASP.NET Core 2,1, není nutné instalovat Angular šablonu projektu.

Vytvoří nový projekt z příkazového řádku pomocí příkazu dotnet new angular v prázdném adresáři. Například následující příkazy vytvoří aplikaci v adresáři My-New-App a přepne do tohoto adresáře:

dotnet new angular -o my-new-app
cd my-new-app

spusťte aplikaci buď z Visual Studio, nebo .NET Core CLI:

Otevřete vygenerovaný soubor . csproj a z něj spusťte aplikaci jako normální.

Proces sestavení obnoví závislosti npm při prvním spuštění, což může trvat několik minut. Následná sestavení jsou mnohem rychlejší.

šablona projektu vytvoří aplikaci ASP.NET Core a aplikaci Angular. aplikace ASP.NET Core je určena k použití pro přístup k datům, autorizaci a další aspekty na straně serveru. aplikace Angular umístěná v podadresáři ClientApp má být použita pro všechny aspekty uživatelského rozhraní.

Přidat stránky, obrázky, styly, moduly atd.

adresář ClientApp obsahuje standardní aplikaci Angular CLI. další informace najdete v dokumentaci oficiálního Angular .

existují mírné rozdíly mezi Angular aplikaci vytvořenou touto šablonou a šablonou vytvořenou pomocí Angular CLI (přes ng new ), ale možnosti aplikace se nezměnily. Aplikace vytvořená šablonou obsahuje rozložení založené na bootstrapa základní příklad směrování.

Spustit příkazy NG

V příkazovém řádku přejděte do podadresáře clientapp :

cd ClientApp

Pokud máte ng nástroj nainstalovaný globálně, můžete spustit libovolný z jeho příkazů. můžete například spustit ng lint , ng test nebo kterýkoli z dalších příkazů Angular CLI. tuto situaci nemusíte spouštět ng serve , protože vaše aplikace ASP.NET Core se zabývá poskytováním součástí aplikace na straně serveru i na straně klienta. Interně se používá ng serve při vývoji.

Pokud ng Nástroj nemáte nainstalovaný, spusťte ho npm run ng . Například můžete spustit npm run ng lint nebo npm run ng test .

Instalace balíčků npm

K instalaci balíčků npm třetích stran použijte příkazový řádek v podadresáři clientapp . Například:

cd ClientApp
npm install --save <package_name>

Publikování a nasazení

Ve vývoji se aplikace spouští v režimu optimalizovaném pro usnadnění vývoje. Například sady prostředků JavaScriptu obsahují zdrojové mapy (takže při ladění uvidíte původní kód TypeScriptu). Aplikace sleduje změny souborů TypeScriptu, HTML a CSS na disku a automaticky znovu zkompiluje a znovu načte, když se tyto soubory uvidí.

V produkčním prostředí poskytuje verzi vaší aplikace optimalizované pro výkon. To se nakonfiguruje tak, aby se automaticky stalo. Když publikujete, konfigurace sestavení generuje minifikovaného sestavení zkompilovaného kódu na straně klienta (AoT). Na rozdíl od sestavení pro vývoj není v produkčním sestavení potřeba nainstalovat Node.js na server (Pokud jste nepovolili vykreslování na straně serveru (SSR)).

můžete použít standardní ASP.NET Core hostování a metody nasazení.

Spustit "NG obsluhu" nezávisle

projekt je nakonfigurován tak, aby spouštěl svoji vlastní instanci Angular serveru CLI na pozadí, když se ASP.NET Core aplikace spustí v režimu vývoje. To je vhodné, protože nemusíte spouštět samostatný server ručně.

Tato výchozí instalace je nevýhodná. pokaždé, když upravíte kód v C# a vaše aplikace ASP.NET Core se musí restartovat, Angular server CLI se restartuje. Pro spuštění zálohování je nutné asi 10 sekund. pokud provádíte časté úpravy kódu v jazyce C# a nechcete čekat na restartování Angular cli, spusťte Angular server cli externě, nezávisle na procesu ASP.NET Core. Postupujte následovně:

  1. v příkazovém řádku přejděte do podadresáře ClientApp a spusťte vývojový server Angular CLI:

    cd ClientApp
npm start

    Důležité

    slouží npm start ke spuštění vývojového serveru Angular CLI, ne ng serve , aby byla dodržena konfigurace v package.js . chcete-li předat další parametry serveru Angular CLI, přidejte je do příslušného scripts řádku v package.js souboru.

  2. upravte aplikaci ASP.NET Core tak, aby používala externí instanci rozhraní příkazového řádku Angular místo spuštění vlastní. Ve vaší spouštěcí třídě nahraďte spa.UseAngularCliServer vyvolání následujícím způsobem:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

když spustíte aplikaci ASP.NET Core, nespustí se server Angular CLI. Místo toho se použije instance, kterou jste spustili ručně. To umožňuje, aby se rychleji spouštěla a restartovala. nečeká se na to, Angular CLI pokaždé znovu sestaví klientskou aplikaci.

Předání dat z kódu .NET do kódu TypeScript

během služby SSR možná budete chtít předat data z vaší aplikace ASP.NET Core do vaší aplikace Angular. Můžete například předat cookie informace nebo něco číst z databáze. Provedete to tak, že upravíte třídu Startup . Ve zpětném volání pro UseSpaPrerendering nastavte hodnotu jako options.SupplyData následující:

options.SupplyData = (context, data) =>
{
    // Creates a new value called isHttpsRequest that's passed to TypeScript code
    data["isHttpsRequest"] = context.Request.IsHttps;
};

SupplyDataZpětné volání umožňuje předat libovolná data serializovatelný v rámci požadavku JSON (například řetězce, logické hodnoty nebo čísla). Váš hlavní kód. Server. TS ho obdrží jako params.data . Například předchozí ukázka kódu předá logickou hodnotu params.data.isHttpsRequest do createServerRenderer zpětného volání. Můžete to předat ostatním částem aplikace jakýmkoli způsobem, který podporuje Angular. Například viz, jak hlavní. Server. TS předá BASE_URL hodnotu libovolné součásti, jejíž konstruktor je deklarován pro přijetí.

Nevýhody SSR

Ne všechny aplikace využívají SSR. Hlavní výhodou je vnímaný výkon. Návštěvníci, kteří dosáhnou vaší aplikace přes pomalé připojení k síti nebo pomalá mobilní zařízení, uvidí počáteční uživatelské rozhraní rychle, a to i v případě, že nějakou dobu trvá a načítají nebo analyzují sady JavaScript. Mnohé jednostránkové se ale používají hlavně v rychlé interní síti společnosti na rychlých počítačích, kde se aplikace zobrazuje skoro okamžitě.

Ve stejnou chvíli existují významné nevýhody povolování SSR. Přináší složitost vašemu procesu vývoje. Váš kód musí běžet ve dvou různých prostředích: na straně klienta a na serveru (v prostředí Node.js vyvolaném z ASP.NET Core). Tady je několik věcí, které je potřeba mít na paměti:

  • SSR vyžaduje instalaci Node.js na produkčních serverech. Toto je automaticky pro některé scénáře nasazení, jako je například Azure App Services, ale ne pro jiné, jako je například Azure Service Fabric.

  • Povolením BuildServerSideRenderer příznaku sestavení dojde k publikování adresáře node_modules . Tato složka obsahuje 20 000 souborů, což zvyšuje dobu nasazení.

  • Chcete-li spustit kód v prostředí Node.js, nemůžeme spoléhat na existenci rozhraní JavaScript API specifických pro prohlížeč, například window nebo localStorage . Pokud váš kód (nebo některá z knihoven třetích stran, na které odkazujete) se pokusí použít tato rozhraní API, během průběhu SSR se zobrazí chyba. Nepoužívejte například jQuery, protože odkazuje na rozhraní API specifická pro prohlížeč na mnoha místech. Pokud chcete zabránit chybám, musíte se buď vyhnout SSR, nebo se vyhnout rozhraním API nebo knihovnám specifickým pro prohlížeč. Jakákoli volání těchto rozhraní API můžete zabalit do kontrol, aby se zajistilo, že se během SSR nevolá. V kódu JavaScriptu nebo TypeScriptu použijte například následující kontrolu:

    if (typeof window !== 'undefined') {
    // Call browser-specific APIs here
}

Další materiály