Блог

Главная - Вопросы по программированию - использование компонентов в anuglar-ui

использование компонентов в anuglar-ui

#angularjs #typescript #angular-ui-router

#angularjs #typescript #angular-ui-router

Вопрос:

Я создаю приложение angular 1 с машинописным текстом и компонентами. Но мои представления не загружены.

и я не могу понять, почему, пользовательский интерфейс-маршрутизатор работает, и мои компоненты загружаются нормально, если я включу их в свой 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
});

modules/_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);

modules/_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);
}

modules/_application/components/messagesApplication/messagesApplicationComponent.ts

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

и тогда у меня есть маршрут для моего about

modules/about/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);

modules/about/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);
}

modules/about/components/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>`;
}

кто-нибудь знает, что я могу забыть или сделать неправильно?

Комментарии:

1. вы получаете какие-либо ошибки? Что-нибудь, что подсказывало бы, что не так?

2. @toskv нет, ошибок нет

3. как вы загружаете файлы js?