javascript - example - ¿Cómo usar ui-router angular con webpack?
ui-router angular 6 (1)
Solo estoy publicando los fragmentos de código relevantes y espero que eso me ayude a explicar la situación.
Tengo la configuración del paquete web, y todos los controladores y las directivas funcionan por separado. Sin embargo, no entiendo cómo usar el ui-router angular con el paquete web. No entiendo cómo vincular el image-list.html a la plantilla en el $ stateProvider. Ya estoy importando la plantilla en el archivo app.js, por lo que no sé por qué la plantilla no se muestra en localhost. Los controladores para cada una de las plantillas se definen en sus archivos .js.
¿Cuál es la forma correcta de decirle al ui-enrutador que abra primero image-list.html, y una vez que lo hago, ¿cómo voy de image-list.html a tagger.html en la misma página?
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>
No necesita importar temlate a app.js, solo use la función ''requerir'':
app.js
$stateProvider.state(''psa'',{
url:''/'',
template: require(''./image-list.html'')
})
Acerca de la navegación de vistas anidadas, consulte esta respuesta Router Angular UI: ¿diferentes estados con la misma URL? .