如何使用带有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路由器？

回答

相关问题