AngularJS + AngularJS Material + WooCommerce API. Роутинг приложения
Мы продолжаем создание приложения с использованием WooCommerce API, AngularJS и AngularJS Material.
Сегодня мы создадим маршруты для нашего приложения.
Сегодня мы создадим маршруты для нашего приложения.
Для конфигурации маршрутов в AngularJS используется сервис $routeProvider. Также для использования ЧПУ мы будем использовать сервис $locationProvider.
Код урока (index.html)
<!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>Код урока (script.js)
app.config(function($mdThemingProvider, $routeProvider, $locationProvider, $httpProvider){
$mdThemingProvider.theme('primary').primaryPalette('blue').accentPalette('orange');
$routeProvider
.when(
'/orders', {
templateUrl: 'templates/orders.html',
controller: 'ordersController'
}
)
.when(
'/products', {
templateUrl: 'templates/products.html',
controller: 'productsController'
}
)
.when(
'/add-product', {
templateUrl: 'templates/add-product.html',
controller: 'addProductController'
}
)
.otherwise({
templateUrl: "templates/orders.html",
controller: 'ordersController'
})
$locationProvider.html5Mode(true);
});
0 Комментариев