Как реализовать внедрение Angular.js зависимостей в существующий проект?

Question

[ErickSkrauch]

Здравствуйте. Имеется уже написанный и действующий проект. Он использует для подгрузки контента Ajax и библиотеки, которые я сам написал.

UI построен таким образом (особенно в тех модулях, что сейчас в разработке), что приходится очень много быдлокода изобретать на jQuery. И вот вдруг я узнал о чудо-фреймворке Angular.js, с его связыванием данных.

И вот тут у меня возникла проблема: роутинг у меня через pushState(), то есть без этого "#!". Переделать под Angular - да, вариант не плохой, но мне хотелось бы сохранить текущую структуру, ибо смена алгоритма вывода модели - это большие временные затраты (я пишу один). Однако мне всё же очень хотелось бы заиметь Angular.js у себя на вооружении.

Глянуть как это работает можно у меня в профиле на сайте.

В общем помогите, я не знаю как такое прогуглить.

Answer 1

[lega]

Посмотрите на Angular Light, для встраивания в готовую "структуру" он может быть удобней.

Comments

[ErickSkrauch]

Попробовал. В принципе вообще идеальное решение - там есть связываниеданных на элементе (то есть я сделал после загрузки страницы пересвязку данных). Буду писать :)

Answer 2

[Руслан Лопатин]

AngularJS поддерживает HTML5 History API. Достаточно настроить $locationProvider:
$locationProvider.html5Mode(true);

Answer 3

[Антон]

Как-то в плагине для tinyMce обращался к сервису, созданному через factory вот таким образом:

var AppData = window.parent.angular.element(window.parent.document).injector().get('AppData');

т.е. через injector можно достучаться до ваших angular-сервисов и встроенных функций.

Comments

[ErickSkrauch]

Честно говоря не совсем понял финта ушами. Можете пояснить, зачем такой фокус?

[Антон]

Всякие window.parent - это из-за tinyMce, там страница свойств плагина в отдельном фрейме.
А так такая конструкция позволяет через html-элемент обратиться к angular-модулю и сервисам, объявленным в этом модуле из внешнего js-кода.
т.е. у вас может быть

var app = angular.module('AngApp', ['ui', 'jqyoui']);
app.app.factory('AppData', function ($location, $window, indicatingHttp, ServerControllers) {
...
return {
 doSomeThing : function(){}
}
});
// и т.д.

и вот обратиться к сервису AppData можно через такую конструкцию

.injector().get('AppData').doSomeThing();
<.code>

[ErickSkrauch]

А можно ваш скайп?:)