AngularJS + AngularJS Material + WooCommerce API. App routing
We continue creating web application with WooCommerce API, AngularJS and AngularJS Material.
Today we’ll make configuration for our app.
Today we’ll make configuration for our app.
For routing configuration in AngularJS apps $routeProvider is using. Also for human readable urls we will use $locationProvider service
Code lesson (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>Code lesson (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 Comments