[Перевод] Одностраничная IDE в браузере [AngularJS/Ace]
Про редактор Ace, думаю знают все, а сегодня у нас возникла срочная необходимость прикрутить редактор кода с подсветкой синтаксиса к проекту на AngularJS, наткнулся на этот пост — действительно быстро привязал к проекту. Подумал будет полезно многим новичкам — решил перевести, благо короткий. Заодно добавил пример в jsfiddle.Перевод: Иногда ты сталкиваешься с технологией которая заставит остановиться и задуматься о том как далеко продвинулась веб разработка в последние несколько лет. Для меня одной из таких технологий стал проект Ace. Если Вы незнакомы с ним, Асе, это «высокопроизводительный редактор кода для веба». Он позволяет Вам создавать сайты позволяющие пользователю писать код непосредсвенно в их браузере. LearnAngular широко использует Ace.В этом посте мы рассмотрим как интегрировать редактор Ace в приложение AngularJS с помощью модуля от AngularUI.
Шаг 1 — Получаем компонентыПервое, что мы должны сделать, это получить три необходимые для задачи библиотеки: После сделайте ссылки на эти библиотеки в Вашем приложении следующем порядке: AngularJS Ace ui-ace Шаг 2 — напишите HTML
Верите или нет, это весь HTML который необходимый Вам для интеграции Ace в Ваш сайт. Давайте быстро просмотрим, что мы сделали.Класс editor просто объявляется, для того чтобы мы могли сконфигурировать размер редактора используя чуток CSS, как — мы вскоре увидим.Дериктива ui-ace преобразует наш div в редактор Ace. Здесь мы передаем ему параметры, чтобы задать язык программирования и тему. Ace поддерживает тонну языков и имеет довольно много тем. Лучше потратить немного времени на их изучение для получения полноценного представления о том на сколько действительно проект Ace полнофункционален.В заключении мы добавляем вездесущую дериктиву ng-model так что все, что пользователь набирает в редакторе кода связано с нашей областью Angular $scope.Очевидно, что мы можем также это использовать для того чтобы редактор по умолчанию отображал какой нибудь текст.Шаг 3 — Вставьте директиву «ui-ace» в ваш модуль контроллера angular.module («app», ['ui.ace']) .controller («controller», [»$scope», function ($scope) { $scope.code = «alert ('hello world');»; }]); Шаг 4 — Прикосновение к CSS CSS, который мы собираемся применить к редактору необходим, для задания ему размера и положение на нашей странице. Как уже упоминалось ранее, фактический вид редактора определяется темой. .editor { height: 200 px; } (прим. пер. без этого маленького участка кода редактор вообще не отобразиться — нет высоты по умолчанию)Шаг 5 — Попробуйте его. Вот и все, что нужно делать! Просто несколько строк кода и мы интегрировали чрезвычайно богатый редактор кода в веб-страницу, и можно продолжать и делать все, что мы хотели бы с кодом который пишут наши пользователи. Моё мнение — очень круто! От себя — попробовал, понравилось и добавил ещё ссылку на один редактор оформленные как директива для AngularJSСсылки
