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

Question

我正在尝试使用 angular ui-router 库，它比 ng-router 具有更多功能。但是，ng-router 在页面中工作，而 ui-router 不工作。

Angular代码

    $stateProvider
        .state('map.main', {
        url: '/',
        template: '<h1>My Contacts</h1>'
    });

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

HTML代码很简单带有用于 ng-view 或 ui-view 的 div 标签。

大家能想出什么问题吗？

Answer 1

有a working plunker

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

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

我们可以看到，有一个新状态 "map"，它是 "map.main" 的 parent。如果我们想要状态 "map.main"，这是必须。点 (.) 是关于 UI-Router 的信息，即状态构建为层次结构（parent 地图，child 主要）

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

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

这将作为我们的 parent 的占位符。 Child 将被注入 parent 的 template: '<div ui-view=""></div>',

检查一下here

尝试在此处阅读更多内容：

UI-Router wiki
示例应用程序及其出色的状态定义contact.js

Answer 2

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

代码

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

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

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

javascript

angularjs

angular-routing

angular-ui-router