Зачем мне использовать Angular? [закрыто]

20

Из базового урока по Angular кажется, что все, что он делает, это извлекает JSON из API и отображает его. Кроме того, есть его двойная магия связывания.

Но зачем мне использовать его вместо серверного решения (такого как Rails), которое создает представление в серверной части и предоставляет его пользователю, когда все уже на месте? Каковы варианты использования?

gberger
источник

Ответы:

26

TLDR;

Angular поможет вам справиться со сложностью, присущей богатым пользовательским интерфейсам. По мере увеличения сложности пользовательского интерфейса традиционная модель генерации страниц на сервере становится все более сложной. Angular позволяет вам разложить ваш пользовательский интерфейс на управляемые блоки и отделить пользовательский интерфейс от реализации. Это значительно упрощает генерацию страниц на стороне сервера, но Angular действительно вступает в свои права, когда вы переходите на приложения, основанные исключительно на javascript. Хорошим примером такого приложения является Trello .

Длинная история

Angular на самом деле не нацелен на сайты, которые вы можете с комфортом внедрить, генерируя все на сервере и отправляя его через. Кроме того, хотя это совершенно хороший подход, который работает для многих сайтов и приложений в Интернете, становится все более и более сложным (и, следовательно, трудным) поддерживать этот подход в рабочем состоянии, когда вы пытаетесь повысить уровень интерактивности на вашем сайте.

В конечном счете, вы решаете эту проблему, толкая свой пользовательский интерфейс все больше и больше в сторону уравнения Javascript. Angular позволяет разбить ваш пользовательский интерфейс на компоненты, обеспечивая четкое разделение между внешним видом и принципом работы. Затем вы можете создавать довольно простые страницы на сервере, а интерфейс JS используется для создания богатого пользовательского интерфейса, который выполняет отдельные обратные вызовы на сервер для получения необходимых данных.

Тем не менее, наступает момент, когда все, что вам нужно, - это сервер заглушки, который загружает полностью основанное на javascript приложение. Вероятно, наиболее известным примером такого варианта использования, где Angular действительно сияет, является Trello (он использует Backbone, а не Angular, но это тот же вариант использования). Есть сайт http://builtwith.angularjs.org/, на котором есть несколько примеров сайтов, использующих Angular.

Итак, короткий ответ? Angular облегчает создание многофункциональных, высокоинтерактивных пользовательских интерфейсов, позволяя вам разбивать ваш пользовательский интерфейс на компоненты и в конечном итоге полностью перейти на JavaScript.

guysherman
источник
3
AngularJ не обеспечивает четкого разделения внешнего вида и логики.
rsman
13
@ RSMAN, это ясно. Весь смысл привязки данных заключается в том, что вы не пишете целую кучу кода для манипуляций с DOM, angular делает это за вас, поэтому вы определяете, как он выглядит, вы определяете, как работают ваши взаимодействия и т. Д., Но вы избегаете необходимость соединить эти два вместе с кодом, который обновляет то, как он выглядит, из кода, который обрабатывает взаимодействия.
boysherman
3
Trello, используемый в примере, не использует Angular blog.fogcreek.com/the-trello-tech-stack
JAMESSTONEco
1
@jamesstoneco действительно, это не так, я просто использовал Trello в качестве примера чисто клиентского JS-приложения. Это было одним из первых, чтобы сделать это хорошо.
boysherman
7

Речь идет о создании более отзывчивых пользовательских интерфейсов. Двойное связывание, внедрение зависимостей и т. Д. Позволяет довольно легко создавать динамические страницы. Вы можете написать директивы на Angular, который дает декларативный способ построения представления.

В качестве примера, в текущем проекте у нас есть представление, которое использует несколько сотен строк кода JavaScript, чтобы обеспечить отзывчивый пользовательский опыт. Несмотря на это, страница немного глючит и ее очень сложно поддерживать. Мы начали искать лучший вариант и посмотрели на backbone.js и knockout.js. В конце концов мы попробовали Angular. Мы смогли создать намного более отзывчивую и поддерживаемую страницу с помощью всего лишь нескольких строк кода. Исчез весь код манипуляций с DOM. Исчезли все неуклюжие бэкэнд-представления, которые нужно было извлечь и вставить в нужных местах. Прошел весь код, который был написан для синхронизации модели и представления. С этим опытом решение переехать в Angular стало легче, и пока мы не пожалели об этом.

Винсент Рамдани
источник
«Ушел весь код манипуляции DOM». Это самая важная вещь на мой взгляд.
согнуло
5

Angular предназначен для разработки одностраничных приложений, он помогает создать прочный каркас для вашего приложения. Это также хорошо с формами, не так хорошо со сложными переполненными пользовательскими интерфейсами с большим количеством данных. Двусторонняя привязка данных поначалу "волшебна", но вы должны знать, что самые последние фреймворки (включая сам Angular 2) отходят от двусторонней привязки данных для более простого подхода потока данных / потока событий (что говорит о том, что история была бы здесь слишком длинной).

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

Тем не менее, ваш вопрос, кажется, больше о том, каковы варианты использования SPA, а не сам Angular.

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

  • Статические файлы, включая ваш index.html
  • API REST, обслуживающий данные
  • Управляемое данными внешнее приложение
Томас Рох
источник