5.5 KiB
Začínáme s Angular aplikační šablonou
Tento tutoriál vysvětluje, jak vytvořit novou Angular aplikaci pomocí spouštěcí šablony, jak ji nakonfigurovat a spustit.
Tvorba nového projektu
Tento tutorial používá k vytvoření nového projektu ABP CLI. Podívejte se na stránku začínáme pro více možností.
Pokud jste tak dosud neučinili, nainstalujte ABP CLI pomocí okna příkazového řádku:
dotnet tool install -g Volo.Abp.Cli
Použíjte příkaz abp new v prázdné složce k vytvoření Vašeho projektu:
abp new Acme.BookStore -u angular
Můžete použít různé úrovně jmenných prostorů; např. BookStore, Acme.BookStore nebo Acme.Retail.BookStore.
-u angular volba specifikuje Angular jako UI framework. Výchozí poskytovatel databáze je EF Core. Podívejte se na CLI dokumentaci pro všechny dostupné možnosti.
Předběžné požadavky
Vytvořené řešení vyžaduje;
Struktura řešení
Otevřete řešení ve Visual Studio:
Řešení má vrstvenou strukturu (založenou na domain driven designu) a obsahuje projekty testů jednotek a integrace správně nakonfigurované pro práci s EF Core & SQLite in-memory databází.
Podívejte se na dokument šablony aplikace k detailnímu pochopení struktury řešení.
Databázový connection string
Zkontrolujte connection string v souboru appsettings.json u projektu .HttpApi.Host:
{
"ConnectionStrings": {
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True"
}
}
Řešení je nakonfigurováno pro použití Entity Framework Core s MS SQL Server. EF Core podporuje různé poskytovatele databáze, takže pokud chcete můžete použít jiný DBMS. V případě potřeby změňte connection string.
Tvorba databáze & aplikace migrací databáze
K vytvoření databáze máte dvě možnosti.
Použití aplikace DbMigrator
Řešení obsahuje konzolovou aplikaci (v tomto příkladu nazvanou Acme.BookStore.DbMigrator), která dokáže vytvořit databázi, aplikovat migrace a vložit počáteční data. Ta je užitečná jak pro vývojové tak pro produkční prostředí.
.DbMigratormá vlastníappsettings.json. Pokud jste změnili connection string výše, měli byste změnit i tento.
Klikněte pravým na projekt .DbMigrator zvolte Set as StartUp Project:
Zmáčkněte F5 (nebo Ctrl+F5) ke spuštění aplikace. Výstup by měl být podobný vyobrazení níže:
Použití příkazu EF Core Update-Database
Ef Core máš příkaz Update-Database, který v případě potřeby vytvoří databázi a aplikuje čekající migrace. Klikněte pravým na projekt .HttpApi.Host a zvolte Set as StartUp Project:
Otevřete Package Manager Console, zvolte .EntityFrameworkCore.DbMigrations jako Default Project a proveďte příkaz Update-Database:
Tímto vytvoříte novou databáze podle nakonfigurovaného connection string.
Je doporučeno užití nástroje
.DbMigrator, protože zároveň vloží i počáteční data ke správnému běhu webové aplikace.
Spuštění aplikace
Spuštění API Host (na straně serveru)
Ujistěte se že je projekt .HttpApi.Host nastaven jako startovací a spusťte aplikaci což otevře Swagger UI:
Tady můžete vidět API aplikace a zároveň je i otestovat. Získejte více informací o Swagger UI.
Autorizace pro Swagger UI
Vetšina API aplikace vyžaduje autentizaci & autorizaci. Pokud chcete otestovat autorizované API, manuálně přejděte na stránku /Account/Login, vložte admin jako uživatelské jméno a 1q2w3E* jako heslo k příhlášení do aplikace. Poté budete moci provádět autorizované požadavky API.
Spuštění Angular aplikace (na straně klienta)
Přejděte do složky angular, otevřete terminál příkazového řádku, proveďte příkaz yarn (doporučujeme používat správce balíků yarn, npm install bude v mnoha případech také fungovat):
yarn
Jakmile jsou načteny všechny node moduly, proveďte příkaz yarn start nebo npm start:
yarn start
Otevřete Váš oblíbený prohlížeč a přejděte na adresu localhost:4200. Počáteční uživatelské jméno je admin a heslo 1q2w3E*.
Startovací šablona obsahuje moduly správa identit a správa tenantů. Jakmile se přihlásíte, zprístupní se administrační menu kde můžete spravovat tenanty, role, uživatele a jejich oprávnění.
Doporučujeme Visual Studio Code jako editor pro Angular projekt, ale klidně použijte Váš oblíbený editor.