1. створення проекту
2. Додамо в наш проект Angular Quick Start Application
3. Вихідний код
4. Всі частини серії

Моя основна робота пов'язана з розробкою програм для вбудованих систем і утиліт, які їх обслуговують. Але мені завжди подобався Web і технології пов'язані з ним. Моє знайомство з Web програмуванням почалося давно, а першим серверним мовою був старий і жахливий ASP. Це той, який на Visual Basic. Після цього був PHP і Perl. Жоден з них мені не подобався. У кожного були свої проблеми і до ідеальної платформи розробки Web додатків вони явно не дотягували (PHP теж не айс, хоча він і широко використовується для самих різних проектів). А ще мені завжди подобалася платформа Windows. Тому поява ASP.NET було просто як божий дар для мене - платформа для розробки Web додатків, орієнтований на Windows IIS і за допомогою мого улюбленого мови C # з потужною підтримкою в особі .NET Framework.

Але через деякий час стало зрозуміло, що Web Pages - теж не найкраще рішення для легковажних і швидких сайтів і онлайн сервісів. PageState, неправильний HTML і перевантажені мегабайтами сторінки погано підходять для швидкого web сервісу. Для корпоративного сегмента - так, це було прийнятно, але для простих веб сайтів ця технологія програвала більш швидким і простим технологіям на основі Linux платформи.

Але хороші речі трапляються, і Microsoft випускає ASP.NET MVC. Саме цей фреймворк став моїм улюбленим інструментом для розробки web сервісів і web сайтів. ASP.NET MVC - це простий і зрозумілий патерн MVC, чистий код розділений по контролерам, відокремлене подання від основного коду (Views), чистий HTML, легко підключаються client-side бібліотеки, легко тестований код і все та ж міць .NET Framework. Кілька робочі web сервісів були написані і досі непогано працюють саме на цій платформі.

Але час йде, а я все відстаю від нього. Деякий час назад стали дуже популярні односторінкові веб додатки (SPA - Single Page Application). Вони працюють набагато швидше ніж багатосторінкові, вони використовують RESTful API, надає інтеграцію з іншими сервісами через це API і вони подобаються користувачам і замовникам. І ось, спостерігаючи, як в черговий раз завантажується нова сторінка в моєму сервісі, я зрозумів - пора переходити на новий рівень. Потрібно вивчити односторінкові додатки. Для відправної точки в цій подорожі до осягнення дзен SPA я вирішив зупинитися на такій зв'язці: ASP.NET MVC Core (основа для серверної частини) + Angular 4 (JavaScript Framework для реалізації швидкого UI на стороні користувача у вигляді SPA).

Так чому Angular, а не інший фреймворк або набір бібліотек, таких як Knockout, Ember, ReactJS, Redux і інші? Після довгого гортання інтернету і читання достоїнств і недоліків найпопулярніших бібліотек і фреймворків я вирішив, що почну з Angular, так як остання версія цього фреймворка досить хороша і дає все що потрібно прямо з коробки. У неї є свої мінуси, але я готовий з ними змиритися. Крім того Angular дуже добре розвивається, має велике співтовариство і хорошу документацію, так що вивчати його буде набагато простіше. Але це моя суб'єктивна думка. У будь-якому випадку вибір зроблений, давайте почнемо кодувати!

створення проекту

Тут можна завантажити архів з закінченим Visual Studio 2017 проектом ASP.NET MVC Core + Angular SPA

Перше з чого варто почати - з створення нового проекту ASP.NET MVC Core.
Вибираємо в головному меню File -> New -> Project ...
У вікні, в лівій частині вибираємо Templates -> Visual C # -> Web.

Створюємо новий ASP.NET MVC Core проект

У списку проектів вибираємо ASP.NET Core Web Application (.NET Core)

Я вибрав ім'я проекту як AgularSpa. Залишив зазначеними чекбокси Create directory for solution і Create new Git repository.
Натискаємо ОК.

Створюємо новий ASP.NET MVC Core проект

У новому вікні налаштувань все залишаємо за замовчуванням. Тип програми - Web Application, No Authentication. Натискаємо ОК.
Після нетривалого часу отримуємо новенький проект.

Visual Studio з новим проектом

Натискаємо Ctrl + F5 і запускаємо наш проект. За замовчуванням проект використовуємо IIS Express і після складання відкриється в вашому браузері за замовчуванням.

Вид за замовчуванням нової програми ASP.NET MVC Core

Додамо в наш проект Angular Quick Start Application

Тепер перейдемо до наступного кроку - скачати Angular Quick Start Application з офіційного туторіал по Angular і помістимо його в наше ASP.NET Core додаток.
Якщо вам потрібно підтягнути свої знання з Angular - то вам на офіційний сайт Angular . Там є відмінний туторіал.
Для початку зробимо копію Angular Quick Start Application зі сховищ Git. Відкриваємо командний рядок і запускаємо наступну команди:

cd c: \ Temp git clone https://github.com/angular/quickstart

Clone Angular Quickstart Application

В результаті ми отримаємо в папці c: \ Temp \ quickstart файли Angular проекту.

Файли додатки Angular Quickstart

Тепер відкриємо цю папку і скопіюємо потрібні нам файли в наш проект. Файли можна просто перетягувати мишкою з папки в Windows Explorer прямо у вікно Solution в Visual Studio 2017.

Копіювання файлів Angular Quickstart Application

Копіювання файлів Angular Quickstart Application

Так виглядає проект перед копіюванням файлів.

Вид проекту перед копіюванням Angular Quickstart Application файлів

Так виглядає проект після копіювання нових файлів.

Вид проекту після скопійованих Angular Quickstart Application файлів

Тепер потрібно відредагувати файл package.json. Цей файл потрібен для настройки пакетів, які використовуються проектом. Цей файл буде оброблятися пакетним менеджером NPM.
В результаті у вас повинно залишитися наступна конфігурація:

{ "Dependencies": { "@ angular / common": "~ 4.0.0", "@ angular / compiler": "~ 4.0.0", "@ angular / core": "~ 4.0.0", "@ angular / forms ":" ~ 4.0.0 "," @ angular / http ":" ~ 4.0.0 "," @ angular / platform-browser ":" ~ 4.0.0 "," @ angular / platform-browser- dynamic ":" ~ 4.0.0 "," @ angular / router ":" ~ 4.0.0 "," angular-in-memory-web-api ":" ~ 0.3.0 "," systemjs ":" 0.19. 40 "," core-js ":" ^ 2.4.1 "," rxjs ":" 5.0.1 "," zone.js ":" ^ 0.8.4 "}," devDependencies ": {" typescript ":" ~ 2.1.0 "," tslint ":" ^ 3.15.1 "}," repository ": {}}

Наступний файл який потрібно відредагувати, це tsconfig.json. Це файл який конфигурирует TypeScript додаток. Після редагування файл повинен бути таким:

{ "CompilerOptions": { "diagnostics": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom"], "listFiles": true, "module": "commonjs "," moduleResolution ":" node "," noImplicitAny ": true," outDir ":" app "," removeComments ": false," rootDir ":" app "," sourceMap ": true," suppressImplicitAnyIndexErrors ": true, "target": "es5"}, "exclude": [ "node_modules"]}

Так як розташування файлів трохи змінилося, щодо початкової структури в Angular Quickstart додатку, то потрібно підправити шляху в файлі wwwroot / app / main.ts
рядок коду

import {AppModule} from './app/app.module';

замінюємо на

import {AppModule} from './app.module';

І останні, перш ніж запустити процес компіляції нам потрібно видалити один TypeScript файл - app.component.spec.ts. Цей файл використовується для тестів. Так як я не збираюся запускати тести, то його потрібно видалити. Цей файл знаходиться в папці wwwroot / app /
Тепер можна зібрати додаток і в результаті Visual Studio скомпілює * .ts файли в готові * .js файли, які будуть відповідати стандарту ES5. * .js файли будуть завантажуватися в браузер, * .js.map файли будуть використовуватися для налагодження, коли помилка в * .js буде пов'язана з кодом в TypeScript файлі.

Скомпільовані файли TypeScript

Перш ніж ми зможемо відкрити Angular додаток, нам потрібно скопіювати ще пару файлів з quickstart проекту в наш проект. Це файли index.html і styles.css. Скопіювати їх потрібно в папку wwwroot. index.html - це статичний файл, який буде агружен в браузер. Так само він має мінімальну розмітку для Angular додатки і підключає всі необхідні файли. Styles.css - набір стилів. Він використовується всередині index.html.

Зараз вже можна запустити додаток (натисніть F5) і відкрити сторінку Angular прикладу. Для цього потрібно відкрити в браузері файл index.html. Як бачите, поки завантажується тільки статичний HTML, а сам Angular не працює.

перший результат

Якщо відкрити консоль розробника, то буде видно, що деякі файли не довантажити.

Деякі файли не завантажуються

Очікується, що файли бібліотек будуть завантажуватися з wwwroot / node_modules, але вони фактично знаходяться в корені проекту. Це не очевидно, поки ви не включите опцію Show All Files.

Опція для відображення всіх файлів в папці проекту

Як тільки ви включите цю опцію, ви побачите папку, виділену сірим кольором, щоб вказати, що вона не є частиною проекту, але додана в папку проекту.

Вид проекту разом з прихованими папками і файлами

Приховані папки та файли можна заховати знову (просто вимкнувши опцію Show All Files). Тепер потрібно виправити проблему з розташуванням бібліотечних файлів. Найпростіший спосіб - встановити NuGet пакет Microsoft.AspNetCore.SpaServicesusing. Відкриваємо консоль для управління пакетами NuGet.

Відкриття консолі NuGet

Тепер запустимо команду для установки пакета

Install-Package Microsoft.AspNetCore.SpaServices

Установка пакета NuGet SpaServices

Далі знову потрібно трошки поправити код. Відкриваємо файл Startup.cs. Нас цікавить метод

public void Configure (IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

Цей метод викликається середовищем виконання що б конфігурувати конвеєр обробки HTTP запитів. Знаходимо код:

app.UseStaticFiles (); app.UseMvc (routes = & amp; gt; {routes.MapRoute (name: "default", template: "{controller = Home} / {action = Index} / {id?}");});

І замінюємо цей код на такий:

app.UseDefaultFiles (); app.UseStaticFiles (); app.UseStaticFiles (new StaticFileOptions {FileProvider = new PhysicalFileProvider (Path.Combine (env.ContentRootPath, "node_modules")), RequestPath = "/ node_modules"}); app.UseMvc (routes = & amp; gt; {routes.MapRoute (name: "default", template: "{controller = Home} / {action = Index} / {id?}"); routes.MapSpaFallbackRoute ( "spa- fallback ", new {controller =" home ", action =" index "});}); app.UseDefaultFiles ();

Цей виклик дозволяє web сервера повертати клієнту файл за умовчанням (index.html для прикладу). Тобто він конфигурирует доступність фалів за замовчуванням для URL, які ведуть в корінь web сайту.

app.UseStaticFiles ();

Цей виклик дозволяє віддавати web сервера файли з папки / wwwroot (без вказівки папки wwwroot в самому URL звичайно).

app.UseStaticFiles (new StaticFileOptions {FileProvider = new PhysicalFileProvider (Path.Combine (env.ContentRootPath, "node_modules")), RequestPath = "/ node_modules"});

Цей виклик конфигурирует доступність статичних файлів з папки / node_modules. Тобто якщо на сервер буде надіслано запит типу /node_modules/zone.js то сервер буде шукати статичний файл в папці / node_modules а не в папці / wwwroot / node_modules (як це включається за замовчуванням).
Крім того, не забудьте додати ці рядки на початку файлу:

using Microsoft.Extensions.FileProviders; using System.IO;

Ці простору імен потрібні для PhysicalFileProvider і Path класів.
Далі нам потрібно відредагувати файл index.html

Замінимо цей рядок коду

System.import ( 'main.js'). Catch (function (err) {console.error (err);});

На цю:

System.import ( 'app / main.js'). Catch (function (err) {console.error (err);});

Так як ми перемістили файл main.ts з кореневої папки в папку / app то потрібно просто відредагувати шлях до цього фалу.
Тепер можна зберегти всі файли і запустити проект. Після запуску ви повинні побачити сторінку index.html (так як після наших маніпуляцій в файлі Startup.cs файл /wwwroot/index.html виграє у шляху за замовчуванням). І на цій сторінці вже повинен працювати Angular! Саме він пише текст Hello Angular!

Нарешті працюють Angular Quickstart Application

Вихідний код

Тут можна завантажити архів з Visual Studio 2017 проектом ASP.NET MVC Core + Angular SPA

Всі частини серії

Single Page Application: ASP.NET MVC .NET Core + Angular 4. Частина 1 [читаєте зараз].
Single Page Application: ASP.NET MVC .NET Core + Angular 4. Частина 2.
Single Page Application: ASP.NET MVC .NET Core + Angular 4. Частина 3.
Single Page Application: ASP.NET MVC .NET Core + Angular 4. Частина 4.
Single Page Application: ASP.NET MVC .NET Core + Angular 4. Частина 5.
Single Page Application: ASP.NET MVC .NET Core 2 + Angular 5. Частина 6.