PHP + AngularJS: Первый сайт не комом. Часть 2. Админ часть (список страниц)

Для того чтобы научиться программировать нужно пробовать программировать самые простые, но функциональные вещи. Чтобы лучше понять как сделать «свой первый самый лучший в мире» сайт — рассмотрим пример элементарного сайта из одного уровня объектов — страниц. Нам нужно

• 1) создать базу данных с таблицей страниц сделано
• 2) создать страницы редактирования страниц)))
• 3) создать отображение страниц из базы на сайте

Готовый код, по которому будет идти рассказ что где и почему. Пример простейшего сайта с админкой в связке PHP + AngularJS, первая часть описания

Результат выполнения этой части

Структура директорий

cp — собственно главный корень «администрирования» (сокращение от слов «контрольная панель»)

cp/favicon.ico — такой красивый ярлык для браузера

cp/index.html — главный файл (тк у нас админка на яваскрипте — мы не используем в этом файле php, хотя могли бы… пока сделаем без для упрощения — тут нам нужен только яваскрипт)

cp/index.html каким он был бы без ангуляра!

cp/index.html как меняет код ангуляр (инициализация приложения и подгрузка скриптов)

Инициализация главной части — приложения adminApp

cp/index.html обратите внимание на инициализацию «приложения»

js/adminApp.js собственно тут наше мегаприложение — это был бы самый простой вариант

js/adminApp.js но мы сразу хотим красивые кнопочки чтобы работали (т.е. на разные кнопки в индексе разные действия, шаблоны и контроллеры).
Центральная часть этого кода достаточна стандартна по логике ($routeProvider). Хоть на яваскрипте, хоть на пхп, такой код всегда называется роутером — он определяет переходы на кнопках (что когда запускается на какое действие).

otherwise — первое что попробует запустится, когда Вы скопируете этот код и запустите… и он соответственно уходит на when(‘/pages’), где нам сразу выведет — а где контроллер страниц (adminPagesCtrl), а где текст для хтмл (blocks/page/page-list.html)…

Инициализация контроллера PagesCtrl

cp/index.html обратите внимание на инициализацию — она у нас в отдельном файле, потом (при сборке) все можно в один сливать, но это уже потом потом

js/adminPagesCtrl.js первая загрузка данных

api/pages/all.json при первичной разработке вы можете даже сделать просто файл с таким путем, не подключая базу данных и тд

Шаблон для вывода данных

cp/index.html обратите внимание на «место» для вывода — собственно сюда выведутся формочки определенные в роутере

blocks/page/page-list.html

Стили для блоков и откуда такая именно верстка — можно понять поигравшись с примерами bootstrap. Bootstrap и Foundation CSS — две основных библиотеки, используемых мною для верстки аки программист. Т.е. если дизайн не важен, или дизайн будет сделан позже части кода — то легче сразу использовать готовые стили для верстки страниц, чтобы уже сразу было красиво.

Если Вы все сделали правильно — то увидите на этой странице список страниц из данных джейсона, если нет — будут выведены ошибки и исправив их — опять таки список страниц. Пожайлуста, поставьте средства отладки яваскрипта вроде Firebug, запустите консоль и посмотрите что пишет. Умение правильно понимать сообщения о ошибках — одно из важнейших! Компьютер не может лгать — он говорит именно то, что Вы спросили, если ответ не устраивает Вас — поменяйте вопрос. Если результат кода не соответствует Вашим ожиданиям — разбирайтесь где Вы попросили не то

Для того чтобы узнать, как же все таки добавлять страницы — идем ко второй части второй части — создание записи в базе данных через angular. Также стоит прочитать все записи с тегом ангуляр и оставлять вопросы/комментарии, это позволяет мне узнавать о чем еще стоит написать.