angularjs - angularjs 中带有 ui-router 的 Puikinsh/gentelella 管理仪表板

Question

我正在一个使用puikinsh/gentelella 管理仪表板的 Angular 项目中工作。当我使用 ui.router 时，模板的 custom.min.js 无法正常工作。

其中显示 JQuery 错误：未定义的 Dom 元素。

当我删除 UI-Router 时，它可以完美运行。我的问题是如何将 gentelella 管理仪表板与 UI-Router 一起使用？请帮助我，并提前感谢。

Answer 1

我克隆了存储库并实现了 ui-router 它工作正常。

我使用文本编辑器和浏览器同步作为服务器来运行主题。

我遵循的步骤：

1) 从 index.html 中删除 pageContent div，并在同一文件夹中的 page-content.html 文件中添加代码。
2) 在“vendor/angular”文件夹中添加了 angular.min.js 和 angular-ui-router.min.js。
3) 创建路由文件 /production/js/ui-routing.js 如下：

(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'
    });
  }
})();

在 index.html 中添加路径如下：

<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) 在 index.html 文件中添加此代码段：

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

请注意，如果您不使用服务器来运行主题，您在 ui-routing.js 中的 Html 文件路径可能会有所不同。此外，page-content.html 可能包含一些您需要更改以显示图像和所有内容的路径。除了给定的解决方案工作正常。