Question

我有一个简单的角度项目结构

app
   index.html
   view
       main.html
       home.html
       landingPage.html

Index.html看起来像

<body ng-app="myApp">
  <div ui-view>
  </div>
</body>

App.js文件看起来像

$urlRouterProvider.otherwise('/landingPage');
 $stateProvider.state('landingPage', {
            url: '/landingPage',
            abtract: true,
            templateUrl: 'view/landingPage.html'
 })
 .state('landingPage.home', {
            url: '/home',
            templateUrl: 'view/home.html'
 }).state('landingPage.main', {
            url: '/main',
            templateUrl: 'view/main.html'
 });;

和着陆页看起来像

    <header></header>
    <div>
            <div ui-view>
            </div>
    </div>

当我运行应用时，我看到了正确的标题，但没有看到home.html内容。我如何每次都使home.html默认？你可以看到我有抽象的真实，但这不起作用。我也尝试过ng-include，它有效但却出错[{1}}

示例plunker HOME应该在运行时显示但没有显示

Answer 1

尝试将状态主页中的网址设置为：

url: ''

希望有所帮助：）

Answer 2

您需要在着陆页上定义另一个ui-view，因为landingPage是home和main的父级，因为使用了.符号

如果您想设置default view for child state ui.router，可以使用常见问题解答来解释它，基本上您可以通过网址进行操作。

每次进入父状态将其重定向到子状态时，您都可以这样做：

$urlRouterProvider.when('/landingPage', '/landingPage/home');

在代码中将是这样的：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      var app = angular.module('yourApp', ['ui.router']);
      app.config(
        function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/landingPage');
          $urlRouterProvider.when('/landingPage', '/landingPage/home');
          $stateProvider
          .state('landingPage', {
            url: '/landingPage',
            abtract: true,
            template: ' <a ui-sref="landingPage.home">Home</a><a ui-sref="landingPage.main">Main</a><div ui-view></div>'
          })
          .state('landingPage.home', {
            url: '/home',
            template: '<div>HOME</div>'
          })
          .state('landingPage.main', {
            url: '/main',
            template: '<div>MAIN</div>'
          });
        }
      );
    </script>
  </head>
  <body ng-app="yourApp">
    <div ui-view>
    </div>
  </body>
</html>

这是一个plunker示例

为角度设置ui-view的默认视图

2 个答案: