AngularJS только для одностраничных приложений (SPA)?


201

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

Это Node.js проект. Наш первоначальный план состоял в том, чтобы использовать Express и идти по этому пути, но мы решили, что, прежде чем мы начнем этот этап, возможно, было бы лучше рассмотреть, что там. В нашем приложении есть несколько областей, которые, по нашему мнению, не соответствуют одностраничной модели, поскольку они связаны с точки зрения приложения, но не с точки зрения представления.

Мы видели несколько платформ, которые мы могли бы использовать для создания клиента, таких как Backbone.js , Meteor и т. Д., А также AngularJS.

Это может быть довольно очевидным вопросом, но мы не можем расшифровать, если AngularJS предназначен исключительно для одностраничных приложений или может использоваться для многостраничных приложений, таких как, например, Express.


ОБНОВЛЕНИЕ 17 июля 2013 г. Просто чтобы держать людей в курсе, я буду обновлять этот вопрос по мере прохождения процесса. Сейчас мы собираемся все строить вместе и увидим, насколько хорошо это работает. Мы обратились к нескольким людям, которые более квалифицированы в AngularJS, чем мы, и поставили вопрос о разделении более крупных приложений, которые имеют общий контекст, но могут быть слишком большими, работая на одной странице.

Было решено, что мы сможем обслуживать несколько статических страниц и создавать приложения AngularJS, которые работают только с этими страницами, эффективно создавая набор SPA и связывая эти приложения вместе, используя стандартные ссылки. Теперь наш вариант использования очень специфичен, так как в нашем решении есть несколько приложений, и, как я уже сказал, мы сначала попробуем единую кодовую базу и оттуда оптимизируем.

ОБНОВЛЕНИЕ 18 июня 2016 года Проект упал с обрыва, поэтому мы так и не успели сделать слишком много. Недавно мы снова подняли его, но уже не используем angular и вместо этого используем React. Мы по-прежнему используем архитектуру, описанную в предыдущем обновлении, где мы используем экспресс и автономные приложения, поэтому, например, у нас есть /chatмаршрут в экспрессе, который обслуживает наше приложение чата React, у нас есть другой маршрут, /projectsкоторый обслуживает приложение проектов и скоро. То, как мы смотрим на это, заключается в том, что каждое приложение является совокупным корнем с точки зрения своего набора функций, оно должно быть в состоянии автономно, чтобы его можно было считать приложением само по себе. Технически, вся информация существует, это просто базовый экспресс и все, что вы хотите использовать, на стороне клиента.


5
Так как все прошло? Я пытаюсь выяснить, как переместить 50-страничное приложение ASP.NET в чистое приложение HTML + Javascript + REST, и я действительно не понимаю, как это будет работать в качестве SPA.
Грег

1
Мы должны были перейти на что-то еще. Из обсуждений, которые у нас были и будут снова, когда это начнется снова, это то, что SPA может быть очень сфокусированным винтиком в гораздо большей машине. Так что, переводя наш экземпляр на ваш (мы использовали чистый узел с экспрессом), если вы хотите остаться в семейном стеке (.Net), вы можете использовать MVC в качестве вашего скаффолда и использовать угловые в представлениях для добавления динамического материала (каждой функции). , если вы не можете сжать свое приложение, реализация 50 страниц логики на одной странице может затопить.
Модика

1
Что делает, так это делает каждый раздел (то есть пользователей, новости, продукты и т. Д.) Отдельным SPA, но вместе они образуют ваше приложение.
Модика

1
Отлично, спасибо. Есть ли какое-то конкретное кодирование, которое нужно сделать, чтобы связать разные SPA? Или просто обычные ссылки?
Грег,

1
@ Грег, насколько нам известно, поскольку они по сути являются приложениями со своими собственными правыми стандартными ссылками, они будут работать, очевидно, что это, вероятно, не будет прямым шагом вперед, и для сохранения потребуется некоторая форма персистентности (куки, локальное хранилище) общедоступная информация, такая как, может быть, личность или профиль, если приложение находится за какой-либо формой входа в систему. Наши приложения будут тесно связаны с нашим API, и поскольку мы создаем надежное приложение, мы используем oauth для защиты каждого запроса, я думаю, что Trello делает что-то подобное, но я могу ошибаться.
Модика

Ответы:


216

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

У вас есть большой список функций, которые принесут пользу вам вне маршрутизации на стороне клиента:

  • двусторонняя привязка
  • шаблонный
  • форматирование валюты
  • плюрализация
  • многоразовые средства управления
  • RESTful API-интерфейс
  • Обработка AJAX
  • модульность
  • внедрение зависимости

Безумно думать, что все это «может быть использовано только в одностраничном приложении». Конечно нет .. это все равно что сказать "Jquery только для проектов с анимацией".

Если он подходит вашему проекту, используйте его.


42
Еще один момент, о котором следует упомянуть, это то, что Angular даже не нужно использовать для полных страниц - его можно интегрировать в существующую систему для создания компонентов, то есть сложного виджета или плагина внутри унаследованного приложения.
Алекс Осборн

2
@Blesh, спасибо за ответ, это имеет смысл, но мы пытаемся найти «как», мы используем его для создания многостраничных приложений, поэтому вопрос был опубликован, это действительно другой вопрос, так что ваш ответ был принято, но, например, можем ли мы использовать angular.js с express.js или что-то в этом роде - пустая трата времени и лишних сложностей.
Модика

Угловой с Экспрессом почти идеален! Это действительно очень легко создать RESTful API с Express, который вы можете использовать в своих приложениях Angular. Google NodeJS Express RESTful API и службы $ resource и $ http Angular. После этого просто начните создавать прототипы и играть с ним. Я думаю, вы, возможно, обнаружите, что вы слишком много думаете или беспокоитесь о «КАК», когда увидите, как хорошо они работают вместе.
Бен Леш

@Blesh, прости, что вернулся поздно. У нас уже есть REST / Hypermedia API, созданный с использованием Restify, я думаю, нам нужно найти удобный способ как-то связать отдельные «приложения», созданные вместе, рассмотрим это и, возможно, обновим вопрос в какой-то момент.
Модика

@Modika Удалось ли вам найти какие-либо хорошие ресурсы или у вас были хорошие идеи для многостраничных приложений?
dre

16

Сначала я тоже боролся с «как» с Angular. Затем однажды меня осенило: «Это по-прежнему JavaScript». Есть множество примеров на входах и выходах в Angular (один из моих любимых вместе с книгой https://github.com/angular-app/angular-app ). Самая важная вещь, которую нужно помнить, это загружать файлы js, как в любом другом проекте. Все, что вам нужно сделать, это убедиться, что разные страницы ссылаются на правильный объект Angular (контроллер, представление и т. Д.), И вы выключены и работаете. Я надеюсь, что это имеет смысл, но ответ был настолько прост, что я упустил его.


6

Может, мой опыт кому-нибудь пригодится. Мы логически разделили наш проект. Один SPA мы используем для фида, другой для работы с картой, другой для редактирования профиля пользователя и т. Д. Например, у нас есть три приложения: фид, пользователь и карта. Я использую это в разделенных URL, как это:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

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

Действительно, вы можете очень легко создать смесь приложений SPA, например, канал будет URL-адресом с приложением angularjs, пользовательское приложение сactj и отображаться в приложении backbone.js.

В ответ на ваш вопрос:

Angular не только для SPA, Angular хорошо и быстро работают для приложений SPA, но никто не мешает создавать приложения MPA из множества приложений SPA. Но думая о своей архитектуре URL, не забывайте о доступности ваших приложений в SEO.

Я также поддерживаю идею:

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


3

Если все, что вам нужно, это несколько страниц с привязкой данных клиента, я бы пошел с Knockout и Javascript Namespacing.

Knockout отлично подходит, особенно если вам нужна несложная обратная совместимость и достаточно прямые страницы. Если вы используете сторонние компоненты, пользовательские привязки Knockout просты и с ними легко работать.

Пространство имен Javascript позволяет вам хранить код отдельно и управлять им.

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

И в теге скрипта после загрузки других ваших скриптов

<script>
    myCo.init();
</script>

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

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


1

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

Vue.js использует двустороннюю привязку данных, MVVM, повторно используемые компоненты, простой и быстрый выбор, меньше кода для записи и т. Д. Он сочетает в себе некоторые из лучших возможностей Angular и React.

Aurelia.io , если честно, я не знаю много о. Но я заглянул туда, и мне кажется, что стоит поискать альтернативу, похожую на вышеприведенную.

Ссылки:
https://vuejs.org/
http://aurelia.io/

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.