AngularJS : ui-路由器组件未显示

Question

我正在尝试编写一个简单的 angular 应用程序，它使用 angular ui-router 在我的应用程序中显示组件。

我可以使用模板和控制器让它工作，但是当我重构组件时它们不会在屏幕上呈现。我也没有收到任何控制台错误。

这是我的应用程序，它基于 angular 示例应用程序 Hello Solarsytem

app.js

var myApp = angular.module('materialThings', ['ui.router']);

myApp.config(function ($stateProvider) {
    // An array of state definitions
    var states = [
        {
            name: 'about',
            url: '/about',
            component: 'about'
        }
    ]

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

myApp.run(function($rootScope) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
});

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <script src="about.js"></script>

</head>
<body ng-app="materialThings">

<a ui-sref="about" ui-sref-active="active">About</a>

<ui-view></ui-view>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->

</body>

about.js

angular.module('materialThings').component('about', {
    template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})

Answer 1

尝试将您的状态变量更改为：

 var states = [
    {
        name: 'about',
        url: '/about',
        template: '<about></about>'
    }
]

不幸的是 ui-router guide 到组件似乎没有这样解释，我会继续寻找更多来告诉你为什么。

Answer 2

参考这个问题：

如果您使用的是 0.3.x，那将不起作用。升级到 1.0.0（我认为测试版是最新的）并尝试。

component attribute is available from ui-router@1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1

另请参阅我的类似回答 post -

AngularJS : ui-路由器组件未显示

AngularJS : ui-router components not showing

angularjs

angular-ui-router

angularjs-components