Create New Page

Blur admin uses Angular UI router for navigation. That means to create new page you need to basically configure ui-router state.

We strongly recommend to follow pages structure in your application. If it doesn’t fit your needs please create a GitHub issue and tell us why. We would be glad to discuss.

Also we recommend to put pages to separate modules. This will allow you to easily switch off some pages in the future if needed.

Page creation example

0) Let’s assume we want to create a blank page with title ‘My New Page’

1) Let’s Create a new directory to contain our new page inside of src/app/pages. Let’s call this directory myNewPage.

2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of src/app/pages/myNewPage:

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.myNewPage', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig() {

  }

})();

3) Then let’s create empty html file called my-new-page.html inside of src/app/pages/myNewPage.

4) Now let’s create ui router state for this page. To do this we need to modify module.js file we created on step 2:

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.myNewPage', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
        .state('myNewPage', {
          url: '/myNewPage',
          templateUrl: 'app/pages/myNewPage/my-new-page.html',
          title: 'My New Page',
          sidebarMeta: {
            order: 800,
          },
        });
  }

})();

5) Lastly, add the page to the parent module. Edit the pages.module.js file and add our new module to the dependency list, as well as to the sidebar definition object (for instance, under the item for "404 Page").

That’s it! Your can now open your new page either from sidebar or through hash URL.