How to use angular ui-router with webpack?

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. However, I do not understand how to use angular ui-router with webpack. I do not understand how to link the image-list.html into the templateurl in the $stateProvider. 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. The controllers for each of the templates are defined in their .js files.

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?

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>

I am facing the same difficulty and how are you loading html files to dist folder. were you able to solve the issue.Kindly share your webpack.config file as well. — Raphael, Jul 28 '17 at 14:51

score 2 · Answer 1 · edited May 23 '17 at 12:01

2

You don't need import temlate to app.js, just use 'require' function:

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?.

edited May 23 '17 at 12:01

Community

1
1

answered Nov 14 '16 at 08:42

Oleg Drapeza

51
5

How to use angular ui-router with webpack?

1 Answers1