如何使用帶有webpack的角度ui路由器？

我只是發佈了相關的代碼，希望能幫助我解釋這種情況。如何使用帶有webpack的角度ui路由器？

我有webpack設置，所有的控制器和指令單獨工作。但是，我不明白如何使用帶有webpack的角度ui路由器。我不明白如何將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' 
    }); 



});

圖像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>

來源

2016-06-14 McFiddlyWiddly

我面臨着同樣的困難，你如何將html文件加載到dist文件夾。你是否能夠解決這個問題。誠摯地分享你的webpack.config文件。 – user1645290

你不需要進口temla TE到app.js，只要使用 '需要' 功能：

app.js

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

關於嵌套的看法導航，看到這個答案Angular UI Router: Different states with same URL?。

來源

2016-11-14 08:42:21

如何使用帶有webpack的角度ui路由器？

回答

相關問題