-1

I am working in an angular project which uses puikinsh/gentelella admin dashboard.When I use the ui.router the template's custom.min.js not working properly.

Which shows JQuery error : Dom elements undefined.

When I remove UI-Router it works perfectly. My question is how can I use gentelella admin dashboard with UI-Router? Please help me and thanks in advance.

Rahul K R
  • 191
  • 4
  • 20

1 Answers1

2

I cloned the repository and implemented ui-router it is working fine.

I used text editor and browser-sync as a server to run the theme.

Steps I followed:

1) Removed pageContent div from index.html and added the code in page-content.html file in same folder.
2) Added angular.min.js and angular-ui-router.min.js in 'vendor/angular' folder.
3) Create the route file /production/js/ui-routing.js as follow:

(function(){
  'use strict';

  angular.module('App', ['ui.router']);

  angular.module('App')
  .config(RoutesConfig);

  RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
  function RoutesConfig($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', {
      url : '/',
      templateUrl : '/production/page-content.html'
    });
  }
})();

add the path in index.html as below:

<script src="../vendors/angular/angular.min.js"></script>
<script src="../vendors/angular/angular-ui-router.min.js"></script>
<script src="js/ui-routing.js"></script>

4) Add this snippet in index.html file:

<div ng-app="App">
   <ui-view></ui-view>
</div>

Please note that your Html file path in a ui-routing.js can be different if you are not using a server to run the theme. Also, page-content.html may contain some paths that you need to change in order to display images and all. Other than that given solution works fine.

Nehal Soni
  • 186
  • 1
  • 9
  • Can you provide that index.html file and page-content.html – Rahul K R Mar 16 '17 at 08:34
  • I got error: DOMException: Failed to execute 'querySelectorAll' on 'Element': '*,:x' is not a valid selector. at http://localhost/opshub_rout/js/jquery.min.js:2:10517 – Rahul K R Mar 16 '17 at 08:52
  • Did you execute the mentioned step on fresh checkout? Please do that if you have done on your already modified files. For index.html and page-content.html all you have to do it cut this div from index.html and paste in page-content.html. I have done this way for confirming the working of theme on ui-router. You can add routes differently like for login page. Also, you can add this theme in GitHub with your changes and share the link if you need more help. – Nehal Soni Mar 16 '17 at 09:29
  • OK Now its working but side menu shows in login page also.How can I remove side bar from login page? – Rahul K R Mar 16 '17 at 09:40
  • As a good approach, you need to extract side menu in every HTML file and make a separate file i.e menu.html, then using directive add it in index so it will come by default in every file. Also to remove that in login add a condition that if route is i.e. '/login' Or if a user is not authenticated, then it should hide. Also if the answer is helping you then be a kind and accept/upvote it so others can take this into consideration. – Nehal Soni Mar 16 '17 at 09:52
  • Placing menu in seperate file and added multiple views ,one for content and other for menu.Now its not working . Can you provide me example? – Rahul K R Mar 16 '17 at 10:13
  • You need to create a directive. Also if are new to angular first get your hands on directives thoroughly, then ng-if/ng-show/ng-hide, controller, services, factory, components. I would suggest you to start from small demos and then implement those learning in theme. – Nehal Soni Mar 16 '17 at 10:21
  • Simply add ng-if condition to menu div when your route in on login page as an alternative of directive approach. – Nehal Soni Mar 16 '17 at 10:34