Angular 组件不呈现模板

Question

基于UI-Router ( https://ui-router.github.io/ng1/tutorial/hellogalaxy ) 的教程，我的 Angular 应用程序中有这些状态：

angular
    .module('appRoutes', ["ui.router"])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

    // An array of state definitions
    var states = [
      { name: 'home', url: '/', component: 'home' },
      { name: 'about', url: '/about', component: 'about' },

    ]

    // Loop over the state definitions and register them
    states.forEach(function(state) {
      console.log(state.component)
      $stateProvider.state(state);
    });

    $urlRouterProvider.otherwise('/');
}]);

这是我的另一个包含模块声明的文件：

'use strict';

var talentforceApp = angular.module("talentforce", []);

angular
    .module('TalentForce_Application', [
        'appRoutes',
        'talentforce',
        'ngResource'
    ]);

以及这些简单组件之一的文件：

talentforceApp.component('about', {
  template:  '<h3>About TalentForce</h3>'
})

当我运行它时，我的控制台没有给出任何错误。 我检查了一下，确实保存了状态和组件。 它只是不渲染。 当我单击应用程序的“ About按钮时，没有模板，只有空白且没有错误。 由于没有错误，因此很难调试。 我在这里缺少什么？

Answer 1

angular.module('appRoutes').component('about', {
  template:  '<h3>Template</h3>'
})

Answer 2

您很可能已经为此找到了解决方案，但无论如何都可以解决。

在示例中，所有组件都是同一个 angular 模块（'hello'）的一部分，而您已将组件添加到单独的模块中。

您需要将TalentForce_Application作为依赖项添加到您的主模块appRoutes 。

 angular
    .module('appRoutes', ["ui.router", "talentforce"])
    ...