从ng-Route到Ui.Router的角度

时间:2017-06-22 08:27:00

标签: javascript angularjs angular-ui-router

我正试图从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);
});

这是玉石索引文件:

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

1 个答案:

答案 0 :(得分:1)

在指定url链接时,您应该使用ui-sref指令,并使用元素指令ui-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'")