Главная

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

2014-07-22 в 17:14, admin, рубрики: ace, AngularJS, Веб-разработка

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

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

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

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

AngularJS — angularjs.org, Google Hosted Libraries, cdnjs,
```
bower install angular
```
Ace — ace.c9.io, cdnjs,
```
bower install ace
```
ui-ace — GitHub,
```
bower install angular-ui-ace#bower
```

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

AngularJS
Ace
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