AngularJS + AngularJS Material + WooCommerce API. Orders list page template

Home » Tutorials » JavaScript » AngularJS + AngularJS Material + WooCommerce API. Orders list page template
Last lesson we got orders list from our Woocommerce e-shop. Today we will make the template for rendering orders list using AngularJS Material.
AngularJS has its own template system – the layout system, based on flex layout. Also it has capability to create responsive templates. You can read more about AngularJS layout system by this link.
Code lesson (orders.html)
<div data-layout="row" data-layout-padding data-ng-cloak>
	<div>
		<h1>{{pageName}}</h1>
	</div>
</div>

<div layout="row" layout-padding ng-cloak ng-init="getOrders()">
    <div flex-gt-sm="100" flex>
        <md-content id="orders-list">
            <md-list flex ng-if="orders.length">
                <md-list-item class="md-3-line" ng-repeat="order in orders" ng-click="null">
                    <div class="md-list-item-text" layout="column">
                        <p><strong>ФИО покупателя:</strong> {{order.shipping.first_name}} {{order.shipping.last_name}}
                        </p>
                        <p><strong>Статус заказа: </strong>{{order.status}}</p>
                        <p><strong>Дата заказа: </strong>{{order.date_created | date:'dd.MM.yyyy'}}</p>
                        <p><strong>Способ оплаты: </strong>{{order.payment_method_title}}</p>
                    </div>
                    <span><strong>Сумма заказа: </strong>{{order.total}} {{order.currency}}</span>
                    <md-button ng-click="deleteOrder(order.id)" class="md-raised md-warn">Аннулировать заказ</md-button>
                    <md-divider></md-divider>
                </md-list-item>
            </md-list>
        </md-content>
    </div>
</div>
Code lesson (script.js)
'use strict'
		
let app = angular.module('shop', ['ngMaterial', 'ngMessages', 'ngRoute']);
app.constant('API_URL', 'https://codetogether.ru/wp-json/wc/v3/');

app.config(function($httpProvider){
	let auth = window.btoa('ck_000e1f9b7fd5200992a3fdb46f982c495ac721f8:cs_93ff2e592ee90b6c54d45abe78277b0992684979');
	$httpProvider.defaults.headers.common.Authorization = 'Basic ' + auth;
});

app.config(function($mdThemingProvider, $routeProvider, $locationProvider){
	$mdThemingProvider.theme('primary').primaryPalette('blue').accentPalette('orange');
	$routeProvider
		.when(
			'/products', {
				templateUrl: 'templates/products.html',
			    controller: 'productsController'
			}
		)
		.when(
			'/product', {
				templateUrl: 'templates/product.html',
				controller: 'productController'
			}
		)
		.when(
			'/product/:id', {
				templateUrl: 'templates/product.html',
				controller: 'productController'
			}
		)
		.otherwise({
			templateUrl: 'templates/orders.html',
			controller: 'ordersController'
        }) 
		$locationProvider.html5Mode({
			enabled: true
		});
});


app.controller('mainController', function($scope) {
	$scope.currentNavItem = 'orders';
});

app.controller('ordersController', function ($scope, $http, $mdDialog, API_URL) {
	$scope.pageName = 'Заказы';
	$scope.orders = [];
	
	$scope.getOrders = function() {
		$http.get(API_URL + 'orders').then(
			result => $scope.orders = result.data
		);
	}
});

app.controller('productsController', function ($scope, $http, $mdDialog) {

});

app.controller('productController', function ($scope, $http, $routeParams, $mdDialog, $filter, $location) {

});
Code lesson (/manger/index.php)
<?php
	session_start();
	if (!$_SESSION['user']) {
		header('Location: /');
		exit();
	}
?>
<!DOCTYPE html>
<html data-ng-app="shop">
<head>
	<meta charset="UTF-8">
	<title>Управление магазином</title>
	<base href="/manager/">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
	<link rel="stylesheet" href="css/angular-material.min.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div ng-controller="mainController" ng-cloak>
		<md-nav-bar md-selected-nav-item="currentNavItem">
			<md-nav-item md-nav-href="orders" name="orders">
			  Заказы
			</md-nav-item>
			<md-nav-item md-nav-href="products" name="products">
			  Товары
			</md-nav-item>
			<md-nav-item md-nav-href="add-product" name="addProduct">
				Добавить товар
			</md-nav-item>
		</md-nav-bar>
</div>	  

	<div ng-view></div>

	<script src="js/angular.min.js"></script>
	<script src="js/angular-route.js"></script>
	<script src="js/angular-animate.min.js"></script>
	<script src="js/angular-aria.min.js"></script>
	<script src="js/angular-messages.min.js"></script>
	<script src="js/angular-material.min.js"></script>
	<script src="js/script.js"></script>
</body>
</html>

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This