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
– Raphael, Commented Jul 28, 2017 at 14:51

Community · Accepted Answer · 2017-05-23 12:01:37Z

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, 2017 at 12:01

CommunityBot

11 silver badge

answered Nov 14, 2016 at 8:42

Oleg Drapeza

515 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use angular ui-router with webpack?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related