如何定義的WebPack

Question

在UI路由器多個UI的視圖如何使用的WebPack

我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來定義UI路由器多個視圖

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