Menu
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>
992
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?.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
