Angular von ng-Route nach Ui.Router

Question

Ich versuche von der ng-Route nach ui.router zu gehen, aber ich kann es nicht funktionieren sehen. Es gibt mir immer einen Fehler und meine App stürzt ständig ab.

Dies ist, wie ich mein Setup app.js haben:

var app = angular.module("loodgietersApp", ["ui.router"]); 

app.config(function($stateProvider, $urlRouterProvider, $locationProvider,$animateProvider) { 

$urlRouterProvider.otherwise('/'); 

$stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: 'partials/home.html' 
     }) 

     .state('24-uur-loodgieter-service', { 
      url: '/24-uur-loodgieter-service', 
      templateUrl: 'partials/24-hour-service.html' 
     }); 
$locationProvider.html5Mode(true); 
}); 

Dies ist der Jade-Indexdatei:

script(type="application/javascript" src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js") 

body 

div(class="nav-bar") 
ul 
    li 
    a(href="/24-uur-loodgieter-service") 

div(class="box") 
    div(class="animate-box page" ui-view my-scroll) 

    div(ng-include="'partials/includes/brands.html'") 

    div(ng-include="'partials/includes/specialisations.html'") 

    div(ng-include="'partials/includes/footer.html'") 

Answer 1

Während der URL-Link gibt, sollten ui-sref Direktive verwenden und Geben Sie auch das Element an, in das die Teilansichten geladen werden, indem Sie die Element-Direktive ui-view verwenden, wie unten erwähnt:

body 

div(class="nav-bar") 
ul 
    li 
    a(ui-sref="24-uur-loodgieter-service") 

div(class="box") 
    ui-view 

    div(class="animate-box page" ui-view my-scroll) 

    div(ng-include="'partials/includes/brands.html'") 

    div(ng-include="'partials/includes/specialisations.html'") 

    div(ng-include="'partials/includes/footer.html'")