在 Angular-fullstack 上用 ui-router 替换 ng-router

Question

问题 1：url:/home, templateUrl: 'index.html 正在渲染两次。

问题 2：views: templateUrl: 'views/partials/main.html 根本没有被渲染

我错过了什么？如何将ui-router正确集成到yeoman的angular-fullstack generator？

app/scripts/app.js：

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
            url: '/home',
            templateUrl: 'index.html',
            views: {
                '': {
                    templateUrl: 'views/main.html'
                },
                'navigation@home': {
                    templateUrl: 'views/_partials/navigation.html',
                    controller: 'NavigationCtrl'
                },

                'menu@home': {
                    templateUrl: 'views/_partials/menu.html',
                    controller: 'MenuCtrl'
                },
                'weekly@home': {
                    templateUrl: 'views/_partials/weekly.html',
                    controller: 'WeeklyCtrl'
                },
                'sidepanel@home': {
                    templateUrl: 'views/_partials/side-panel.html',
                    controller: 'SidePanelCtrl'
                },
                'shoppanel@home': {
                    templateUrl: 'views/_partials/shop-panel.html',
                    controller: 'ShopPanelCtrl'
                },
                'footer@home': {
                    templateUrl: 'views/_partials/footer.html',
                    controller: 'FooterCtrl'
                }
            }
        });
    $locationProvider.html5Mode(true);
});

app/index.html

<div class="container" ui-view></div>

app/views/main.html

    <!-- z-100 fixed-->
<section ui-view="navigation" id="navigation"></section>

<!-- z-5 fixed-->
<section ui-view="weekly" id="weekly" class="panel" ></section>

<!-- z-10 relative top:100%; margin-bottom: 33%;-->
<section ui-view="content" id="content" ></section>




<!-- z-1 fixed height: 33%;-->
<section id="footer" ui-view="footer" ></section>

<!-- z-1 fixed -->
<section id="ui">

    <div ui-view="sidepanel" id="side-panel" class="panel"></div>
    <div ui-view="shoppanel" id="shop-panel" class="panel"></div>

</section>

/lib/routes.js

  app.route('/partials/*')
   .get(index.partials);
  app.route('/*')
   .get( index.index);

lib/controllers/index.js

var path = require('path');

/**
 * Send partial, or 404 if it doesn't exist
 */
exports.partials = function(req, res) {
  var stripped = req.url.split('.')[0];
  var requestedView = path.join('./', stripped);
  res.render(requestedView, function(err, html) {
    if(err) {
      console.log("Error rendering partial '" + requestedView + "'\n", err);
      res.status(404);
      res.send(404);
    } else {
      res.send(html);
    }
  });
};

/**
 * Send our single page app
 */
exports.index = function(req, res) {
  res.render('index');
};

Answer 1

嗯，我对您的代码有点困惑，但请尝试我的调整。我一直在研究一个准系统框架，它将 mongo/express/angular/node 与 jam 作为视图引擎，并且根据我在 github 上项目的 lib 目录中看到的内容，这些更改应该可以工作。

对于问题 #1，在您的 /libs/routes.js 中，更改：

app.route('/partials/*').get(index.partials);
app.route('/*').get( index.index);

到

app.get('/partials/*', index.partials);
app.get('/*', index.index);

对于问题 #2，在您的 app/scripts/app.js 中，更改：

 .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'index.html',
        views: {
          '': {
            templateUrl: 'views/partials/main.html'
          }
        }
      });
    $locationProvider.html5Mode(true);
  });

到

  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state('home', {
        url: '/home',

        views: {
            'navigation': {
                templateUrl: 'views/_partials/navigation.html',
                controller: 'NavigationCtrl'
            },

            'menu': {
                templateUrl: 'views/_partials/menu.html',
                controller: 'MenuCtrl'
            },
            'weekly': {
                templateUrl: 'views/_partials/weekly.html',
                controller: 'WeeklyCtrl'
            },
            'sidepanel': {
                templateUrl: 'views/_partials/side-panel.html',
                controller: 'SidePanelCtrl'
            },
            'shoppanel': {
                templateUrl: 'views/_partials/shop-panel.html',
                controller: 'ShopPanelCtrl'
            },
            'footer': {
                templateUrl: 'views/_partials/footer.html',
                controller: 'FooterCtrl'
            }
        }
      });
    $locationProvider.html5Mode(true);
  });

您已经在请求 index.html （通过 h t t p : // /#/home，index.html 默认情况下很可能由 Web 服务器加载），因此没有理由再次请求它在您的 app.js 文件中。此外，您已经在 routes.js 文件中定义了 /partials/* 路由，这就是 /views/partials 更改为 /partials 的原因。有点无意义的 IMO，你的 /views/partials/main.html 应该加载得很好，因为框架已经为 /tmp 和 /app 目录设置了明确的静态路由。

尝试访问您的部分并确保它们正在服务。如果你不能输入 h t t p : // //main.html 并取回文件的内容，ui-router 也将无法提取内容。请务必检查您的 DevTools 是否有 GET 错误。

对于任何错别字，我深表歉意。