Comments 21
Я бы обратил еще особое внимание на то, что в изолированном скоупе мы задаем переменные camelCase'ом, но в DOM они должны быть написаны через дефис, т.е:
А так работать НЕ будет:
scope:{
localVar1:"@", /*localVar1:"@localVar1" */
localVar2:"=", /*localVar2:"@localVar2" */
localVar3:"&" /*localVar3:"@localVar3" */
}
<div ng-app="helloHabrahabr">
<span habra-habr="hello" local-var1="Hello Habr!" local-var2="Foo" ></span>
</div>
А так работать НЕ будет:
<div ng-app="helloHabrahabr">
<span habra-habr="hello" localVar1="Hello Habr!" localVar2="Foo" ></span>
</div>
Полагаю, стоит упомянуть и о том, что в templateUrl может быть id уже существующего шаблона на странице, заданного в виде
т.е.
<script id="SomeTemplate" type="text/ng-template">
...
</script>
т.е.
templateUrl: 'SomeTemplate'
Есть досадное ограничение на темплейты директив — только один рутовый тег на темплейт. То есть вот такой темплейт работать будет
А вот такой нет
Это ограничение можно обойти если использовать компиляцию шаблона в link вручную.
<div ng-app="helloHabrahabr">
<span habra-habr="hello" localVar1="Hello Habr!" localVar2="Foo" ></span>
</div>
А вот такой нет
<div ng-app="helloHabrahabr">
<span habra-habr="hello" localVar1="Hello Habr!" localVar2="Foo" ></span>
</div>
<div ng-app="helloHabrahabr">
<span habra-habr="hello" localVar1="Hello Habr!" localVar2="Foo" ></span>
</div>
Это ограничение можно обойти если использовать компиляцию шаблона в link вручную.
components.directive('myDir', function ($compile) {
return {
link: function ( scope,element, attrs) {
var tmpl = '<div ng-app="helloHabrahabr">'+
'<span habra-habr="hello" localVar1="Hello Habr!" localVar2="Foo" ></span>'+
'</div>'+
'<div ng-app="helloHabrahabr">'+
'<span habra-habr="hello" localVar1="Hello Habr!" localVar2="Foo" ></span>'+
'</div>'
var newElement = angular.element(tmpl)
$compile(newElement)(scope)
element.replaceWith(newElement)
}
})
Какой страшный этот ваш Angularjs.
HTML-шаблоны внутри js-кода?
Функции внутри разметки?
Мне лично не нравится.
HTML-шаблоны внутри js-кода?
template:"<input ng-model='hello'>{{hello}}"
Функции внутри разметки?
<span habra-habr some-attr="hello= a+b"></span>
Мне лично не нравится.
На деле всё не так страшно — темплейты в коде писать никто не заставляет — куда удобнее держать их в отедельных файлах и собирать в один JS файл на этапе сборки проекта. А для разработки даже можно ничего не собирать — ангуляр сам подтянет темплейты из templateUrl через AJAX
Касательно логики в темплейте — она используется для изменения состояния контроллера или вывода. Так специально ограничили, чтобы народ не пихал бизнес-логику в код.
До сегодняшнего релиза там даже conditional expressions не было — сегодня добавили тернарный if — реально удобно.
Логика в темплейтах должна использоваться примерно так:
Плашка isLoading будет показана, когда форма будет отправлена на сервер. Когда данные будут получены — контроллер сделает scope.isLoading = false и плашка спрячется, а форма вернётся.
Касательно логики в темплейте — она используется для изменения состояния контроллера или вывода. Так специально ограничили, чтобы народ не пихал бизнес-логику в код.
До сегодняшнего релиза там даже conditional expressions не было — сегодня добавили тернарный if — реально удобно.
Логика в темплейтах должна использоваться примерно так:
<form ng-hide="isLoading" ng-submit="isLoading = true">
...
<input type="submit">
</form>
<div ng-show="isLoading">Sending data on server...</div>
Плашка isLoading будет показана, когда форма будет отправлена на сервер. Когда данные будут получены — контроллер сделает scope.isLoading = false и плашка спрячется, а форма вернётся.
Касательно логики в темплейте...
Спасибо за объяснения. Действительно, с такими ограничениями всё кажется не так страшно.
Но мне всё равно не понятно
… куда удобнее держать их в отедельных файлах и собирать в один JS файл на этапе сборки проекта. А для разработки даже можно ничего не собирать...
Т.е. при разработки в js-коде будет написано `templateUrl: 'some.html'` а при сборке нужно это както заменить? Вручную? Или Ангулар самостоятельно пройдётся по js-файлам и заменит вхождение этой строки? Сомнительно.
Я уже давал ссылку в первой части — npmjs.org/package/grunt-angular-templates
При сборке он пройдётся по всем темплейтам и сгенерирует из них строки, которыми заполнит $templateCache
В исходниках ничего менять не надо будет.
При сборке он пройдётся по всем темплейтам и сгенерирует из них строки, которыми заполнит $templateCache
В исходниках ничего менять не надо будет.
Интересно было бы узнать, что по вашему не страшно и нравится лично вам.
habrahabr.ru/post/179359/#comment_6248559
Тут примерно вид шаблона, модели и контроллера. Это то, к чему я стремлюсь. На текущий же момент, можно написать такой код:
jsfiddle.net/termi/4cF97/ — Этот пример максимально упрощен, из него вырезаны все вызовы фреймворка и оставлено только DOM API. Как вы можете видеть, никаких data-* или других кастомных атрибутов не используется, только стандартные.
Это только демонстрация возможностей, готового фреймворка пока нету.
Не в коем случае не говорю, что Angularjs плохая библиотека, просто, по моему, простые вещи в ней сделаны слишком сложно, а сложные ещё сложнее. Да и производительность страдает — я тестировал на большом количестве компонентов.
Тут примерно вид шаблона, модели и контроллера. Это то, к чему я стремлюсь. На текущий же момент, можно написать такой код:
jsfiddle.net/termi/4cF97/ — Этот пример максимально упрощен, из него вырезаны все вызовы фреймворка и оставлено только DOM API. Как вы можете видеть, никаких data-* или других кастомных атрибутов не используется, только стандартные.
Это только демонстрация возможностей, готового фреймворка пока нету.
Не в коем случае не говорю, что Angularjs плохая библиотека, просто, по моему, простые вещи в ней сделаны слишком сложно, а сложные ещё сложнее. Да и производительность страдает — я тестировал на большом количестве компонентов.
UFO just landed and posted this here
Где, где у меня в коде классы или идентификаторы? Простите, но Вы код вообще смотрели? В демо jsfiddle.net/termi/4cF97/ всё обращение с DOM идёт через специальное (нативное для браузера) абстрактное API. Код максимально абстрагирован от DOM и может быть использован и с другим бэкендом, например с WebGL.
Вот ещё один пример: h123.ru/-/tests/KeyboardEvent/ — тут с шаблонизацией, но тоже проходной вариант, я просто игрался с DOM API.
В комментарии же, ссылку на который я дал, следующий уровень абстрагируемости от DOM.
Вот ещё один пример: h123.ru/-/tests/KeyboardEvent/ — тут с шаблонизацией, но тоже проходной вариант, я просто игрался с DOM API.
В комментарии же, ссылку на который я дал, следующий уровень абстрагируемости от DOM.
Просто вы начали знакомство с Angular «не с той стороны»
Начните знакомство отсюда angularjs.org/ (с главы The Basics, знакомство займет не больше 10 минут).
И возможно вы вдохновитесь декларативным подходом, так же как и я в свое время.
Начните знакомство отсюда angularjs.org/ (с главы The Basics, знакомство займет не больше 10 минут).
И возможно вы вдохновитесь декларативным подходом, так же как и я в свое время.
Посмотрите пожалуйста мои примеры приведённые в комментариях выше. В обоих примерах используется декларативный стиль. Селекторы, классы, идентификаторы, кастомные аттрибуты и т.д. не используются. И всё это сделано с использованием встроенных в браузер API, а при желании я могу сменить бэкенд на WebGL
Интересно, что бы вы сказали о React)
В этом примере имена директивы в html и в js не согласованы между собой (habra-habr-template и habraHabr). Пример не работает. Опечатка?
Ссылка к примеру для префикса "=" ведет на пример для префикса "@".
Sign up to leave a comment.
Директивы в Angularjs для начинающих. Часть 2