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

Question

I'm just posting the relevant bits of code and hope that helps me explain the situation. 我只是发布相关的代码，希望可以帮助我解释这种情况。

I have webpack set up, and all the controllers and directives work separately. 我已经设置了webpack，所有的控制器和指令都可以单独工作。 However, I do not understand how to use angular ui-router with webpack. 但是，我不明白如何在webpack中使用角度ui-router。 I do not understand how to link the image-list.html into the templateurl in the $stateProvider. 我不明白如何将image-list.html链接到$ stateProvider中的templateurl中。 I am already importing the template in the app.js file, so I don't know why the template does not show up in localhost. 我已经将模板导入到app.js文件中，所以我不知道为什么该模板没有显示在本地主机中。 The controllers for each of the templates are defined in their .js files. 每个模板的控制器都在其.js文件中定义。

What is the right way to tell the ui-router to open image-list.html first, and once I do that, how do I go from image-list.html to tagger.html in the same page? 什么是告诉ui路由器首先打开image-list.html的正确方法，一旦完成，如何在同一页面中从image-list.html转到tagger.html？

app.js 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 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 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

You don't need import temlate to app.js, just use 'require' function: 您不需要将temlate导入app.js，只需使用'require'函数：

app.js app.js

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

About nested views navigation, see this answer Angular UI Router: Different states with same URL? 关于嵌套视图导航，请参见以下答案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