В этом руководстве вы узнаете, как создать приложение ASP.NET Core с помощью Kendo UI для Angular с нуля.

Обновление: в Релиз Telerik и Kendo UI от R1 2018 мы включили шаблон, который по сути заменяет все, что описано в этом посте, одним щелчком мыши! Обязательно ознакомьтесь с нашим Kendo UI для шаблонов проектов Angular в Visual Studio Marketplace и создайте новый шаблон проекта для Kendo UI для Angular с помощью ASP.NET Core сегодня!

Использование передовых технологий означает преодоление начальной кривой обучения. Часто мы хотели бы просто начать работу, не начиная с нуля. Но, как мы все знаем, лучшие блюда - это те, которые хорошо приготовлены, и слишком быстрое вмешательство в дела приводит к тому, что кого-то заболевает или бросает всю еду в мусор.

В этой статье мы найдем золотую середину - мы рассмотрим, как начать работу с Angular с помощью ASP.NET Core, следуя простому рецепту с четко определенными ингредиентами. Мы начнем с рассмотрения всех ингредиентов, необходимых для успешного проекта. Далее мы будем следовать рецепту и узнаем, где подходит каждый ингредиент. Наконец, приложение будет полностью запечено и готово к подаче со всеми его передовыми качествами.

Ингредиенты

Подготовка ингредиентов - самая важная часть любого рецепта. Давайте посмотрим, что нам нужно, чтобы добиться успеха, и почему каждый элемент важен для нашего проекта.

ASP.NET Core

ASP.NET Core 1.1 - это архитектура следующего поколения для создания масштабируемых веб-приложений .NET, работающих на любой платформе. Веб-API был объединен с MVC в ASP.NET Core, что сделало его отличной платформой для размещения конечных точек для данных нашего приложения.

ASP.NET Core будет выступать в качестве серверного компонента для приложения. В обязанности ASP.NET Core входит обеспечение основной бизнес-логики, взаимодействие с базой данных и предоставление таких сервисов приложений, как электронная почта, аутентификация и SMS, и многие другие.

Диспетчер пакетов узлов (npm)

Многие ингредиенты для этого приложения будут созданы сообществом JavaScript. Все зависимости, необходимые для разработки внешнего интерфейса, легко управляются с помощью npm либо из интерфейса командной строки (CLI), либо из Visual Studio.

Угловой, TypeScript и Webpack

ASP.NET Core может самостоятельно генерировать HTML для клиентской части приложения, но с добавлением Angular мы можем сделать гораздо больше. Angular позволяет нам создавать многофункциональные интерактивные клиентские приложения с использованием компонентной архитектуры.

Использование Angular требует дополнительных инструментов, поскольку он сильно зависит от TypeScript. Для поддержки Angular мы будем использовать Webpack для компиляции TypeScript, а также для объединения и минимизации статических ресурсов.

dotnet CLI

Обычно можно ожидать использования шаблона Visual Studio «Файл› Новый проект », чтобы начать новый проект. Однако из-за кроссплатформенности разработки ASP.NET Core мы будем использовать dotnet CLI, инструмент командной строки, используемый для создания шаблонов проектов .NET. Поскольку командная строка используется повсеместно, она подходит для разработки ASP.NET Core, поскольку ее можно использовать где угодно.

Kendo UI для Angular

Как сказал бы вам любой великий повар, презентация имеет значение. Мы воспользуемся Kendo UI for Angular, чтобы завершить внешний вид приложения. Благодаря красивым элементам управления пользовательского интерфейса Kendo UI для Angular предоставляет высокопроизводительные компоненты пользовательского интерфейса Angular без каких-либо зависимостей от jQuery.

Подготовка к работе

Начнем с того, что сложим все наши ингредиенты. Некоторая быстрая подготовительная работа поможет нам избежать любых зависаний. Это очень важно, так как последнее, что вы хотите сделать, - это тратить часы драгоценного времени на устранение проблем, которые уже были решены с помощью более новых версий.

Перед тем, как приступить к следующему проекту, убедитесь, что следующие инструменты установлены и у вас установлена ​​последняя версия. Вы можете найти все необходимое ниже:

Рецепт

Начнем с установки Microsoft ASP.NET Core JavaScript Services. Службы JavaScript - это набор технологий для разработчиков ASP.NET Core, созданный командой ASP.NET. Он предоставляет инфраструктуру, которая вам пригодится, если вы используете Angular / React / Knockout / и т. Д. на клиенте, если вы создаете свои клиентские ресурсы с помощью Webpack, или если вы иным образом хотите выполнять JavaScript на сервере во время выполнения. Мы будем использовать шаблон проекта служб JavaScript, установленный с помощью интерфейса командной строки dotnet. Шаблон позаботится о зависимостях Angular, TypeScript и Webpack за нас.

Из командной строки установите шаблоны служб JavaScript:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Затем запустите команду dotnet new angular - с помощью параметра angular будет указан шаблон Angular. Шаблон создаст полноценную отправную точку для вашего нового приложения. После запуска шаблона зависимости необходимо будет восстановить, запустив dotnet restore. После восстановления зависимостей вы можете запустить новую отдельную страницу ASP.NET Core из Visual Studio или из командной строки, вызвав dotnet run.

Переход к приложению в нашем браузере показывает нам шаблон в действии.

Шаблон

В шаблоне служб JavaScript предварительно настроены Angular, TypeScript и Webpack. Серверная часть приложения работает на ASP.NET Core, при этом Angular берет на себя почти все обязанности на стороне клиента. Вы очень мало заметите в виде Views или .cshtml.

Исходные файлы клиентского приложения находятся в каталоге ClientApp. Каждая папка в ClientApp содержит части одного компонента, шаблон (.html), логику компонента, написанную на TypeScript (.ts), и, необязательно, стили компонентов (.css). Эти файлы будут скомпилированы Webpack перед запуском. Файлы конфигурации Webpack включены в шаблон. Эти файлы конфигурации определяют компиляцию, объединение и развертывание в wwwroot.

В ClientApp несколько примеров компонентов демонстрируют, как использовать Angular. Счетчик - это компонент, который показывает, как подключить кнопку, увеличивающую счетчик. Также включен компонент выборки данных, этот компонент показывает, как использовать данные из конечной точки API.

Время выпекать

Когда строительные леса проекта готовы, давайте изменим некоторые компоненты. Работа с компонентами познакомит нас со структурой приложения и рабочим процессом инструментов. Мы добавим надежные компоненты пользовательского интерфейса с помощью Kendo UI для Angular к существующим компонентам приложения.

Во-первых, Kendo UI лучше всего работает с последней версией Angular, поэтому давайте обновим наши ссылки на Angular:

npm install --save @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest

Затем мы добавим в проект зависимости Kendo UI. Пользовательский интерфейс Kendo для Angular упакован и распространяется как набор дискретных пакетов npm с ограниченной областью видимости, которые доступны в npm.

Пришло время добавить в проект компоненты пользовательского интерфейса Kendo. Мы добавим компоненты Kendo UI Button и Grid из командной строки с помощью npm.

npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations

npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @angular/animations

Затем мы импортируем директивы компонентов в наш исходный код. Поскольку пользовательский интерфейс Kendo для Angular использует предварительную компиляцию (AoT), мы объявим модули в общем модуле приложения. Откройте ClientApp/App/app.module.shared.ts и добавьте следующие объявления:

...;

import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { GridModule } from '@progress/kendo-angular-grid';

imports: [

ButtonsModule,

GridModule, ...,

Kendo UI был бы неполным без красивого стиля. Давайте добавим тему Kendo UI по умолчанию в наш проект через npm.

npm install -S @progress/[email protected]

Пакет npm развертывается в нашей папке node_modules, однако нам понадобится файл CSS, на который есть ссылка в нашем проекте. Для этого мы добавим ссылку в webpack.vendor.config.js на CSS, который требуется нашему приложению. Webpack предварительно настроен для объединения файлов CSS в один файл vendor.css, который выводится в папку wwwroot для развертывания.

entry: { vendor: [ ..., '@progress/kendo-theme-default/dist/all.css',

После добавления ссылки нам нужно будет запустить Webpack, чтобы пересобрать vendor.css.

В package.json мы добавим команду Webpack для восстановления зависимостей от поставщика для приложения.

"scripts": {

"test": "karma start ClientApp/test/karma.conf.js",

"webpack:vendor": "webpack --config webpack.config.vendor.js",

...

Чтобы запустить сценарий из npm, выполните npm run webpack:vendor из командной строки.

Теперь, когда установлен Kendo UI для Angular, давайте заменим несколько компонентов, которые являются частью примеров. Одним из преимуществ Kendo UI является то, что одна тема управляет стилем всех компонентов Kendo UI, даже простых элементов управления, таких как кнопка. Давайте изменим образец, чтобы использовать кнопку пользовательского интерфейса Kendo.

В ClientApp/app/components/counter/counter.component.html вы найдете кнопку, которая увеличивает счетчик. Замените стандартную кнопку на кнопку пользовательского интерфейса Kendo.

<button kendoButton (click)="incrementCounter()" [primary]="true">Increment KUI</button>

Затем мы изменим образец выборки данных, используя сетку пользовательского интерфейса Kendo. Поскольку у Kendo UI есть надежные возможности привязки данных, это будет простой задачей. В ClientApp/app/components/fetchdata/fetchdata.component.html таблица была явно определена с использованием шаблонов Angular.

<table class='table' *ngIf="forecasts">

<thead>

<tr>

<th>Date</th>

<th>Temp. (C)</th>

<th>Temp. (F)</th>

<th>Summary</th>

</tr>

</thead>

<tbody>

<tr *ngFor="let forecast of forecasts">

<td>{{ forecast.dateFormatted }}</td>

<td>{{ forecast.temperatureC }}</td>

<td>{{ forecast.temperatureF }}</td>

<td>{{ forecast.summary }}</td>

</tr>

</tbody>

</table>

Мы можем заменить весь шаблон одним компонентом сетки кендо. Как минимум мы можем привязать свойство данных, и сетка будет генерировать столбцы и заголовки.

<kendo-grid [data]="forecasts"></kendo-grid>

Для дальнейшего улучшения пользовательского интерфейса мы можем настроить каждый столбец.

<kendo-grid [data]="forecasts">

<kendo-grid-column field="dateFormatted" title="Date"></kendo-grid-column>

<kendo-grid-column field="temperatureC" title="Temp. (C)"width="150"></kendo-grid-column>

<kendo-grid-column field="temperatureF" title="Temp. (F)"width="150">

</kendo-grid-column> <kendo-grid-column field="summary"title="Summary"></kendo-grid-column>

</kendo-grid>

Время служить

Шаблон командной строки dotnet служб JavaScript ASP.NET Core в сочетании с пользовательским интерфейсом Kendo для Angular обеспечивают надежную платформу для создания современных веб-приложений. Использование генератора служб JavaScript позволяет быстро запустить новый проект Angular. В нем есть все необходимое для разработки на стороне клиента и сервера, а также отличные образцы для начала работы. Растущая библиотека Kendo UI для компонентов Angular с такими функциями мирового класса, как привязка данных, интернационализация и темы, делает полноценный курс готовым к употреблению. Завершенный стартовый проект можно посмотреть на GitHub. Помните, что для восстановления зависимостей этому приложению требуется реестр Progress NPM с определенной областью действия.

Примечание редактора: этот пост был первоначально опубликован в ноябре 2016 года и был обновлен для обеспечения полноты и точности.

Этот контент изначально появился в блоге Progress Telerik Эдом Шарбено в ноябре 2016 года и был обновлен для обеспечения полноты и точности. Хотите узнать больше о технологиях и создании бизнес-приложений завтрашнего дня? Загляните в блог, чтобы узнать больше.