AngularJS UI路由器不能像ng路由器那样工作

AngularJS UI-Router does not work as the way ng-router works

本文关键字：路由器 ng 工作 UI 不能 AngularJS      更新时间：2023-09-26

我正在尝试使用angular ui路由器库，它比ng路由器有更多的功能。然而，ng路由器在页面中工作，而ui路由器不工作。

角度代码

    $stateProvider
        .state('map.main', {
        url: '/',
        template: '<h1>My Contacts</h1>'
    });
    //$routeProvider.when(
    //"/", {
    //    template: '<h1>My Contacts</h1>'
    //});
   $locationProvider.html5Mode(false);

HTML代码非常简单带有一个用于ng视图或ui视图的div标记。

有人能想到任何问题吗？

有一个工作的plunker

你需要调整你的状态定义，至少像这个一样

.state('map', {
  abstract: true,
  template: '<div ui-view=""></div>',
})
.state('map.main', {
  url: '/',
  template: '<h1>My Contacts</h1>'
});

我们可以看到，有一个新的状态"map"，它是"map.main"的父级。如果我们想拥有状态"map.man"，这是一个必须。点（.）是UI路由器的信息，该状态被构建为层次结构（父映射，子主）

此外，在我们的index.html中，我们必须创建一个目标：

<div ui-view=""></div>

这将作为我们家长的占位符。然后将子对象注入父对象的template: '<div ui-view=""></div>',

在这里查看

尝试在这里阅读更多：

  • UI路由器wiki
  • contact.js的示例应用程序及其伟大的状态定义

您在声明子路由时没有定义父路由，您应该先声明父状态，然后添加您的代码

代码

$stateProvider
.state('map', {
    abstract: true, //you can't call it directly
    template: '<div ui-view=""></div>'
}).state('map.main', {
    url: '/',
    template: '<h1>My Contacts</h1>'
});
相关文章：