Question

好的。我被这部分困住了两天。我已经尝试了我所知道的一切。我已经加载了ui-router并定义了stateprovider。我有网站上的几个例子中显示的用户界面。但是当我跑步时，它并没有显示我的视角。

的index.html

<body  ng-app='ngBRep'>
<div>
    <div data-ng-include="'app/layout/shell.html'"></div>
</div>
<!--Angular-->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
</body>

Shell.html

<div data-ng-controller="shell as vm">
    SHELL
    <div ui-view></div>
</div>

Entry.html

<section id="entry-view" data-ng-controller="entry as vm">
    ENTRY
</section>

app.js

var app = angular.module('ngBRep', [
        'ui.router' 
]);

routes.js

var app = angular.module('ngBRep');

app.config(['$stateProvider', '$urlRouterProvider', routeConfigurator]);

function routeConfigurator($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");
    $stateProvider
      .state('/', {
          url: '/',
          templateUrl: 'app/views/entry.html'
      })
        .state('profile', {
            url: '/profile',
            templateUrl: 'app/views/profile.html'
        });
    // Send to login if the URL was not found

}

我的期望是当我浏览index.html时，我应该看到贝壳 PROFILE

但我只得到SHELL。

最糟糕的是，我们的项目中有一个现有的网站正是这样做的，并且它有效。

任何帮助将不胜感激。谢谢。

Answer 1

有一个有效的plunker。在这种情况下的问题与我们正在使用两个功能（实际上不是预期/未设计为一起工作）的事实相关：

ng-include - 填充 root 视图（通常是index.html的一部分）
ui-router - 定位尚未加载的 root
实际上，包含的执行时间晚于ui-router默认调用$urlRouterProvider.otherwise("/")）

因此，虽然此模板包含在根index.html

中

<div data-ng-controller="shell as vm">
    SHELL
    <div ui-view></div>
</div>

我们必须在其控制器中执行此操作：

app.controller('shell', function($scope, $state, ....){
   $state.go("/");
});

这样我们就可以解决加载时间差异（路由器已经准备好，然后包含模板，因此错过了目标）

检查here

angularjs中的stateprovider - 不呈现ui-view

1 个答案: