Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 38
код фу…
Простите, а где тут Bootstrap-то?
Ну как же? А стиль кнопки?
Какой именно? %)
Ну его ещё рихтанули же. Варнингу кстати меньше досталось.
Почему дополнен код Bootstrap — об этом стоило бы добавить. Ни одна из стандартных кнопок не выглядит достаточно неконтрастно, чтобы Delete не воспринималось как основная операция списка. Поэтому добавлен стиль btn-del.
Причина правки (дублирования) .bg-danger в пользовательских стилях — в том, что он иначе экранируется по правилам приоритетности стилей другими стилями подложки (это легко видеть в Firebug).
Bootstrap-стили использованы везде в тексте, где они предусмотрены. Это видно по применению классов Bootstrap bg-info и прочих bg-, форматоров form-control input-sm, кнопок btn-default и других btn-, классов class=«tests bg-'+(!er?'success':'danger') +'»', т.е. в каждом предусмотренном CSS-фреймворком случае.
Причина правки (дублирования) .bg-danger в пользовательских стилях — в том, что он иначе экранируется по правилам приоритетности стилей другими стилями подложки (это легко видеть в Firebug).
Bootstrap-стили использованы везде в тексте, где они предусмотрены. Это видно по применению классов Bootstrap bg-info и прочих bg-, форматоров form-control input-sm, кнопок btn-default и других btn-, классов class=«tests bg-'+(!er?'success':'danger') +'»', т.е. в каждом предусмотренном CSS-фреймворком случае.
На личном опыте не раз убеждался что в случае таких вот простеньких примеров клиентские фреймворки работают. Но как дело доходит до более сложного приложения, разработка и поддержка приложения превращаются в ад и требуют очень больших затрат со стороны разработчика. Ваш код тому прямое подтверждение.
Этот код не просто ужасен, он отвратителен, spmbt уже давно снискал славу не очень хорошего разработчика, чего только HabrAjax стоит. Не стоит по его коду судить проект, лучше заглянуть на TodoMVC.
Разрабатывать с AngularJS одно удовольствие. На официальном сайте есть много примеров проектов, которые разрабатывались с помощью AngularJS (в т.ч. гугловский DoubleClick — довольно серьезная b2b-система).
Разрабатывать с AngularJS одно удовольствие. На официальном сайте есть много примеров проектов, которые разрабатывались с помощью AngularJS (в т.ч. гугловский DoubleClick — довольно серьезная b2b-система).
В todoMVC описано законченное приложение, разбитое на модули. По духу ряда примеров учебника на Angularjs.org, код должен быть представлен рядом усложняющихся примеров, без замешивания в него сразу всех технологий фреймворка. Поэтому в приведённом примере видим ограниченное использование директив и отсутствие описаний модулей, отсутствие роутинга. Весь код — в одном файле, чтобы в простом текстовом редакторе или js Fiddle легко было найти зависимости, не прибегая к развёртыванию проекта в IDE. Точно такой же подход видим в ряде примеров на jsFiddle у других авторов.
Те сайты, которые Вы показали на офсайте — вообще не подходят для новичков. Для опытного разработчика — да, там всё понятно и одно удовольствие (плюс если есть время на разбор). От идеи упомянуть их я сразу отказался, посмотрев функциональность.
Итого, Вы невнимательно отнеслись к флажку «Обучение» над статьёй. Все эти ссылки из Вашего комментария — для Вас, но не для обучения. Несомненно, затем нужно идти к более сложным примерам, отмечать правильные техники и преобразовывать первичный код, я об этом недвусмысленно написал в конце: «В любом случае, всякое улучшение предпочтительно делать в виде цепочки усложняющихся демо, как это выполнено в учебнике Angular.» Но первичный код должен быть простым для анализа простыми средствами.
Те сайты, которые Вы показали на офсайте — вообще не подходят для новичков. Для опытного разработчика — да, там всё понятно и одно удовольствие (плюс если есть время на разбор). От идеи упомянуть их я сразу отказался, посмотрев функциональность.
Итого, Вы невнимательно отнеслись к флажку «Обучение» над статьёй. Все эти ссылки из Вашего комментария — для Вас, но не для обучения. Несомненно, затем нужно идти к более сложным примерам, отмечать правильные техники и преобразовывать первичный код, я об этом недвусмысленно написал в конце: «В любом случае, всякое улучшение предпочтительно делать в виде цепочки усложняющихся демо, как это выполнено в учебнике Angular.» Но первичный код должен быть простым для анализа простыми средствами.
Один вопрос — вы считаете, что ваш код годится для обучения, прост и понятен?
Ответ: я считаю, что он проще законченных примеров из Ваших ссылок, которые читать проще для тех, кто имеет IDE и знает назначение каждой технологии.
Насколько годится для обучения — это могло бы сказать сравнение кодов того же примера, написанного в другом стиле (пока не вижу таких). Примеры очень коротких кодов из других jsFiddle, как jsfiddle.net/dakra/U3pVM/ — наоборот, вырывает одну технологию и не предоставляет нативного кода, не завязанного на Angular, с которого могло бы начаться раскручивание примера читателем. Это мой взгляд, для опровержения или альтернативы нужно сравнение кодов, по которым неопытный читатель сказал бы, что проще и понятнее.
Насколько годится для обучения — это могло бы сказать сравнение кодов того же примера, написанного в другом стиле (пока не вижу таких). Примеры очень коротких кодов из других jsFiddle, как jsfiddle.net/dakra/U3pVM/ — наоборот, вырывает одну технологию и не предоставляет нативного кода, не завязанного на Angular, с которого могло бы начаться раскручивание примера читателем. Это мой взгляд, для опровержения или альтернативы нужно сравнение кодов, по которым неопытный читатель сказал бы, что проще и понятнее.
Вы таким подходом к обучению сразу учите писать полотна говнокода в одном файле. Я к примеру до вчерашнего дня, думал что на Java довольно сложно писать таким образом, но видимо индус (в прямом смысле этого слово), который писал этот проект, пришел из мира веб разработки. И вот я уже второй день, за 100$, добавляю довольно простой функционал в это говно. Потерял уже пару литров крови — из глаз.
Разбросать по файлам — не проблема. Это начинает требоваться в более реальных проектах, а так сейчас с файлами в 10-20 строчек работать труднее, чем с одним. Как видите, тут вообще один файл. Одна простыня на 300 строк — это не так много, на мой взгляд. Больше 500-1000 — уже можно начинать задумываться о дроблении.
Автор, я недавно написал пост, как структурировать приложение, вот ссылка на него habrahabr.ru/post/215273/
> уже давно снискал славу не очень хорошего разработчика…
Не знаю, чем Вы определяете «хорошесть».
Относительно HabrAjax — я сделал всё, что хотел сделать в нём, несколько тысяч строк, более 60 функций, стили. Те, кто со мной общался в комментариях — вообще не разработчики, потому что у них даже работающего кода нет, ни одного дельного предложениея (если не считать одного совета перенести код на Гитхаб, но и то — только совет). О чём можно говорить с критиками, которые ничего не пишут, кроме комментариев?
Не знаю, чем Вы определяете «хорошесть».
Относительно HabrAjax — я сделал всё, что хотел сделать в нём, несколько тысяч строк, более 60 функций, стили. Те, кто со мной общался в комментариях — вообще не разработчики, потому что у них даже работающего кода нет, ни одного дельного предложениея (если не считать одного совета перенести код на Гитхаб, но и то — только совет). О чём можно говорить с критиками, которые ничего не пишут, кроме комментариев?
Хорошесть я определяю просто — по качеству кода, который выложен как туториал. Извините, но слишком много придется разбирать, у вас ни строчки без плохого года.
Кстати, если считаете меня критиком, можете заглянуть на мой сайт, он указан в профиле. Там же есть и ссылка на гитхаб, код я тоже пишу.
Кстати, если считаете меня критиком, можете заглянуть на мой сайт, он указан в профиле. Там же есть и ссылка на гитхаб, код я тоже пишу.
Нет, я про тех, кто высказывал отрицательные мнения про HabrAjax, но при этом ничего не сделал для него, чтобы получить то лучшее. Это же опенсорс; хочется — сделай.
А с плохого кода обычно начинаются проекты, потом они постепенно улучшаются, когда вырабатываются паттерны. Код, который у меня в примере, наполовину состоит из типичного кода примеров. Следовательно, утверждение «ни строчки без плохого кода», говорит, что и все примеры плохие.
А с плохого кода обычно начинаются проекты, потом они постепенно улучшаются, когда вырабатываются паттерны. Код, который у меня в примере, наполовину состоит из типичного кода примеров. Следовательно, утверждение «ни строчки без плохого кода», говорит, что и все примеры плохие.
Следовательно, утверждение «ни строчки без плохого кода», говорит, что и все примеры плохие.
Да, так и есть.
Но разрешать это противоречие (да, так и отзываются о туториалах) можно лишь конструктивно, на мой взгляд — что-то предлагать, от простого к сложному (но не настолько простое, которое уже есть в интернете). Вот я взял несколько примеров из туториалов за основу и сделал. Теперь можно говорить, что хотелось бы лучше. И лучше не просто говорить, а показать на примере, который легко делается в фиддле или пулл-реквесте. Ну или в клоне. А то получается, что есть группа гуру, которые не говорят, и есть куча плохого кода, ни один из которых не годится для чтения. (Знание JS подразумевается.) С чего же начинать читателю?
вы «хорошесть» видимо количеством строк кода измеряете? странный критерий
Angular c
querySelector и работой с DOM напрямую, мда…Показано отсутствие необходимости jQuery и встроенного jqLite. А в тестах работа с DOM напрямую для наглядности, хотя можно было бы использовать this.fname и прочее, что также продемонстрировано во втором контроллере addressEditController:
в первом обращения к DOM — исключительно для наглядности тестов, иначе тесты пришлось бы писать по-другому, и они бы вызвали несомненные вопросы. Не
this.fname = this.listItem.fname;
в первом обращения к DOM — исключительно для наглядности тестов, иначе тесты пришлось бы писать по-другому, и они бы вызвали несомненные вопросы. Не
addItem.querySelector('.fname').value ='tstFirstName';
this.fname = this.listItem.fname;
Первый раз в жизни вижу js файл на 20 тысяч строк кода. Спасибо.
А, вы просто туда еще и все примеры засунули, тогда пардон конечно…
А, вы просто туда еще и все примеры засунули, тогда пардон конечно…
Не высшего, а высокого, не для меня, а для читателя. К тому же, директивы (+ модули, контроллеры) — есть, как замечено, они описаны атрибутом. Примеры не должны вводить сразу все техники. Этот же подход используется на официальном сайте в череде примеров из учебника. Лучшим ответом был бы показ того кода, который Вы считаете более понятным и последовательным, для этого есть jsfiddle и Github. Пока что не вижу ни одного исправления ни там, ни там. Вот приведите пример — тогда будет, что сравнивать. И в этом — смысл данного примера.
Вот был бы серьёзный пример с локализацией, несколькиими контроллерами на страницу, валидацей связанных полей, валидацией сложных полей (например, год, месяц, день отдельными инпутами), а и чтобы несколько ngApp на одной странице было, чтобы это всё красиво грузилось со спинерами, короче такой полноценный проект.
Генерация и навигация по HTML-DOM в контроллерах angular? Вы серьезно?
Потратьте пожалуйста время, отведенное на написание следующей статьи, на просмотр замечательных скринкастов по angular от разработчика: egghead.io
Да даже в случае с бутстрапом придумывать ничего не нужно, уже есть вполне годный адаптер angular<->boostrap, который называется angular-ui
Потратьте пожалуйста время, отведенное на написание следующей статьи, на просмотр замечательных скринкастов по angular от разработчика: egghead.io
Да даже в случае с бутстрапом придумывать ничего не нужно, уже есть вполне годный адаптер angular<->boostrap, который называется angular-ui
Выше #здесь ответ про DOM. поп практикам — да, известно, что так не делают, я добавил доступ к DOM только в 1 контроллер, покрыытый нативным тестом.
По бутстрепу я ничего не придумывал, просто использовал для оформления. Приведённая вами либа тоже требует базового Bootstrap 3.0.3+, а по списку возможностей иогли бы пригодиться лишь 2-3: Popover (по mouseover), Tookltop, Modal. Но вместо модального окна я реализовал тоггл-блок несколькими строчками нативного кода. А подсказки — да, лучше бы смотрелись предложенные вами (на месте Edit List Item).
По бутстрепу я ничего не придумывал, просто использовал для оформления. Приведённая вами либа тоже требует базового Bootstrap 3.0.3+, а по списку возможностей иогли бы пригодиться лишь 2-3: Popover (по mouseover), Tookltop, Modal. Но вместо модального окна я реализовал тоггл-блок несколькими строчками нативного кода. А подсказки — да, лучше бы смотрелись предложенные вами (на месте Edit List Item).
Никаких document.querySelector в angular-коде быть не может и не должно (разве что в директивах, да и там только относительно angular.element).
Прежде чем учить других, следует научиться самому.
Прежде чем учить других, следует научиться самому.
Да, конечно, #здесь ответ. Тем более, это менее кроссбраузерно. Но и даже тесты можно написать в стиле Angular. Предлагаю Вам или кому-либо расширить этот пример до переписывания теста в подходящем стиле. (Любой код лучше любых комментариев.)
К сожалению, это можно только переписать целиком. Там все плохо.
Я — только за. Разговоры — ничто.
А в чем вообще смысл? Официальный туториал неплохо вводит в курс дела, дальше — egghead.io, а после него уже можно и самому писать. Чему дополнительно к тому учит ваш пример? Работать вне директив напрямую с DOM? Писать классы типа .w96? Никаких новых знаний не добавляется, разве что пример того, как делать не надо.
Тут в начале писал:
Когда такие примеры покажутся слишком простыми, хочется посмотреть на развитие постановки задачи и приближенное к реальности приложение с некоторым оформлением стилей.Есть куда пример развивать (тесты, многоязычность, сервер), да и будет вариант вашего представления о структуре кода.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Пример приложения — телефонной книги на AngularJS + Bootstrap v3