Question

我刚刚开始使用ui-router，无法在ui-view模板下显示视图。

主模板如下所示

的index.html

<html ng-app="MyApp">
<head>
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
    This should be the header
</h4>
<div ui-view></div>

<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>

</body>
</html>

test.html只包含几行文字

app.js

angular.module('MyApp', ['ui.router'])
    .config(function($stateProvider) {
    $stateProvider
        .state('main', {
            url: '/',
            templateUrl: 'views/test.html',
            controller: 'MainCtrl'
          });
  })

在'/'页面上我只能看到一个标题而没有test.html text.Console没有错误。我在这里缺少什么？

Answer 1

选中此plunker，表明我们不忘记通过以下方式设置默认路线： $urlRouterProvider.otherwise("/"); 。因此，唯一的扩展是注入$urlRouterProvider并配置启动时的操作（否则）：

.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('main', {
            url: '/',
            templateUrl: 'test.html',
            controller: 'MainCtrl'
          });
})

查看example的实际效果。

注意：另外，不要混用使用ui-router和默认角度路由：

<script src="vendor/angular-ui-router.js"></script>
<!--<script src="vendor/angular-route.js"></script>-->

只需使用一个或另一个。您已经开始使用的ui-router，，应该/应该足够好......

无法在标头应用下获取ui-router显示视图

1 个答案: