如何在Webpack中使用角度UI路由器？

Question

我只是發布相關的代碼，希望可以幫助我解釋這種情況。

我已經設置了webpack，所有的控制器和指令都可以單獨工作。 但是，我不明白如何在webpack中使用角度ui-router。 我不明白如何將image-list.html鏈接到$ stateProvider中的templateurl中。 我已經將模板導入到app.js文件中，所以我不知道為什么該模板沒有顯示在本地主機中。 每個模板的控制器都在其.js文件中定義。

什么是告訴ui路由器首先打開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>

Answer 1

您不需要將temlate導入app.js，只需使用'require'函數：

app.js

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

關於嵌套視圖導航，請參見以下答案Angular UI Router：具有相同URL的不同狀態？ 。

如何在Webpack中使用角度UI路由器？

問題描述

1 個解決方案

解決方案1
2 2016-11-14 08:42:21

如何在Webpack中使用角度UI路由器？

問題描述

1 個解決方案

解決方案1 2 2016-11-14 08:42:21

解決方案1
2 2016-11-14 08:42:21