Одностраничная IDE в браузере [AngularJS/Ace]

Автор: admin от 22-07-2014, 17:30, посмотрело: 546

Одностраничная IDE в браузере [AngularJS/Ace]
Про редактор Ace, думаю знают все, а сегодня у нас возникла срочная необходимость прикрутить редактор кода с подсветкой синтаксиса к проекту на AngularJS, наткнулся на этот пост — действительно быстро привязал к проекту. Подумал будет полезно многим новичкам — решил перевести, благо короткий. Заодно добавил пример в jsfiddle.
Перевод:
Иногда ты сталкиваешься с технологией которая заставит остановиться и задуматься о том как далеко продвинулась веб разработка в последние несколько лет. Для меня одной из таких технологий стал проект Ace. Если Вы незнакомы с ним, Асе, это «высокопроизводительный редактор кода для веба». Он позволяет Вам создавать сайты позволяющие пользователю писать код непосредсвенно в их браузере. LearnAngular широко использует Ace.

В этом посте мы рассмотрим как интегрировать редактор Ace в приложение AngularJS с помощью модуля от AngularUI.

Шаг 1 — Получаем компоненты


Первое, что мы должны сделать, это получить три необходимые для задачи библиотеки:

После сделайте ссылки на эти библиотеки в Вашем приложении следующем порядке:

  1. AngularJS

  2. Ace

  3. ui-ace


Шаг 2 — напишите HTML


<div class="editor" ui-ace="{ mode: 'javascript', theme: 'monokai' }" ng-model="code"></div>

Верите или нет, это весь 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: 200px;
}

(прим. пер. без этого маленького участка кода редактор вообще не отобразиться — нет высоты по умолчанию)

Шаг 5 — Попробуйте его.


Вот и все, что нужно делать! Просто несколько строк кода и мы интегрировали чрезвычайно богатый редактор кода в веб-страницу, и можно продолжать и делать все, что мы хотели бы с кодом который пишут наши пользователи. Моё мнение — очень круто!

От себя — попробовал, понравилось и добавил ещё ссылку на один редактор оформленные как директива для AngularJS

Ссылки




Источник: Хабрахабр

Категория: Программирование » Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *