Question

如何使用Webpack在UI路由器中定义多个视图

我的example.component.js文件

import exampleHtml from './example.html';
import headerHtml from '../view/header.html';

let exampleComponent = {
    template: exampleHtml,
    controllerAs: 'example',
    controller: function(exampleService) {
        const vm = this;
        vm.title = exampleService.title();
        //   alert('hi');
    }

}

export default exampleComponent;

我的example.module

import angular from 'angular';
import routing from './example.route';
import component from './example.component';
import service from './example.service';

angular
  .module('example', [])
  .component('example', component)
  .factory('exampleService', service)
  .config(routing);

我的example.route

function exampleRoutes($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.when('', '/example');
    $urlRouterProvider.when('/', '/example');

    $stateProvider
        .state('example', {
            url: '/example',
            component: 'example'
        })
}

export default exampleRoutes;

基本上我找到了一种为一个视图定义路由的方法，但我想在使用Ui路由器的路由中加载多个视图

例如：在我的route.js

中

    $stateProvider
        .state('example', {
            url: '/example',
            views: {
                'header_part': { templateUrl: '../view/header.html' },
                '': { templateUrl: '../view/header.html' },
                'foot_part': { templateUrl: '../view/header.html' }
            },
            component: 'example'
        })
}

但是它产生的错误无法加载header.html错误

我从这个代表https://github.com/KarlDoyle/angular-es6-webpack-starter分发了

Answer 1

您可以在多个视图中使用组件，例如enter link description here

如何在webpack中的ui路由器中定义多个ui-views

1 个答案: