{requirejs_assets_path}
/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>PAGE TITLE</title>
<!-- External stylesheets -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,800,300&subset=latin" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<!-- Core stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/pixeladmin.min.css" rel="stylesheet" type="text/css">
<link href="css/widgets.min.css" rel="stylesheet" type="text/css">
<!-- Theme -->
<link href="css/themes/clean.min.css" rel="stylesheet" type="text/css">
<!-- Pace.js -->
<script src="pace/pace.min.js"></script>
</head>
<body>
<!-- Nav -->
<nav class="px-nav px-nav-left">...</nav>
<!-- Navbar -->
<nav class="navbar px-navbar">...</nav>
<!-- Content -->
<div class="px-content">...</div>
<!-- Footer -->
<footer class="px-footer px-footer-bottom">...</footer>
<!-- ==============================================================================
|
| SCRIPTS
|
=============================================================================== -->
<!-- Core scripts -->
<script src="js/require.js"></script>
<script src="js/requirejs-config.js"></script>
<!-- Your scripts -->
<script src="js/main.js"></script>
</body>
</html>
Before using AMD modules, you need to include require.js
and requirejs-config.js
files
into the document's head
section:
<script src="path/to/js/require.js"></script>
<script src="path/to/js/requirejs-config.js"></script>
Default config:
require.config({
paths: {
jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min',
// Common
px: 'pixeladmin',
'px-libs': 'libs',
'px-bootstrap': 'bootstrap',
// Dependencies
Chartist: 'libs/chartist',
c3: 'libs/c3',
d3: 'libs/d3',
'datatables.net': 'libs/jquery.dataTables',
moment: 'libs/moment',
},
priority: ['jquery'],
});
You can redefine default paths using the require.config
method.
After you include required files, you need to configure the base url:
requirejs.config({
baseUrl: 'path/to/js',
});
Let's take the example of the paths configuration. Supposing you have the next structure of assets directory:
<script src="http://example.com/assets/js/vendor/pixeladmin/require.js"></script>
<script src="http://example.com/assets/js/vendor/pixeladmin/requirejs-config.js"></script>
<script src="http://example.com/assets/js/main.js"></script>
Configure paths in the main.js
file:
require.config({
baseUrl: 'http://example.com/assets/js/app',
paths: {
px: '../vendor/pixeladmin/pixeladmin',
'px-libs': '../vendor/pixeladmin/libs',
'px-bootstrap': '../vendor/pixeladmin/bootstrap',
Chartist: '../vendor/pixeladmin/libs/chartist',
c3: '../vendor/pixeladmin/libs/c3',
d3: '../vendor/pixeladmin/libs/d3',
'datatables.net': '../vendor/pixeladmin/libs/jquery.dataTables',
moment: '../vendor/pixeladmin/libs/moment',
},
});
After you include the required files and configure paths, you need to load core
pixeladmin.js
file before any PixelAdmin component. Then you can
use PixelAdmin components.
require(['jquery', 'app', 'px/pixeladmin', 'px/plugins/px-file'], function($, app) {
...
});