Question

我不知道我做错了什么，但这就是我想要的。

首先，这是我的身体：

 <body>
    <div ng-app="testApp" ng-controller="MainController" class="container-fluid">
        <div ui-view class="row"></div>
    </div>

  </body>

现在，在ui-view中，我想要一些内容，具体取决于URL。首先，将有包含其他州的家乡。

 - Home
     - Recent Studies
     - Studies
 - Map
     - Study

为此，我正在尝试创建路由层次结构。这将是我的主页模板（home.html），一个抽象的模板，将在ui-view上面：

<div ng-controller="HomeController">
    <header>
        <div class="row">
            <div class="col-xs-6">Test Web Application</div>
            <div class="col-xs-6">
                <p class="pull-right">Bonjour 
                  <strong>{{currentAccount.name}}</strong> ! 
                  <a href="#">Déconnexion</a></p>
            </div>
        </div>
    </header>

    <article class="row">
        <div ui-view></div>
    </article>

</div>

这是最近的研究（home.recentStudies.html.twig），我想把它放在home.html的ui-view中：

<p>Recent studies</p>

以下是路线定义：

angular.module('testApp').config(['$stateProvider', '$urlRouterProvider',
 function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/recentStudies');
    $stateProvider
        .state('home', {
            url: '/',
            abstract: true,
            templateUrl: 'partials/home.html'
        })
        .state('home.recentStudies', {
            url: '/recentStudies',
            templateUrl: 'partials/home.recentStudies.html'
        })
        .state('home.studies', {
            url: '/studies',
            templateUrl: 'partials/studies.html'
        })
    ;

}]);

我的问题是，当我加载应用程序时，一切都是空白的，我似乎不明白这个问题。

似乎我不能在plnkr中使用templateUrl所以我直接将代码转移到模板中：

http://plnkr.co/edit/kGIxPSNXGy2MLLhXFXva?p=preview

Answer 1

关键是父母和子女网址的组合。这很容易实现

url: '/',

检查here

为什么呢？因为一个孩子的国家的url，是从它的祖先建立的。所以'home'州有网址url: '/recentStudies',而子'home.recentStudies'有'//recentStudies'

这一切意味着 - 完整的网址是这些的接触=== .state('home.recentStudies', { url: '^/recentStudies', ... $urlRouterProvider.otherwise('/recentStudies');

但这不是最佳方式。我们可以对孩子使用重置：

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

然后甚至原始默认的东西都会起作用。检查here

检查文档：

Absolute Routes (^)

如果你想要绝对的url匹配，那么你需要在你的url字符串前加上一个特殊符号'^'。

<settings>
  .
  .
  <proxies>
   <proxy>
      <id>example-proxy</id>
      <active>true</active>
      <protocol>http</protocol>
      <host>proxy.example.com</host>
      <port>8080</port>
      <username>proxyuser</username>
      <password>somepassword</password>
      <nonProxyHosts>www.google.com|*.example.com</nonProxyHosts>
    </proxy>
  </proxies>
  .
  .
</settings>

AngularJS UI-Router - 无法获得嵌套状态以显示模板

1 个答案:

Absolute Routes (^)