Angularjs-ui-router 未在浏览器中显示模板的内容答案

【问题标题】：Angularjs-ui-router not showing contents of template in browserAngularjs-ui-router 未在浏览器中显示模板的内容
【发布时间】：2016-01-04 22:06:09
【问题描述】：

我是 Angular 新手，正在尝试为 Angular UI 路由器设置一个工作示例

我研究了一些关于 stackoverflow 的问题，但没有具体看到这个问题。我的问题是，即使在浏览器调试和网络分析中我看到我的模板 html 被调用，仍然没有在浏览器中看到任何内容。控制台中没有错误

AngularJS ui-router - template not displaying

使用Angular 1.4.7及对应

请在下面找到 app.js

(function(){
    angular.module('TestPrj',['ui.router']);

    angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/ReportB');
        $stateProvider
        .state('a', {
            url: '',
            abstract:true,
            controller:'mainController',
            controllerAs:'main',
            templateUrl: 'partials/home.html'
        })
        .state('a.b', {
            url: '/ReportB',
            controller:'B',
            controllerAs:'B',
            templateUrl: "partials/B.html"
        }); 
    });

    angular.module('TestPrj').run(function($rootScope,$state){
          $rootScope.$on("$stateChangeError", console.log.bind(console));
        });

})();

控制器 b.js：

(function(){

angular.module('TestPrj').controller('B',B);

    function B($state){
        this.pageName = "Report a B";
    }

    B.$inject = ["$state","$stateParams","$scope"];

})();

Controller main.js
(function(){

angular.module('TestPrj').controller('mainController',mainController);

function mainController($state,$translate){

    }

mainController.$inject = ["$state","$translate"];

})();

index.html

<!DOCTYPE html>
<html>
<head ng-app="TestPrj" lang="en">
        <script type="text/javascript" src="js/lib/angular.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script>
        <script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script>
        <script type="text/javascript" src="js/lib/ui-mask.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

        <script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script>
        <script type="text/javascript" src="js/controllers/main.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>

partials/home.html

<div class="container">
    <div ui-view=""></div>
</div>

partials/B.html

<div>
    <div ui-view=""></div>  
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</div>

还分享我的项目设置截图 Angular Setup

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

根据我所做的挖掘，我认为问题在于您制作了第一个状态摘要。在 github 上发布了一个关于 ui-router 的问题，您可以阅读 here。另外，考虑两个 plunkr 示例

without abstract

    $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })

with abstract

    $stateProvider
        .state('route1', {
            url: "/route1",
            abstract: true,
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })

第二个 plunkr 是第一个 plunkr 的副本，除了 abstract: true 被添加到状态中，现在它不起作用。

另外，请确保在使用 ui-router 时经常清除浏览器缓存或禁用缓存。提供缓存结果非常糟糕。

【讨论】：

嗨，我的代码库中抽象状态的意图是将 A 添加到子状态的 url。当我将状态设为抽象时，这部分实际上正在发生。当我点击localhost:8080/TestPrj 时，它变为localhost:8080/TestPrj/#/ReportB。注释掉摘要后，重定向不起作用。同样，这个 URL 仍然无法正常工作 localhost:8080/TestPrj/#/ReportB ，在我看来应该可以工作。清理浏览器缓存后，我在网络日志中看到响应从调用返回，只是没有显示在模板中

【解决方案2】：

尚不清楚您为什么要使用抽象状态。抽象状态可以为子状态提供数据和进入/退出处理。但它没有被激活。它确实需要一个模板。

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

在您的示例中，子状态确实完成了这些操作，而抽象状态显然是要使用的。

看来您并不打算将其抽象化。

更新：摘要 url 不能为空。这是带有 url 集的代码示例：

.state('a', {
    url: '/a',
    abstract: true,
    controller: 'mainController',
    controllerAs: 'main',
    templateUrl: 'partials/home.html'
})

http://plnkr.co/edit/11o6qF?p=preview

要查看功能，请使用此链接：http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b

【讨论】：

嗨，我的代码库中抽象状态的意图是将 A 添加到子状态的 url。当我将状态设为抽象时，这部分实际上正在发生。当我点击 localhost:8080/TestPrj 时，它变为 localhost:8080/TestPrj/#/ReportB。注释掉摘要后，重定向不起作用。此外，这个 URL 仍然无法正常工作 localhost:8080/TestPrj/#/ReportB ，在我看来应该可以工作。清理浏览器缓存后，我在网络日志中看到响应从调用返回，只是没有显示在模板中