База данных нужна для сохранения и манипулирования большими кусками структурированной (и не очень — смотри NoSQL) информацией. Как много сайтов на самом деле имеют дело с большим объемом информации? Если честно, то 1% из всех. Остальные сайты вполне описываются в терминах «пара таблиц и связи между ними». Если Вы можете нарисовать архитектуру своей базы на одном листе А4, а количество записей в каждой таблице составляет порядка сотни или тысячи — я очень сомневаюсь что Вашему сайту на самом деле обязательна база.
пример сайта-блога на AngularJS без базы данных. Другие сайты на AngularJS Вы можете найти на странице примеров для изучения или по тегу AngularJS
Почему раньше базы были нужны? — потому что мы не работали во фронтенде. От слова — совсем. Любой чих — и вся страница перерисовывалась. Потом появились асинхронные запросы — и мы радостно начали грузить куски кода. Теперь же, манипулируя данными в виде json массивов, основные операции вывода и отрисовкимы вешаем как раз на фронтенд. Стоит ли нам за каждым чихом теперь грузить маленький кусочек данных?
В чем смысл отказа от базы в пользу подключаемых изначально схем? — кеширование на стороне браузера клиента, единичное соединение, единство формы и обработчика. Накладные расходы от «чихания», описанного выше, суммарно дают намного больший расход трафика и задержки на фронтенде. Разбалованный «толстым», стабильным интернетом посетитель не любит ждать. Позвольте данным быть быстрыми.
Схема сохранения данных без базы данных
Создадим обычный файл для тестов, например json/articles.php. Почему скриптовый? Для тестов так проще проверить поведение на тысяче записей, в
живой реализации мы заменим статичным файлом, с той же структурой. Сейчас обратите внимание на параметр индекса, он не просто так, а в конце статьи станет яснее почему
Если присмотреться внимательно, то мы видим что пока еще такой скрипт не кешируется т.к. браузер не в курсе что это на самом деле. Для этого мы даем хедеры, либо делаем реальный генератор js файла…. Второй вариант лучше так как мы потом все равно должны прийти к статичному файлу.
Схема использования данных в Angular
Стандартно я начинаю с первой страницы, схема сайта достаточно проста
Теперь внедрим эти данные в наш шаблон и контроллер
Пейджинг
Если данных много, то ничего не остается как делать страницы. Простейший переключатель страниц выводит текущий номер, и несколько номеров в обе стороны для навигации.
Для его использования на каждую кнопку страницы навесим действие
Самое важное — не забудем завязать данные
Сохранение ссылки (или как изменить ссылку на страницу без перезагрузки контроллера AngularJS)
Теперь тонкий момент, если Вы только начинаете программировать — нужно это все равно делать хорошо. Что неудобно на текущей странице? нельзя передать закладку на номер страницы. В любой момент открытие откроет только первую. Стандартный способ — это сделать href=»/page/{{page}}» и роутером перехватывать. НО! такая работа будет перегружать контроллер полностью, что очень плохо для быстродействия. Поэтому мы применяем 11_locationSkipExtension.js директиву, и Вам советуем!
Для этого добавим действие запоминания страницы в пути и будем это учитывать при перезагрузке (в параметрах он как действие, но тут Вы на самом деле можете поиграться с правилами роутера и сделать удобное для себя. Окончательный вид контроллера.
Показ одной статьи или как индексировать данные без базы данных в Angular
Как и все в программировании показ одной статьи на весь экран можно сделать по-разному. Способ самый простой — в отдельный контроллер. Тут все ясно, но не очень интересно, тк я например больше люблю более гибкие к дизайну вещи, а если мы завяжемся на второй контроллер, то потеряем все что в первом было, или нам придется дублировать, или инициализировать контроллер в отдельном блоке кода… в общем самое простое, но самое ограниченное решение.
Второй способ — внутренняя функция, куда предавать собственно весь объектик статьи и не искать в закромах его (помните, поиск каждой по большому массиву — зло). Но вот только если мы захотим опять таки сохранить ссылку — в ссылке весь объект нельзя. Так что лучше сразу идти к номерам.
Третий способ — внутренняя функция, куда предавать уникальный идентификатор. Здорово все, кроме одного — у нас прийдется запускать поиск каждый раз при переходе. И это перебор либо использование индексного массива
Отсюда собственно наш избранный способ — привет индексы внутри самого объекта. Track by не подходит только потому что наш массив урезанный… а при переходе по ссылке мы никогда не можем быть уверенны в нарезке
Финальный вариант сайта без базы данных в Angular
Отформатируем аккуратно и сделаем развилку на входном урле — или это статья, или это страница (если нет — то первая страница). Упорядочим роутер также
(смущает меня когда переменная с айди называется «действие»).
