Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 28
Вот правильная ссылка на github: github.com/lexxpavlov/angular-admin
> жалко, что не !#, который Гугл принял за стандарт для индексирования
Как-то немного странно получилось. Есть разные режимы работы: Hashbang and HTML5 Modes. Из документации следует, что по-умолчанию и должно быть '#!'. Поэкспериментировать надо.
Как-то немного странно получилось. Есть разные режимы работы: Hashbang and HTML5 Modes. Из документации следует, что по-умолчанию и должно быть '#!'. Поэкспериментировать надо.
Добрался до исходников. Как и предполагалось, в
В результате получаем урлы: localhost:8080/#!/list
config надо было просто прописать $locationProvider.hashPrefix('!');В результате получаем урлы: localhost:8080/#!/list
Верно, спасибо за дополнение. В данном примере нужно в файл app.js:
При добавлении префикса не забыть поменять адреса в ссылках, и необходимо настроить сервер, чтобы отдавал поисковикам HTML (см. эту статью)
angular.module('admin', ['admin.services','admin.filters'])
.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider /* .when() ... */;
$locationProvider.hashPrefix('!');
},
]);
При добавлении префикса не забыть поменять адреса в ссылках, и необходимо настроить сервер, чтобы отдавал поисковикам HTML (см. эту статью)
Простите, я не понял. Если раньше сервер отдавал просто json, то сейчас он должен отдать html, но как тогда скоуп получит данные? два запроса, или как?
Конкретно настройка $locationProvider.hashPrefix('!'); приводит к тому, что в адресной строке после хэша появляется ещё и восклицательный знак:
Было: example.com/#/page-1
Стало: example.com/#!/page-1
На саму страницу это никак не влияет, просто добавляется "!". Но вот гугл, видя не просто "#", а "#!" поймёт, что это ссылка на страницу, получаемую по ajax, и сделает запрос на сервер example.com/?_escaped_fragment_=/page-1, где и получит html страницы (а не json).
Было: example.com/#/page-1
Стало: example.com/#!/page-1
На саму страницу это никак не влияет, просто добавляется "!". Но вот гугл, видя не просто "#", а "#!" поймёт, что это ссылка на страницу, получаемую по ajax, и сделает запрос на сервер example.com/?_escaped_fragment_=/page-1, где и получит html страницы (а не json).
То есть получается ту страницу (те данные) которые он получит должны быть сгенерирована сервером, точнее php, без angular?
То есть в блоке ng-view всё делать с помощью php, если смотреть здесь, то там php генерит страницу? Если нет, то как мне в генерируемый html отправить данные в виде объекта, чтобы с отрендерить вид ангуляром. Получается что шаблон template: '/views/list.html' ни как не участвует, ведь в нём есть цикл перебирающий массив, который получал json, а теперь php. Я вообще запутался.
То есть в блоке ng-view всё делать с помощью php, если смотреть здесь, то там php генерит страницу? Если нет, то как мне в генерируемый html отправить данные в виде объекта, чтобы с отрендерить вид ангуляром. Получается что шаблон template: '/views/list.html' ни как не участвует, ведь в нём есть цикл перебирающий массив, который получал json, а теперь php. Я вообще запутался.
вы правильно понимаете. Гугл по указанному адресу будет ожидать html, и сервер должен подготовить html, вставив туда данные, заполнив списки и прочее. То есть, отчасти, для правильного индексирования ajax-сайта, вся работа по формированию html должна проводиться два раза — angular-ом на клиенте в браузере, и отдельно серверным движком — а будет ли там php, или что-то ещё, не важно. Поэтому многие полюбили Node.js — это серверный javascript, и для него много кода будет общим между клиентом и сервером.
Я слышал мнение, что сейчас гугл умеет разбирать javascript на страницах, выполнять его и делать ajax-запросы самостоятельно. Но лично я таких данных не имею, и лично не проверял и не читал про это ничего, и если так, будет ли он ещё и js-шаблоны использовать, я не знаю. К тому же, даже если гугл и научился, то насчёт других поисковиков сомнения в таких талантах гораздо больше.
Я слышал мнение, что сейчас гугл умеет разбирать javascript на страницах, выполнять его и делать ajax-запросы самостоятельно. Но лично я таких данных не имею, и лично не проверял и не читал про это ничего, и если так, будет ли он ещё и js-шаблоны использовать, я не знаю. К тому же, даже если гугл и научился, то насчёт других поисковиков сомнения в таких талантах гораздо больше.
А как же на счёт инлайновых php вставок в код angularjs? ну типа ng-click=«addCart(<?=$data->id?>)», ведь такой подход не приветствуется.
Нет, так делать не надо, конечно же. Потом сами замучаетесь поддерживать подобный код.
Если вы хотите сделать индексацию своего ajax-сайта, который работает на клиенте, а с сервера отдаёт только json-данные, то вы должны дополнительно к этому уже готовому сайту отдельно сделать возможность генерировать тот же контент в виде html. Да, генерировать html на сервере. Можно рядом с backend-проектом, который отдаёт json frontend-у, сделать отдельный проект обычного сайта. В случае использования php на сервере это может быть единственным вариантом.
Как указано в комментариях статьи, что вы упомянули, указана возможность подключения PhantomJs, который на сервере сам будет запускать ваш js-сайт и возвращать готовый html. Можно на backend перейти на Node.js, и там будет сделать всё проще, чем с php. Там же в комментах был упомянут интересный проект Prerender.io (или AjaxSnapshots.com), который будет за вас делать html с вашего сайта.
Если вы хотите сделать индексацию своего ajax-сайта, который работает на клиенте, а с сервера отдаёт только json-данные, то вы должны дополнительно к этому уже готовому сайту отдельно сделать возможность генерировать тот же контент в виде html. Да, генерировать html на сервере. Можно рядом с backend-проектом, который отдаёт json frontend-у, сделать отдельный проект обычного сайта. В случае использования php на сервере это может быть единственным вариантом.
Как указано в комментариях статьи, что вы упомянули, указана возможность подключения PhantomJs, который на сервере сам будет запускать ваш js-сайт и возвращать готовый html. Можно на backend перейти на Node.js, и там будет сделать всё проще, чем с php. Там же в комментах был упомянут интересный проект Prerender.io (или AjaxSnapshots.com), который будет за вас делать html с вашего сайта.
Где бы глянуть пример на php серверной части. А то сейчас запуская сайт всё хорошо по адресу /cabinet/login, и этот url контролирует AngularJS, и все переходы тоже, но как только я нажимаю обновить страницу, этот URL уже уходит под контроль сервера, а у него по этому адресу пусто, и возвращается ошибка. Не могу понять что я пропустил, может нужно nginx как-то настроить rewrite
Почему-то каждый раз в таких случаях хочется взять Ext и не париться…
Ого. Забавно я сейчас тоже начал переписывать свои админки под Angular. Очень удобно получается. Тут я в первую очередь говорю об админке где ограниченное число администраторов, удобство в том что можно легко контролировтаь используемые технологии, что позволяет использовать последние технологии по полной.
Простите за мою желчь и оффтоп.
Под удобством админки гораздо чаще подразумевается редактирование страницы (объекта) 1 кликом, вставка картинки одним кликом, и сортировка (смена местами элементов на сайте) перетаскиванием, а не вводом значений для сортировки.
Под удобством админки гораздо чаще подразумевается редактирование страницы (объекта) 1 кликом, вставка картинки одним кликом, и сортировка (смена местами элементов на сайте) перетаскиванием, а не вводом значений для сортировки.
Согласен с вами. Но это уже следующий шаг. Вспомните админки лет пять назад, до ajax-а. Работать можно было, но было дольше и менее удобно. К тому же функция редактирования на самой странице не заменит список всех материалов, иногда нужно видеть всё вместе, и именно с функцией сортировки (о которой в следующей статье, уже скоро).
Пользую в админках jqGrid для подобных целей. Серверная часть выдает JSON, на клиенте надо расписать конфиг, остальное делает jqGrid. Он многое умеет делать из коробки.
Интересный компонент, спасибо, я его не видел. Но, насколько я понял, он всю обработку делает на стороне сервера — страницы, сортировка, поиск. А в моей реализации все данные загружаются на страницу и обрабатываются уже на клиенте. В этом есть и преимущества, и недостатки — зависит от задачи.
Но в AngularJS можно и постоянную подгрузку данных реализовать, достаточно изменить сервис Items и добавить немного логики в контроллер. Это может понадобиться при огромных таблицах на сотни страниц. Если интересно, могу рассмотреть такой способ работы с данными.
Но в AngularJS можно и постоянную подгрузку данных реализовать, достаточно изменить сервис Items и добавить немного логики в контроллер. Это может понадобиться при огромных таблицах на сотни страниц. Если интересно, могу рассмотреть такой способ работы с данными.
Это может понадобиться в случае, если параллельно несколько человек работает над одной таблицей, и нужно учитывать последние изменения.
Хотя лучше периодически запрашивать сервер, нет ли изменений в таблице, и только при их наличии запрашивать обновление конкретных записей.
Хотя лучше периодически запрашивать сервер, нет ли изменений в таблице, и только при их наличии запрашивать обновление конкретных записей.
Если делать все по уму, то нужно чтобы сервер стучался ко всем активным клиентам, работающим с конкретной таблицей в данный момент, и если в таблице произошли изменения — то оповещал об этом.
По большему счету, если не происходит конфликт записей, т.е. никто не пытается одновременно менять одну и ту же запись, то изменения не существенны.
По большему счету, если не происходит конфликт записей, т.е. никто не пытается одновременно менять одну и ту же запись, то изменения не существенны.
trirand.com/blog/jqgrid/jqgrid.html — тут демки. Вообще jqGrid много чего умеет. :)
С помощью вашей статьи осилил таки начать изучение Angular. Большое спасибо, пишите еще.
Почему вы подключаете отдельные модули для фильтрации и сервисов
а не настриваете .filter(...) и .factory(...) в самом модуле admin?
angular.module('admin', ['admin.services','admin.filters'])а не настриваете .filter(...) и .factory(...) в самом модуле admin?
Сейчас из рабочих — ссылка на ГИТ. Каким образом можно просмотреть результат работы? Скачал исходник с ГИТ, но с запуском проблемы. Сори, я новичок в этом.
Да, сейчас мой сайт, на котором была демка, отключен. Попробую выложить на Github Pages. Кину сюда ссылку, как сделаю.
Вообще, нужно взять содержимое папки app/ репозитория и положить его в корень сайта (или в подпапку), для этого нужно иметь запущенный веб-сервер. Например, если установлен Денвер, то нужно содержимое папки app положить в z:\home\ng-admin\www\ и запускать его в браузере по адресу ng-admin/ (после рестарта денвера, конечно же).
Вообще, нужно взять содержимое папки app/ репозитория и положить его в корень сайта (или в подпапку), для этого нужно иметь запущенный веб-сервер. Например, если установлен Денвер, то нужно содержимое папки app положить в z:\home\ng-admin\www\ и запускать его в браузере по адресу ng-admin/ (после рестарта денвера, конечно же).
— А если воспользоваться сервером на node.js? В исходниках есть в разделе файл scripts/web-server.js. Его можно использовать?
— Может подскажешь источники по Angular на русском для начинающих?
— Может подскажешь источники по Angular на русском для начинающих?
На самом деле, Angular — это браузерный javascript, для его работы не нужен веб-сервер. Только вот браузеры ограничивают загрузку файлов шаблонов с диска по своей политике безопасности — при запуске страницы непосредственно с диска не работает ajax. Поэтому и нужен веб-сервер.
Ну и в моей реализации бэкенд (папка back) сделан на php, поэтому нужно использовать веб-сервер, поддерживающий php. Но его можно очень легко переделать на Node.js (вот, например, из последних статей на хабре по теме — habrahabr.ru/post/213931/). Либо вместо php-бэкенда отдавать готовый json с данными, но тогда добавление/изменение записей не будет работать.
Перевод официальной документации можно найти на angular.ru, кое-что ещё можно найти вот тут: stepansuvorov.com/blog/2012/12/%D1%81-%D1%87%D0%B5%D0%B3%D0%BE-%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C-%D0%B8%D0%B7%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-angularjs/
Ну и в моей реализации бэкенд (папка back) сделан на php, поэтому нужно использовать веб-сервер, поддерживающий php. Но его можно очень легко переделать на Node.js (вот, например, из последних статей на хабре по теме — habrahabr.ru/post/213931/). Либо вместо php-бэкенда отдавать готовый json с данными, но тогда добавление/изменение записей не будет работать.
Перевод официальной документации можно найти на angular.ru, кое-что ещё можно найти вот тут: stepansuvorov.com/blog/2012/12/%D1%81-%D1%87%D0%B5%D0%B3%D0%BE-%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C-%D0%B8%D0%B7%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-angularjs/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Практикум AngularJS — разработка административной панели