Question

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

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

这是我的应用，它基于角度示例应用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

参考这个问题： Angular - UI.Router not loading component

如果您使用的是0.3.x，则无效。升级到1.0.0（我认为测试版是最新的）并试试请。

组件属性可以从ui-router@1.0.0获得（参见here和CHANGELOG.MD - 它是在1.0.0-aplpha中添加的）因此它不可用0.3.1

另请参阅我对类似帖子的回答 - https://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component

Answer 2

尝试将状态变量更改为：

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

不幸的是，ui-router组件指南似乎没有以这种方式解释，我会继续寻找更多信息来告诉你原因。

AngularJS：ui-router组件未显示

2 个答案: