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

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

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

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

что мы должны получить в результате

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

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

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

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

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

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Редактор</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/admin.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href>Редактор</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a href="#pages">Страницы</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href target="_blank" class="glyphicon glyphicon-info-sign"></a>
            </li>
        </ul>
    </div>
</nav>
<div class="main_body">
 
</div>
<div class="footer">
    <p>(c) 2015</p>
</div>
</body>
</html>

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

<!doctype html>
<html lang="ru" ng-app="adminApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Редактор</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/admin.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="js/adminApp.js"></script>
    <script src="js/adminPagesCtrl.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href>Редактор</a>
    </div>
    <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a href="#pages">Страницы</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href target="_blank" class="glyphicon glyphicon-info-sign"></a>
            </li>
        </ul>
    </div>
</nav>
<div class="main_body">
    <div ng-view></div>
</div>
<div class="footer">
    <p>(c) 2015 {{status_text}}</p>
</div>
</body>
</html>

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

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

...
<html lang="ru" ng-app="adminApp">
...
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="js/adminApp.js"></script>
...

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

var adminApp = angular.module('adminApp', ['ui.bootstrap', 'ngRoute']);

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

var adminApp = angular.module('adminApp', ['ui.bootstrap', 'ngRoute', 'adminControllers']);
 
adminApp.config(['$routeProvider', function($routeProvider) {
	$routeProvider.
		when('/pages', {
			templateUrl: 'blocks/page/page-list.html',
			controller: 'adminPagesCtrl'
		}).
		otherwise({
			redirectTo: '/pages'
		});
}]);
var adminControllers = angular.module('adminControllers', []);

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

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

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

...
    <script src="js/adminPagesCtrl.js"></script>
...

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

adminControllers.controller('adminPagesCtrl', function ($scope, $http) {
	$http.get('api/pages/all.json').success(function(data) {
		$scope.pages = data;
	});
	$scope.orderProp = 'id'; //дефолтная сортировка
});

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

[{"id":"1","title":"title 1","url":"url 1","info":"info 1"},{"id":"2","title":"title 2","url":"url 2","info":"info 2"}]

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

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

<div ng-view></div>

blocks/page/page-list.html

<div class="page-header">
    <h1>Список Страниц <small>тут Вы можете видеть все страницы на сайте</small></h1>
    <a href>&nbsp;</a>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" ng-model="query" class="form-control" placeholder="Найти по названию...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Найти!</button>
                </span>
            </div>
        </div>
        <div class="col-md-5">
            <div class="btn-group" role="group">
                <button ng-click="orderProp='title'" type="button" class="btn btn-default">Упорядочить по названию</button>
                <button ng-click="orderProp='id'" type="button" class="btn btn-default">Упорядочить по порядку добавления</button>
            </div>
        </div>
        <div class="col-md-3">
            <a href="#/pages/add" class="btn btn-default">Добавить страницу</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3" ng-repeat="page in pages | filter:query | orderBy:orderProp">
            <h2><a href="#/pages/edit/{{page.id}}">{{page.title}}</a></h2>
            <p>{{page.info}}</p>
        </div>
    </div>
</div>

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

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

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

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

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">