Question

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

Angular Code

    $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”的父级。如果我们想要状态“map.main”，这是必须。点（。）是UI-Router的信息，状态被构建为层次结构（父地图，子主体）

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

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

这将作为我们父母的占位符。然后将孩子注入父母的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-Router不像ng-router那样工作

2 个答案: