如何在 webpack 中使用角度 ui-router？答案

【问题标题】：How to use angular ui-router with webpack?如何在 webpack 中使用角度 ui-router？
【发布时间】：2016-10-15 16:32:27
【问题描述】：

我只是发布相关的代码，希望能帮助我解释这种情况。

我已经设置了 webpack，所有的控制器和指令都是分开工作的。但是，我不明白如何将 angular ui-router 与 webpack 一起使用。我不明白如何将 image-list.html 链接到 $stateProvider 中的 templateurl。我已经在 app.js 文件中导入了模板，所以我不知道为什么模板没有出现在 localhost 中。每个模板的控制器都在它们的 .js 文件中定义。

告诉ui-router首先打开image-list.html的正确方法是什么，一旦我这样做了，我如何在同一页面中从image-list.html转到tagger.html？

app.js

import angular from "angular"
import imageList from "./image-list/image-list"
import tagger from "./image-tagger/tagger"
import 'angular-ui-router'
import { ImageService} from "./services/image-service"

angular.module('psa',['ui.router'])
.service("ImageService",ImageService)
.directive("imageList",imageList)
.directive("tagger", tagger)

.config(function($stateProvider, $locationProvider){
  $stateProvider
  .state('psa',{
    url:'/',
    templateUrl: imageList
  })
  .state('psa.engines',{
    url:'engines',
    template: 'these are engines'
  });



});

image-list.html

<div class="image-list">

  <div class="images-show" >
    <img ng-repeat="img in vm.imageListFromDatabase" ng-src="[privatesrc]">

  </div>
</div>

index.html

<!doctype html>
<html lang="en">
<head>
  <base href="http://localhost:8000/" />
  <title></title>
</head>
<body>

  <div ng-app="psa" style="display:flex">
      <div ui-view></div>
  </div>
<script src="http://0.0.0.0:8080/webpack.dev.js"></script>

</body>
</html>

【问题讨论】：

我面临同样的困难，你是如何将 html 文件加载到 dist 文件夹的。你能解决这个问题吗？也请分享你的 webpack.config 文件。

标签： javascript angularjs angular-ui-router

【解决方案1】：

你不需要将模板导入 app.js，只需使用 'require' 函数：

app.js

$stateProvider.state('psa',{
  url:'/',
  template: require('./image-list.html')
})

关于嵌套视图导航，请看这个答案Angular UI Router: Different states with same URL?。

【讨论】：