В това ръководство, бих искал да ви покажа как да конфигурирате приложението ви с ASP.NET Ядро API за Angular2 интерфейс. Вие ще се запознаете с класа Startup в MVC, в зависимост от настройките в Angular2 с NPM, SystemJS конфигурация, компоненти и услуги Angular2, и как да ги свържете заедно.
Проектът, който можете да използвате като шаблон, можете да го намерите в GitHub.
Основна страна на сървъра API ASP.NET ядро
Ще започна с подготовката на нашата страна на сървъра на услуги. За да направите това, отворете Visual Studio и да се създаде един празен уеб проект ASP.NET ядро. След това, вие трябва да получите просто приложение, за да се покаже «Hello World". Нека да го променят, за да отговарят на нашите нужди.
Според Skolkov искаме да използваме MVC за API и служат статични файлове, трябва да добавите следните пакети според project.json файл:
Startup клас
Сега нека да променим нашата Startup клас, и да кажа употреба asp.net MVC:
Както можете да видите, добавих MVC настройка на две места. На първо място, аз добавя MVC услуги, както и в следващите ги изпълните. Освен това добавихме забрана заглавки за кеширане на всички, които ще работят MVC. Аз наричам това предотвратява кеширане API (често срещан проблем в IE).
Сега нека да добавяте index.html файл, който ще бъде домакин Angular2 приложение. Това е просто става чрез добавянето на тази част от кода в метода на конфигурация Startup клас:
Какво прави той? Ако MVC 404 и връща искания пътя няма разширение (HTML, JPG и т.н.), то ще се върне index.htm на файла. Улавя всичко, за да се провери това, въведете в браузъра, например, такива референции:
Той ще служи на първоначалния файл и ъглово приложение ще го вземете от там.
Интерфейс - Angular2 Single Page Application
НРП пакети
В този момент, ние сме готови на сървъра част. Сега нека zaymomsya интерфейс. Да започнем с това, ние трябва да получите всички пакети, които трябва Angular2 на националните ръководители. За да направите това, вие трябва да добавите тези зависимости в package.json файл:
Забележка: нови версии на ъглово, винаги можете да предприемете версия на пакета тук
Така че имаме нужда от още няколко инструменти за развитието на нашата молба:
За да изтеглите всички тези пакети ще трябва да изпълни следната команда:
Вие също трябва да се добави node_modules участие в определянето на нашия index.html файл, така че ние се получи нормална 404, ако искането не е съществуващ файл в node_modules директорията:
Index.html
В този момент, ние сме готови да започнем да изграждаме нашата angular2 приложение. За първата стъпка, нека да създадем index.html файл. на разположение на GitHub Готов файл. Като цяло, файлът се състои от две важни части.
Той съдържа връзки към сценария и основния заглавната
Има две неща, за да се случи. Първата е да импортирате в заглавната systemjs раздел конфигурационен файл. Ние трябва да се върне към този момент, но това е основното място за всички JS модули. Предоставено кода по-долу е да се инициализира нашия чрез внос на главния файл. Тогава ще ни шаблон приложение.
конфигурационен файл SystemJS
По подразбиране, angular2 използва SystemJS зарежда модулите за управление на зависимости. Аз няма да навлизам в подробности, тъй като тя работи, тъй като не е включена в обхвата на тази статия. В този конфигурационен файл съдържа списък с пакети с функции, които показват как да заредите тези пакети:
Инициализация AppModule
Сега е време да се подготви и багажника на нашата молба. Първата задача е да се създаде app.module.ts файл:
Той по същество казва Angularu кой компонент, модул и услугата, която искате да използвате вашата кандидатура.
След това можем да започне нашата молба main.ts файл:
Сега ние сме готови да се създаде AppComponent.ts файл:
Това ще бъде основен компонент на нашата молба. Както можете да видите, този шаблон съдържа само рутер-изход - място, където теглото ви ще бъде представяне на съдържанието. Това заяви, сега ние сме в състояние да създаде някои маршрути в app.routes.ts файл:
В този момент, аз добавих само път към основният компонент, който ще създадем в момента.
Разширяването на нови компоненти на приложения
Ако искате да добавяте нови маршрути, за да можете beduyuschem просто трябва да следвате следните стъпки:
1. Създаване на компонент, например, ProductListComponent
2. обявяване на нов компонент в main.ts файл
3. Добавяне на нов маршрут до app.routes.ts файл
HomeComponent
Ние вече всичко е готово, и е време да се създаде HomeComponent компонента:
Стартирайте приложението!
- преглъщане строителство - изграждане и завършване на цялата
- глътка часовник - сграда и работи наклони, когато промените в никакви файлове в папката ще бъдат Frondend преструктуриране на всички файлове
Аз използвам Gulp да обработва файлове по две причини. На първо място ?? за това много бързо. проследяване на промени в режима - това е страхотно за развитие. Файловете се обработват в рамките на милисекунди, така че когато обновете браузъра, вие винаги ще получите най-новите файлове. Второ, тя позволява по-строг контрол всичко, което трябва да се направи, така че това дава една папка за изходни файлове и други файлове, за да строи.
При създаването на предния край, можете да стартирате приложението в VisualStudio. Ако всичко е наред, трябва да го би довело:
Имаме молба ASP.NET, която обслужва Ядро Angular2 приложение. Следващата стъпка е да се добави Angular2 услуга, която ще получите някои данни от API.
Добавяне на услуга
Най-добрият начин да приложи API - чрез услугата. По този начин ще се създаде модулно приложение и опрости тестване. За да създадете услугата, да създадете файл с име hello.service.ts:
Вие трябва да попълните някои от нещата, които се използват тук:
- @Injectable () ви информира системата в зависимост от това, което ще използвате този клас като зависимост в други класове
- Можете да включите модула в Http-Designer
- Връщайки се от метод наблюдавани
Добавени са няколко неща:
Конструктор, който се HelloService като зависимост
- ngOnInit () - метод, който наблюдава когато компонентът е готов за употреба. В този случай това е просто начин да се поздравят метод.
- поздравят метод - този метод се използва като услуга метод Поздравете HelloService и подписа за получаване на резултата
- Абонамент Метод наблюдава функцията получим, който се извиква, когато резултатът наблюдава готов за употреба. Това е типичен начин за правене на нещата асинхронни - в друг свят, този метод за обратно повикване.
ApiController
За пълнота на работата, ние също трябва прост контролер API в нашата страна на сървъра:
С това, че всички промени, нашата молба да се покаже много фина поздрав:
Мисля, че това ще бъде достатъчно, за тази статия, така че ще завърши. Ако отидете в GitHub. Вие ще бъдете в състояние да видите готовия проект, копирайте го, за да бъде в състояние да си поиграете с него сами по себе си.
Свързани статии