npm start
command in the source directory (see Console commands page).
Angular version uses the next third-party plugins:
Angular → https://angularjs.org/
UI-Router → https://github.com/angular-ui/ui-router
ocLazyLoad → https://github.com/ocombe/ocLazyLoad
UI Bootstrap → https://angular-ui.github.io/bootstrap/
{angular_assets_path}
/
<!DOCTYPE html>
<html ng-app="yourApp">
<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="https://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="https://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>
<!-- Main view -->
<!-- You can use current state name for better customization -->
<ui-view class="{{ $state.current.name }}"></ui-view>
<!-- ==============================================================================
|
| SCRIPTS
|
=============================================================================== -->
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Core scripts -->
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ui-bootstrap.js"></script>
<script src="js/pixeladmin/util.js"></script>
<script src="js/pixeladmin/pixeladmin.js"></script>
<!-- Your scripts -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
</body>
</html>
To manage routes we use Angular UI-Router plugin (https://github.com/angular-ui/ui-router):
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.
Routing frameworks for SPAs update the browser's URL as the user navigates through the app. Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA.
UI-Router applications are modeled as a hierarchical tree of states. UI-Router provides a state machine to manage the transitions between those application states in a transaction-like manner.
To lazy load modules we use ocLazyLoad plugin (https://github.com/ocombe/ocLazyLoad).
function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
// Default url
$urlRouterProvider.otherwise('/pages/index');
$ocLazyLoadProvider.config({
debug: false
});
// Routes
$stateProvider
// "pages" namespace
.state('pages', {
abstract: true,
url: '/pages',
templateUrl: 'views/layout.html'
})
// "index" page in "pages" namespace
.state('pages.index', {
url: '/index', // #/pages/index
templateUrl: 'views/pages/index.html'
})
// "second" page in "pages" namespace
.state('pages.second', {
url: '/second', // #/pages/second
templateUrl: 'views/pages/second.html',
resolve: {
// Load plugins
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
serie: true, // Disable async loading
name: 'angular-morris', // Module name
files: ['js/libs/raphael.js', 'js/libs/morris.js', 'js/pixeladmin/directives/angular-morris.js']
},
{
name: 'bootstrap-datepicker', // Module name
files: ['js/libs/bootstrap-datepicker.js', 'js/pixeladmin/directives/angular-bootstrap-datepicker.js']
}
]);
}
}
});
};
function run($rootScope, $state) {
$rootScope.$state = $state;
}
angular.module('yourApp')
.config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', config])
.run(['$rootScope', '$state', run]);
angular.module('yourApp', [
'ui.router',
'oc.lazyLoad',
'ui.bootstrap'
]);
<!-- Main view -->
<div ui-view class="px-content"></div>
<!-- Page content -->
<p>Index page</p>
<!-- Page content -->
<p>Second page</p>