javascript - AngularJS UI-Router 的工作方式与 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”的父级。如果我们想要状态“map.main”，这是必须。点(.)是UI-Router的信息，状态被构建为层次结构(父映射，子主映射)

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

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

这将作为我们父级的占位符。然后 child 将被注入(inject) parent 的 template: '<div ui-view=""></div>',

检查一下here

尝试在这里阅读更多内容:

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