angular ui-路由器路由注册

Question

我尝试将嵌套的多个视图与 angular ui-路由器一起使用但这不起作用:

我的代码在这里：

App.config(['$stateProvider', function ( $stateProvider) {


    $stateProvider.state({
        "name": "app",
        "url": "/{locale:[a-z]{2}}",
        "abstract": true,
        "views": {"content": {"templateUrl": "views/front/home-1.0.0.html", "controller": "homeCtrl"}}});
    $stateProvider.state({
        "name": "app.home",
        "url": "",
        "views": {
            "content@app": {"templateUrl": "views/front/home-1.0.0.html", "controllerl": "homeCtrl"}
        }});
    $stateProvider.state({
        "name": "app.signin",
        "url": "/signin",
        "views" : {
            "content@app" : {"templateUrl": "views/front/signin-1.0.0.html", "controller": "signinCtrl"}
        }
    });
}])

我不知道如何为我的代码创建状态对象。

目前我只有一个观点。我的 Html 代码：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="utf-8">

    <script src="/assets/js/App/App.js" type="text/javascript"></script>
</head>
<body>
    <h1>App</h1>
    <nav>
        <a ui-sref="app.home({locale:'fr'})">{{link.home}}</a>
        <a ui-sref="app.signin({locale:'fr'})">{{link.signin}}</a>
    </nav>
     <div ui-view="content">
    </div>
</body>

Plunkr 来了：

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

Answer 1

您需要更改当前呈现视图的方法。 Main html 将包含 <div ui-view=""></div> ，它将使用包含 ui-view="content" 的模板加载父路由，因此内部部分将通过 [=14= 的 views 部分加载].

代码

App.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
    $stateProvider.state({
      "name": "app",
      "url": "/{locale:[a-z]{2}}",
      "abstract": true,
      template: '<div ui-view="content"></div>'
    });
    $stateProvider.state({
      "name": "app.home",
      "url": "/home",
      "views": {
        "content": {
          "templateUrl": "home-1.0.0.html",
          "controllerl": "homeCtrl"
        }
      }
    });
    $stateProvider.state({
      "name": "app.signin",
      "url": "/signin",
      "views": {
        "content": {
          "templateUrl": "signin-1.0.0.html",
          "controller": "signinCtrl"
        }
      }
    });
  }
])

Working Plunkr

angular ui-路由器路由注册

angular ui-router route registration

angularjs

angular-ui-router