javascript - Angular 从 ng-Route 到 Ui.Router

Question

我正在尝试从 ng-Route 转到 ui.router，但我似乎无法让它工作。它一直给我一个错误，我的应用程序不断崩溃。

这就是我设置 app.js 的方式:

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);
});

这是 Jade 索引文件:

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

在指定 url 链接时，您应该使用 ui-sref 指令，并使用元素指令 ui-view 指定将加载部分 View 的元素，如下所述:

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'")