Поєднання Angular та ASP.NET MVC / Web api?


87

Я походжу із використання ASP.NET MVC / Web API, і зараз я починаю використовувати Angular, але мені незрозуміло, як правильно їх змішувати.

Як тільки я використовую Angular, чи побічні концепції MVC все ще надають якесь значення? Або я повинен строго використовувати веб-API виключно для отримання даних для кутових викликів HTTP?

Будь-які поради, які ви маєте щодо хлопця ASP.NET MVC, який переходить на Angular, були б корисними


4
Це залежало б, але я вважаю, що "якщо я строго використовую веб-API виключно для отримання даних для кутових викликів HTTP", це правильний спосіб це зробити.
MikeSmithDev

Ось підручник для побудови програми Angular із серверною базою
Леві Фуллер

Відповіді:


113

Чистий веб-API

Раніше я був досить хардкорним з ASP.NET MVC, але оскільки я познайомився з Angular, я не бачу жодної причини, чому б я використовував будь-яку структуру генерації вмісту на стороні сервера. Pure Angular / REST (WebApi) дає більш багатий і плавний результат. Це набагато швидше і дозволяє створювати веб-сайти, які наближаються до настільних додатків, без будь-яких прикольних хаків.

Angular має трохи кривої навчання, але як тільки ваша команда це засвоїть, ви створите набагато кращі веб-сайти за менший час. В основному це пов’язано з тим, що у вас більше немає усіх цих (менших) проблем.

Наприклад, уявіть форму майстра з будь-якою традиційною структурою на стороні сервера. Кожну сторінку потрібно перевірити та подати окремо. Можливо, вміст сторінки залежить від значень попередньої сторінки. Можливо, користувач натиснув кнопку "Назад" і повторно надсилає попередню форму. Де ми зберігаємо стан клієнта? Всі ці ускладнення не існують при використанні Angular та REST.

Тож ... перейдіть на темну сторону ... у нас є печиво.

Подібне запитання


Я погоджуюсь з тим, що швидкість і плавність розробки програм через Angular У MVC або WebForms (тьфу) ви витрачаєте цей час на те, щоб виплюнути розмітку, а потім доведеться зробити кілька проходів, закріпивши на ньому код клієнта, що здається дивним, трудомістким, і через відключений характер витрачає багато часу, роблячи прості речі.
moribvndvs

3
@Narayana; Це забезпечує певну любов до SEO.
нуль

5
Оскільки, коли я перейменовую властивість на певній моделі, мені не доводиться копати AngularJS для "магічних рядків"? Angular - це приємно, але в суворому безпечному світі .net, більш щільна інтеграція дозволяє використовувати безпеку типу з боку сервера.
Sleeper Smith

6
@ Sleeper Smith: Я неодноразово мав таку суперечку з людьми з моєї команди, але в кінцевому підсумку правила коду , тестування модулів та розділення проблем пропонують набагато більше, ніж усі типи безпеки у світі. Я теж хотів би бачити, щоб JS замінили чимось на кшталт C # , але насправді це просто не так. Важливим є лише результат, якого ви можете досягти. Вашим клієнтам, напевно, байдуже до ваших уподобань щодо кодування, вони хочуть приємний на вигляд, гладкий веб-сайт, і вони хочуть це швидко. Angular виконує цю роботу.
нуль

1
Наприклад, під час використання KnockoutJS я створював звичайну програму ASP.NET MVC, і кожен вигляд отримував дані моделі від контролера MVC. Потім ці дані із сервера будуть серіалізовані в JSON, а звідти KnockoutJS перетворить їх у спостережувані дані, тому я отримаю двостороннє прив'язку даних. І це було чудово! Але що ми робимо зараз, оскільки AngularJS має власну систему маршрутизації? Що відбувається з маршрутизацією MVC? Чи використовуємо ми це взагалі? Що відбувається зараз з переглядом "_Layout" та @RenderBody ()?
AlexRebula

43

AngularJS більше пов'язаний з парадигмою додатків на одній сторінці, і як такий не отримує великої вигоди від серверних технологій, які відображають розмітку. Не існує жодної технічної причини, яка заважає вам використовувати їх разом, але на практиці, чому б ви?

SPA отримує необхідні йому ресурси (подання JS, CSS та HTML) та працює самостійно, передаючи дані службам для надсилання або отримання даних. Отже, серверна технологія все ще необхідна для надання цих послуг (а також інших засобів, таких як автентифікація та подібні), але частини рендерингу в основному не мають значення і не особливо корисні, оскільки це дублювання зусиль, за винятком того, що MVC це робить на стороні сервера, а Angular робить це на клієнті. Якщо ви використовуєте Angular, ви хочете, щоб це було на клієнті для досягнення найкращих результатів. Ви можете створювати Angular post HTML-форми та отримувати часткові перегляди від дій MVC, але ви втрачаєте найкращі та найпростіші функції Angular і ускладнюєте своє життя.

MVC досить гнучкий, і ви можете використовувати його для обслуговування дзвінків із програми SPA. Однак WebAPI більш тонко налаштований і дещо простіший у використанні для таких служб.

Я написав ряд програм AngularJS, включаючи пару, яка перейшла з вже існуючих програм WebForms та MVC, і аспект ASP.NET розвивається до платформи для доставки програми AngularJS як власне клієнта та для розміщення рівня додатків. клієнт спілкується через REST (за допомогою WebAPI). MVC - це прекрасний фреймворк, але він зазвичай опиняється без роботи в таких видах програм.

Додаток ASP.NET стає іншим рівнем інфраструктури, де його обов'язки обмежені:

  • Розмістіть контейнер залежностей.
  • Підключіть реалізації бізнес-логіки до контейнера.
  • Налаштуйте пакети активів для JS та CSS.
  • Розміщувати послуги WebAPI.
  • Забезпечте безпеку, виконуйте журналювання та діагностику.
  • Взаємодія з кешами програм для підвищення продуктивності.

Ще одна чудова річ про СПА - це те, що це може збільшити пропускну здатність вашої команди. Одна група може скористатися послугами, тоді як інша розміщує в клієнтському додатку. Оскільки ви можете легко заглушити або висміяти REST-послуги, ви можете мати повністю працюючий клієнтський додаток на макетних послугах і поміняти його на справжні, коли вони закінчать.

Вам доведеться вкладати гроші вперед на Angular, але це приносить великі результати. Оскільки ви вже знайомі з MVC, у вас є детальний опис деяких основних концепцій.


Гаразд, тому я хочу перейти на Angular і мати внутрішній сервер .NET, щоб зберегти свою продуктивність за допомогою API, Entity Framework, безпеки тощо. Чи потрібні моїм сторінкам все ще основна дочірня конфігурація / макет? Що я для цього використовую - WebForms (ні - тоді я отримую viewstate), MVC, веб-сторінки ASP.NET чи щось інше?
Шон

1
Технічно вам не потрібні будь-які серверні сторінки, сторінки макета тощо. Підійде просто прямий HTML. Однак, залежно від розміру та складності вашої програми, вам може знадобитися розбити свою програму Angular на кілька різних за функціональністю програм (і ви можете зв’язувати один додаток з іншим, використовуючи загальну навігаційну систему чи інше). У такому випадку ви можете використовувати сторінку макета, щоб зберегти сухість і послідовність. Крім того, ви, ймовірно, використовуєте набори ресурсів для CSS або скриптів і маєте кореневі сторінки, які є Razor, або що-небудь, що добре поєднало б ці речі.
moribvndvs

1
Я вже три роки використовую ASP.NET MVC щонайменше у 8 великих проектах, і я звик до цієї прекрасної, зрілої серверної основи. Однак я знаю важливість SPA, і я обожнюю Angular, тому я вирішив зараз піти на міні SPA або гібридні програми ... або "силоси SPA", як їх називав Мігель Кастро. Моє запитання - А як щодо авторизації та автентифікації? Я знаю, що ASP.NET MVC значно полегшує це завдання. Як це робиться без ASP.NET MVC?
AlexRebula

1
@AlexRebula Я думаю, що питання полягає більше в питанні про те, як ви хочете зробити автентифікацію в WebApi проти MVC. Зазвичай це з файлами cookie (ви навіть можете використовувати файли cookie FormsAuth або ASP.NET Identity з WebApi) або заголовками (OAuth тощо). Будь-який із підходів повністю підтримується як веб-API, так і Angular, але вимагає від вас рішення щодо реалізації. Важко дати вам більш точну відповідь без детальної інформації про те, що ви робите, і які ваші конкретні цілі.
moribvndvs

@HackedByChinese Я розумію. І зараз я думаю, що було б дійсно чудово, якби у мене було більше часу, щоб
копатись

6

Це залежить від проекту, над яким ви працюєте.

Якщо angularJS - це щось нове для вас, я б скоріше вибрав невеликий проект з низьким рівнем ризику / тиску, щоб розпочати роботу та забезпечити, щоб ви навчилися робити речі правильно (я бачив багато проектів, в яких Angularjs неправильно використовувався через тиск, терміни ... відсутність часу, щоб засвоїти це належним чином, наприклад, за допомогою JQuery або доступу до DOM всередині контролерів тощо ...).

Якщо проект є зеленим, і у вас є певний досвід роботи з AngularJS, має сенс відмовитися від ASP.net MVC і на стороні сервера перейти до чистого REST / WebAPI.

Якщо це вже існуючий проект, ви можете підібрати складну підмножину функціональних можливостей і побудувати цю сторінку як окрему програму angularJS (наприклад, ваша програма складається з великої групи стандартних простих / середньої складності сторінок на основі Razor, але вам потрібен і вдосконалений редактор / сторінки, яка може бути цільовою частиною для побудови за допомогою AngularJS).


1
Мені подобається ваша відповідь і я згідний у більшості зі сказаного вами. Однак одна річ мене турбує. ASP.NET MVC - це дуже приємний і зрілий серверний фреймворк із чудовими вбудованими функціями, такими як автентифікація та авторизація. Ви писали, що можна відмовитися від ASP.NET MVC, щоб перейти на чистий REST / WebAPI. Тепер я задаюся питанням: Чи так легко виконати автентифікацію та авторизацію, як у ASP.NET MVC? Не кажучи вже про те, як легко впровадити OAuth для Google тощо. Отже, моє запитання полягає в тому, наскільки легко виконати всі ці особливості за допомогою REST / WebAPI. Тож я б розглянув можливість мати міні-SPA.
AlexRebula

У нашому випадку ми встановлюємо маркер у кожному http-запиті (HTTP за замовчуванням додає його в одне місце) використовуємо ASP .net MVC / web api AuthorizeAttribute для перевірки маркера та дозволів, ви також можете всередині методу web api отримати цей маркер і виконати більш досконала перевірка безпеки. Якщо вам потрібен OAuth, на кутовій стороні є бібліотеки, які допоможуть вам у цьому.
Брауліо,

0

Ви можете використовувати Angular framework для розробки інтерфейсу, тобто для побудови поглядів. Він надає вам надійну архітектуру, і як тільки ви дізнаєтесь, ви побачите його переваги в порівнянні з механізмом подання бритви Asp.net MVC. Для отримання даних потрібно використовувати WebAPI, а тепер проект ASP.Net MVC підтримує як контролери WebAPI, так і MVC. Ви можете посилатися на посилання нижче, починаючи з розробки додатків Angular та ASP.Net MVC.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

На даний момент доступні дві основи для розробки компонентів інтерфейсу користувача для кутових програм. Я використав обидва ці фреймворки в одному з кутових проектів, в яких я працював.

Матеріал https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.