如何在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