angularjs中的stateprovider - 不呈现ui-view答案

【问题标题】：stateprovider in angularjs - not rendering the ui-viewangularjs中的stateprovider - 不呈现ui-view
【发布时间】：2026-01-07 17:35:01
【问题描述】：

好的。我被这部分困住了两天。我已经尝试了我所知道的一切。我已经加载了我的 ui-router 并定义了 stateprovider。我的 UI 如网站中的几个示例所示。但是当我运行时，它没有显示我的 ui 视图。

索引.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 时，我应该会看到壳简介

但我只得到壳。

最糟糕的是，我们的项目中有一个现有的网站可以做到这一点并且可以正常工作。

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

【问题讨论】：

您的 index.html 中是否有 app.js 的脚本元素和 routes.js 的另一个脚本元素？
profile.html 在哪里？

标签： angularjs angular-ui-router

【解决方案1】：

有一个有效的plunker。本例中的问题与我们使用了两个功能（实际上不期望/不设计为一起工作）：

ng-include - 填充 root 视图 （通常是 index.html 的一部分）
ui-router - 定位 root，尚未加载
事实上，include 的执行晚于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

【讨论】：

感谢 Radim。那行得通。我检查了其他正在运行的代码，它在 app.js app.run(['$route', '$rootScope', '$q', '$state', function ($route , $rootScope, $q, $state) { }]);
[cont] 虽然函数内部什么都没有，但我猜 $route 的注入，$routeScope 做了一些伎俩。
其实这引入了新的问题。当我尝试通过在浏览器中提供 url 直接浏览 /profile/series 时，它总是转到“/”，因为我有 $state.go("/");在 shell 和 shell 中首先加载。请帮忙。如果你想要我的新 routes.js，请告诉我
找到了支持我第二条评论的链接。 github.com/angular/angular.js/issues/4957