Asp net core angular

Первый проект на ASP.NET Core с Angular

В этом руководстве рассмотрим создание приложения на ASP.NET Core в связке с Angular 8.

Вначале создадим проект на ASP.NET Core, который будет использовать Angular. Для проекта выберем шаблон Empty , то есть пустой шаблон.

Также стоит отметить, что Visual Studio предоставляет шалон Angular , который сразу же позволяет создать проект с некоторой базовой структурой и с уже настроенной конфигурацией на использование Angular. Но в данном случае выберем именно шаблон Empty , чтобы полностью проконтроллировать процесс конфигурации и не создавать ничего лишнего.

По умолчанию новый проект ASP.NET Core не обладает никакой встроенной поддержкой работы с Angular. B вначале добавим в проект новый файл package.json , который представляет шаблон npm Configuration file :

Изменим содержимое этого файла следующим образом:

Здесь определены все необходимые пакеты фреймворка Angular, а также пакеты, которые помогут при разработке, в частности, TypeScript и Webpack.

Сохраним файл, и в проект будут установлены пакеты.

Также добавим в проект файл конфигурации TypeScript tsconfig.json :

После добавления изменим содержимое файла следущим образом:

Далее в проекте определим папку ClientApp , которая будет хранить файлы приложения angular. В этой папке создадим каталог app , в который добавим новый файл app.component.ts :

В файле app.component.ts определим код главного компонента приложения:

Также в папку ClientApp/app добавим новый файл app.module.ts , который будет представлять главный модуль приложения:

Далее в папку ClientApp добавим новый файл main.ts , с которого будет начинатся загрузка приложения:

Кроме собственно загрузки приложения данный файл определяет код для перезапуска приложения с помощью Hot Module при изменениях в файлах с исходным кодом.

И также в папку ClientApp добавим файл polyfills.ts :

И также в корень проекта добавим новый javascript-файл webpack.config.js , который будет определять конфигурацию сборщика Webpack:

Таким образом, все файлы будут компилироваться в две сборки – app.js и polyfills.js, которые будут располагаться в папке wwwroot/dist.

Теперь добавим в проект папку wwwroot , а в эту папку – главную веб-страницу приложения index.html :

В итоге весь проект будет выглядеть следующим образом:

И в конце изменим файл Startup.cs :

С помощью метода app.UseWebpackDevMiddleware() в конвейер обработки запроса добавляется сборка приложения через webpack при запуске приложения. Кроме того, для конфигурации компонента, взаимодействующего с webpack, применяется объект WebpackDevMiddlewareOptions, у которого установлено свойство HotModuleReplacement = true .

И также здесь добавляется поддержка статических файлов по умолчанию, чтобы мы могли напрямую выполнить запрос к файлу index.html.

Если проект делается под версию ASP.NET Core 2.1, то также необходимо изменить метод Main в файле Program.cs – добавить в него вызов AppContext.SetSwitch("System.Net.Http.UseSocketsHttpHandler", false); :

В случае с версиями 2.0 и 2.2 (и другими версиями) подобных измений в методе Main делать не надо.

Обновленный шаблон проекта Angular обеспечивает удобную отправную точку для приложений ASP.NET Core с использованием Angular и Angular CLI для реализации богатого пользовательского интерфейса (UI) на стороне клиента. The updated Angular project template provides a convenient starting point for ASP.NET Core apps using Angular and the Angular CLI to implement a rich, client-side user interface (UI).

Шаблон является эквивалентом созданию проекта ASP.NET Core, выступающего в качестве серверного API, и проекта Angular CLI в качестве пользовательского интерфейса. The template is equivalent to creating an ASP.NET Core project to act as an API backend and an Angular CLI project to act as a UI. В шаблоне предлагается удобное размещения обоих типов проектов в проекте отдельного приложения. The template offers the convenience of hosting both project types in a single app project. Что в свою очередь позволит создать и опубликовать проект приложения как единое целое. Consequently, the app project can be built and published as a single unit.

Создание нового приложения Create a new app

Если установлена ASP.NET Core 2.1, не нужно устанавливать проект шаблона Angular. If you have ASP.NET Core 2.1 installed, there’s no need to install the Angular project template.

Создайте из командной строки новый проект в пустом каталоге с помощью команды dotnet new angular . Create a new project from a command prompt using the command dotnet new angular in an empty directory. Например, следующие команды позволяют создать приложение в каталоге my-new-app и перейти к этому каталогу: For example, the following commands create the app in a my-new-app directory and switch to that directory:

Запустите приложение в Visual Studio или в .NET Core CLI. Run the app from either Visual Studio or the .NET Core CLI:

Читайте также:  C windows inf usb inf

Откройте созданный файл проекта .csproj и запустите в нем приложение в обычном режиме. Open the generated .csproj file, and run the app as normal from there.

В процессе сборки при первом запуске восстанавливаются зависимости npm. Это может занять несколько минут. The build process restores npm dependencies on the first run, which can take several minutes. Последующие сборки выполняются гораздо быстрее. Subsequent builds are much faster.

Убедитесь, что у вас существует переменная среда ASPNETCORE_Environment , которой соответствует значение Development . Ensure you have an environment variable called ASPNETCORE_Environment with a value of Development . Запустите команду SET ASPNETCORE_Environment=Development в ОС Windows (в приглашениях, отличных от PowerShell). On Windows (in non-PowerShell prompts), run SET ASPNETCORE_Environment=Development . А в ОС Linux или macOS запустите команду export ASPNETCORE_Environment=Development . On Linux or macOS, run export ASPNETCORE_Environment=Development .

Чтобы проверить наличие ошибок при создании приложения, запустите команду dotnet-build. Run dotnet build to verify the app builds correctly. При первом запуске процесса создания будут восстановлены зависимости npm, на что может потребоваться несколько минут. On the first run, the build process restores npm dependencies, which can take several minutes. Последующие сборки выполняются гораздо быстрее. Subsequent builds are much faster.

Чтобы запустить приложение, выполните команду dotnet run. Run dotnet run to start the app. Следующее сообщение будет записано в журнал. A message similar to the following is logged:

Перейдите по этому URL-адресу в браузере. Navigate to this URL in a browser.

Приложение запускает экземпляр сервера Angular CLI в фоновом режиме. The app starts up an instance of the Angular CLI server in the background. Следующее сообщение будет записано в журнал. А Live , откройте браузер на http://localhost:&lt компьютере; осерпорт>/ . A message similar to the following is logged: NG Live Development Server is listening on localhost: , open your browser on http://localhost: /. Игнорируйте это сообщение — этот URL-адрес не соответствует объединенному приложению ASP.NET Core и Angular CLI. Ignore this message—it’s not the URL for the combined ASP.NET Core and Angular CLI app.

Шаблон проекта создает приложение ASP.NET Core и приложение Angular. The project template creates an ASP.NET Core app and an Angular app. Приложение ASP.NET Core предназначено для использования в таких сферах как: получение доступа к данным, авторизация и других проблемных вопросах на стороне сервера.Приложение ASP.NET Core предназначено для доступа к данным, авторизации и других задач на стороне сервера. The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. Приложение Angular, размещенное в подкаталоге ClientApp, предназначено для всех задач, связанных с пользовательским интерфейсом. The Angular app, residing in the ClientApp subdirectory, is intended to be used for all UI concerns.

Добавление страниц, изображений, стилей, модулей и т. д. Add pages, images, styles, modules, etc.

Каталог ClientApp содержит стандартное приложение Angular CLI. The ClientApp directory contains a standard Angular CLI app. дополнительные сведения в официальной документации Angular. See the official Angular documentation for more information.

Существуют небольшие различия между приложениями Angular, создаваемыми этим шаблоном и создаваемыми непосредственно Angular CLI (командой ng new ), однако возможности приложений одинаковые. There are slight differences between the Angular app created by this template and the one created by Angular CLI itself (via ng new ); however, the app’s capabilities are unchanged. Приложение, созданное с помощью шаблона, содержит основанный на Bootstrap макет и простой пример маршрутизации. The app created by the template contains a Bootstrap-based layout and a basic routing example.

Выполнение команд ng Run ng commands

В командной строке перейдите в подкаталог ClientApp: In a command prompt, switch to the ClientApp subdirectory:

Если средство ng установлено глобально, вы можете запустить любую из его команд. If you have the ng tool installed globally, you can run any of its commands. Например, можно запустить ng lint , ng test или любую другую команду Angular CLI. For example, you can run ng lint , ng test , or any of the other Angular CLI commands. Выполнять ng serve не требуется, так как приложения ASP.NET Core обслуживают как серверную, так и клиентскую части приложения. There’s no need to run ng serve though, because your ASP.NET Core app deals with serving both server-side and client-side parts of your app. На внутреннем уровне они используют ng serve в процессе разработки. Internally, it uses ng serve in development.

Если у вас не установлено средство ng , запустите вместо него npm run ng . If you don’t have the ng tool installed, run npm run ng instead. Например, можно запустить npm run ng lint или npm run ng test . For example, you can run npm run ng lint or npm run ng test .

Читайте также:  120 Фото кроссвордов ответы на все уровни

Установка пакетов npm Install npm packages

Для установки npm-пакетов сторонних разработчиков используйте в командной строке подкаталог ClientApp. To install third-party npm packages, use a command prompt in the ClientApp subdirectory. Пример: For example:

Публикация и развертывание Publish and deploy

В процессе разработки приложение запускается в режиме, оптимизированном для удобства разработчиков. In development, the app runs in a mode optimized for developer convenience. Например, пакеты JavaScript включают сопоставления с исходным кодом (благодаря чему при отладке вы сможете видеть исходный код TypeScript). For example, JavaScript bundles include source maps (so that when debugging, you can see your original TypeScript code). Приложение следит за изменениями файлов TypeScript, HTML и CSS на диске и при обнаружении изменений автоматически производит перекомпиляцию и перезагрузку страницы. The app watches for TypeScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.

На рабочем этапе используйте версию приложения, оптимизированную для производительности. In production, serve a version of your app that’s optimized for performance. На нее уже настроено автоматическое переключение. This is configured to happen automatically. При публикации конфигурация сборки выдает уменьшенные, предварительно скомпилированные (AoT) сборки клиентского кода. When you publish, the build configuration emits a minified, ahead-of-time (AoT) compiled build of your client-side code. В отличие от сборки разработки, в рабочей сборке не требуется установка Node. js на сервере (если не включена отрисовка на стороне сервера (SSR)). Unlike the development build, the production build doesn’t require Node.js to be installed on the server (unless you have enabled server-side rendering (SSR)).

Запуск "ng serve" отдельно Run "ng serve" independently

Проект настроен запускать свой собственный экземпляр сервера Angular CLI в фоновом режиме, когда приложение ASP.NET Core запускается в режиме разработки. The project is configured to start its own instance of the Angular CLI server in the background when the ASP.NET Core app starts in development mode. Это удобно, так как нет необходимости вручную запускать отдельный сервер. This is convenient because you don’t have to run a separate server manually.

У этой настройки по умолчанию есть недостатки. There’s a drawback to this default setup. Каждый раз при изменении кода на C# и необходимости перезапустить приложение ASP.NET Core также перезагружается и сервер Angular CLI. Each time you modify your C# code and your ASP.NET Core app needs to restart, the Angular CLI server restarts. Перезапуск может занять около 10 секунд. Around 10 seconds is required to start back up. Если вы часто вносите изменения в код C# и не хотите ждать перезапуска сервера Angular CLI, запустите сервер Angular CLI отдельно, независимо от процесса ASP.NET Core. If you’re making frequent C# code edits and don’t want to wait for Angular CLI to restart, run the Angular CLI server externally, independently of the ASP.NET Core process. Для этого сделайте следующее: To do so:

В командной строке перейдите в подкаталог ClientApp и запустите сервер разработки Angular CLI следующей командой: In a command prompt, switch to the ClientApp subdirectory, and launch the Angular CLI development server:

Используйте npm start , а не ng serve для запуска сервера разработки Angular CLI, в результате чего будет учитываться конфигурация в файле package.json. Use npm start to launch the Angular CLI development server, not ng serve , so that the configuration in package.json is respected. Чтобы передать серверу Angular CLI дополнительные параметры, добавьте их в package.json в нужную строку scripts . To pass additional parameters to the Angular CLI server, add them to the relevant scripts line in your package.json file.

Измените свои приложения ASP.NET Core так, чтобы они использовали внешний экземпляр сервера Angular CLI, а не запускали собственный. Modify your ASP.NET Core app to use the external Angular CLI instance instead of launching one of its own. В вашем классе Startup замените вызов spa.UseAngularCliServer на следующий: In your Startup class, replace the spa.UseAngularCliServer invocation with the following:

При запуске приложения ASP.NET Core экземпляр сервера Angular CLI запускаться не будет. When you start your ASP.NET Core app, it won’t launch an Angular CLI server. Вместо него будет использоваться экземпляр, запускаемый вручную. The instance you started manually is used instead. Это ускорит запуск и перезагрузку. This enables it to start and restart faster. Теперь не придется каждый раз дожидаться повторной сборки клиентского приложения в Angular CLI. It’s no longer waiting for Angular CLI to rebuild your client app each time.

Передача данных от .NET к TypeScript Pass data from .NET code into TypeScript code

Во время работы SSR может возникнуть необходимость передать данные отдельных запросов из ASP.NET Core в Angular. During SSR, you might want to pass per-request data from your ASP.NET Core app into your Angular app. Например, можно передать сведения из файла cookie или данные, полученные из базы данных. For example, you could pass cookie information or something read from a database. Чтобы это сделать, необходимо внести изменения в класс Startup. To do this, edit your Startup class. В обратном вызове UseSpaPrerendering для options.SupplyData установите указанное ниже значение. In the callback for UseSpaPrerendering , set a value for options.SupplyData such as the following:

Читайте также:  В ядре этой прошивки поломан вызов ptrace

С помощью обратного вызова SupplyData можно передавать произвольные данные, отдельные запросы, а также JSON-сериализируемые данные (например, строки, логические значения или числа). The SupplyData callback lets you pass arbitrary, per-request, JSON-serializable data (for example, strings, booleans, or numbers). Для кода в файле main.server.ts эти данные будут получены в качестве params.data . Your main.server.ts code receives this as params.data . Например, в предыдущем примере кода логическое значение передается как params.data.isHttpsRequest в обратный вызов createServerRenderer . For example, the preceding code sample passes a boolean value as params.data.isHttpsRequest into the createServerRenderer callback. Также эти данные можно передавать другим частям приложения любым способом, поддерживаемым Angular. You can pass this to other parts of your app in any way supported by Angular. Например, ознакомьтесь с тем, как main.server.ts передает значения BASE_URL любому компоненту, конструктор которого объявлен получателем. For example, see how main.server.ts passes the BASE_URL value to any component whose constructor is declared to receive it.

Недостатки SSR Drawbacks of SSR

Не все приложения получают преимущество от использования SSR. Not all apps benefit from SSR. Основное преимущество — воспринимаемая производительность. The primary benefit is perceived performance. При использовании вашего приложения посетители, у которых низкая скорость сетевого подключения или медленные мобильные устройства, быстро обнаруживают первоначальный пользовательский интерфейс, даже если для получения или анализа пакетов JavaScript требуется некоторое время. Visitors reaching your app over a slow network connection or on slow mobile devices see the initial UI quickly, even if it takes a while to fetch or parse the JavaScript bundles. Тем не менее в основном многие одностраничные приложения (SPA) используются в быстрых внутренних сетях компании на быстрых компьютерах, где приложение появляется почти мгновенно. However, many SPAs are mainly used over fast, internal company networks on fast computers where the app appears almost instantly.

В тоже время при использовании SSR существует ряд недостатков. At the same time, there are significant drawbacks to enabling SSR. В процесс разработки вносится дополнительная сложность. It adds complexity to your development process. Код должен быть запущен в двух разных средах как на стороне клиента, так и на стороне сервера (в среде Node.js, вызываемой из ASP.NET Core). Your code must run in two different environments: client-side and server-side (in a Node.js environment invoked from ASP.NET Core). Ниже приведены некоторые аспекты, которые необходимо учитывать. Here are some things to bear in mind:

Для SSR необходимо, чтобы на рабочих серверах был установлен Node.js. SSR requires a Node.js installation on your production servers. В некоторых сценариях это происходит автоматически (например, службы приложений Azure), а в других — нет (например, Azure Service Fabric). This is automatically the case for some deployment scenarios, such as Azure App Services, but not for others, such as Azure Service Fabric.

Установка флага сборки BuildServerSideRenderer приведет к публикации каталога node_modules. Enabling the BuildServerSideRenderer build flag causes your node_modules directory to publish. В этой папке находятся более 20 000 файлов, что повлечет за собой увеличение времени развертывания. This folder contains 20,000+ files, which increases deployment time.

чисто мое субъективное мнение основаное на работе как с шарпом, так и с джавой/питоном/нодой в качестве основных языков на проекте. Там где питон/нода даст возможность подпереть код костылем, шарп/джава треснет по лбу и заставит посидеть за рефакторингом.

да и вообще, сама структура неткоровского проекта (как и все бест практис) подталкивают чтоб писать правильно. Тут и DI c коробки, и возможность запаковать одним кликом все в докер, и EF который умеет с коробки делать миграции и т.д. Это все сильно облегчает жизнь если уметь им пользоватся, но повышает порог входа чтоб начать это все использовать. А потом оказывается что DI заставляет сразу продумывать архитектуру и делать все модульно, code-first миграции превращается в адскую боль после того как появились живие данные, докер не хочет собиратся на сервере с дженкинсом а дебаг .нетовского сервиса который на проде крутится под линуксом заставляет сидеть и разбирать дампы ядра. И в итоге проект на полгода растянулся на минимум на 7-8 месяцев. Либо в итоге в таком жутком состоянии что смысла использовать дотнет небыло.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector