Question

我正在制作一个带有打字稿和组件的角度1应用程序。但是我的观点还没有加载。

我似乎无法弄明白为什么，ui-router正在工作，我的组件正在加载，如果我将它们包含在我的index.html中

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular typescript webpack</title>
</head>
<body ng-cloak>
    <a ui-sref="app.home" ui-sref-active="active">Hello</a>
    <a ui-sref="app.about" ui-sref-active="active">About</a>
    <messages-application></messages-application>
</body>
</html>

app.ts

import './modules/_application/index';
import './modules/about/index';

import 'angular';

angular.module('app', [ 'app.application', 'app.about']);
angular.bootstrap(document, ['app'], {
    strictDi: true
});

模块/ _Application / index.ts

import 'angular';
import 'angular-ui-router';

import {config as routesConfig} from './configs/routes';
import {MessagesApplicationComponent} from './components/messagesApplication/MessagesApplicationComponent';

angular.module('app.application', ['ui.router'])
    .component('messagesApplication', new MessagesApplicationComponent())
    .config(routesConfig);

模块/ _Application / CONFIGS / routes.ts

config.$inject = ['$stateProvider'];
export function config($stateProvider: ng.ui.IStateProvider): void {
    let abstractState: ng.ui.IState = {
        abstract: true,
        name: 'app',
        component: 'messages-application'
    };


    $stateProvider.state(abstractState);
}

模块/ _Application /组件/ messagesApplication / messagesApplicationComponent.ts

export class MessagesApplicationComponent implements ng.IComponentOptions {
    template: string = `
        <h1>Messages application</h1>
        <div ui-view></div>
        <h3>test</h3>`;
}

然后我有一条关于我的路线

模块/约/ index.ts

import 'angular';
import 'angular-ui-router';
import {PageAboutComponent} from './components/pageAbout/PageAboutComponent';
import {config as routesConfig} from './configs/routes';

angular.module('app.about', ['ui.router'])
    .component('pageAbout', new PageAboutComponent())
    .config(routesConfig);

模块/约/ CONFIGS / routes.ts

config.$inject = ['$stateProvider'];
export function config($stateProvider: ng.ui.IStateProvider): void {
    let aboutState: ng.ui.IState = {
        name: 'app.about',
        url: '/about',
        component: 'page-about',
        parent: 'app'
    };

    $stateProvider.state(aboutState);
}

模块/约/组件/ pageAbout / pageAboutComponent.ts

export class PageAboutComponent implements ng.IComponentOptions {
    public template: string = `
    <div>
        <ul>
            <li>Typescript</li>
            <li>Webpack</li>
            <li>Angular 1.4</li>
            <li>Karma</li>
            <li>Jasmine</li>
            <li>Istanbul coverage</li>
        </ul>
    </div>`;
}

任何人都知道我可能忘记或做错了什么？

使用anuglar-ui中的组件

0 个答案: