角度路由不传递组件或视图

时间:2017-06-02 16:50:34

标签: javascript angular angular2-routing

移入Angular 2并使用了喷泉网络应用程序库开始使用。如果事情正常,那么为了我们应用程序的其余部分,我必须将我的代码移动到子目录。以为我只需要修改我在route.js中路由的路径,但仍然没有通过索引并显示任何视图。不知道为什么。

我的文件结构是这样的: enter image description here

我的routes.js是:

var ng = require('@angular/core');

var HelloComponent = require('./hello');

exports.STATES = [{
    name: 'App',
    url: '/',
    component: HelloComponent
}];

exports.MyUIRouterConfig = ng.Class({
    constructor: function() {},

    configure: function(uiRouter) {
        uiRouter.urlRouterProvider.otherwise(function() {
            return uiRouter.stateService.go('App');
        });
    }
});

我的index.js是:

var ng = require('@angular/core');
var ngPlatformBrowser = require('@angular/platform-browser');
var uiRouter = require('ui-router-ng2');
var myRoutes = require('./routes');

import 'bootstrap';

var HelloComponent = require('./hello');

module.exports = uiRouter.UIRouterModule({
    imports: [
        ngPlatformBrowser.BrowserModule
    ],
    declarations: [
        HelloComponent
    ],
    providers: [
        uiRouter.provideUIRouter({ configClass: myRoutes.MyUIRouterConfig })
    ],
    states: myRoutes.STATES,
    bootstrap: [uiRouter.UIView]
})(
    ng.Class({
        constructor: function() {}
    })
);

这里有索引视图,我得到的只是“loading ....”并且它不会继续显示注入的hello组件:

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="utf-8">
    <title>Volutus Management Portal</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
</head>

<body>
    <ui-view>Loading...</ui-view>
</body>

</html>

我在这里做错了什么?我该怎么做才能解决这个问题?

0 个答案:

没有答案