Angular version

To launch Angular version you need to install local server or run npm start command in the source directory (see Console commands page).

Intro

Angular version uses the next third-party plugins:

Directory structure

Basic layout


<!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.1.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>

Routing / Lazy load

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).

Example

js/config.js

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]);
js/app.js

angular.module('yourApp', [
  'ui.router',
  'oc.lazyLoad',
  'ui.bootstrap'
]);
views/layout.html

<!-- Main view  -->
<div ui-view class="px-content"></div>
views/pages/index.html

<!-- Page content  -->
<p>Index page</p>
views/pages/second.html

<!-- Page content  -->
<p>Second page</p>