javascript - 非常奇怪的 Angular 模板渲染问题

Question

我在 index.html 中有以下代码。

......
<my-test-app></my-test-app>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
<!--<script src="bower_components/angular-animate/angular-animate.js"></script>-->
<script src="bower_components/angular-resource/angular-resource.js"></script>

<script src="my-test/module.js"></script>
<script src="my-test/my-test-app.component.js"></script>
<script src="my-test/static/dashboard.component.js"></script>

<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>

在 my-test-app.component.js 中。

(function () {
    "use strict";
    var module = angular.module("myTest");
    module.component("myTestApp", {
        templateUrl: "/my-test/my-test-app.component.html",
        $routeConfig: [
            { path: "/dashboard", component: "dashboard", name: "StaticDashboard" },
            { path: "/**", redirectTo: ["StaticDashboard", ""] }
        ]
    });
})();

在 my-test-app.component.html 中

<nav class="navbar navbar-default navbar-inverse container-fluid">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="#">China deal</a></div>
        <ul class="nav navbar-nav navbar-left">
            <li><a ng-click="['StaticDashBoard']">Static - Dashboard</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <ng-outlet></ng-outlet>
</div>

我的测试/静态/dashboard.component.js

(function () {
    "use strict";
    var module = angular.module("myTest");
    module.component("dashboard", {
        templateUrl: "/my-test/static/dashboard.component.html",
    });
})();

而/my-test/static/dashboard.component.html 只有一行

Test.....

现在我添加了一个新文件service.js

'use strict';
angular.module('myTest', ['ngResource'])
.factory('DashboardService', ['$resource', function ($resource) {
    return $resource('http://localhost:5000/api/Dashboard/:id', { id: '@id' }, { update: { method: 'PUT' } });
}]);

到目前为止一切正常，我可以在菜单下看到文本“测试...”。但是，添加<script src="service.js"></script>后，“Test...”的显示消失了在主 index.html 页面中如下所示。

<script src="my-test/module.js"></script>
<script src="service.js"></script>
<script src="my-test/my-test-app.component.js"></script>
<script src="my-test/static/dashboard.component.js"></script>

Chrome javascript 控制台没有显示任何错误消息。 “网络”选项卡显示甚至没有请求文件“/my-test/static/dashboard.component.html”。如果我移动 <script src="service.js"></script>两行如下。整个页面都是空白的？

<script src="my-test/module.js"></script>
<script src="my-test/my-test-app.component.js"></script>
<script src="my-test/static/dashboard.component.js"></script>
<script src="service.js"></script>

更新:

module.js:

(function () {
    "use strict";
    var module = angular.module("myTest", ["ngComponentRouter"]); // tried to put StaticDataService here but got error. 
    module.value("$routerRootComponent", "myTestApp");
})();

我的测试/静态/dashboard.component.js

(function () {
    "use strict";
    var module = angular.module("myTest");
    module.component("dashboard", {
        templateUrl: "/my-test/static/dashboard.component.html",
        controllerAs: "model",
        controller: ['DashboardService', controller]
    });
})();

错误:

angular.js:13920 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- DashboardService
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20DashboardService
    at angular.js:68
    at angular.js:4511
    at Object.getService [as get] (angular.js:4664)
    at angular.js:4516
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)
    at Object.invoke (angular.js:4710)
    at Object.enforcedReturnValue [as $get] (angular.js:4557)
    at Object.invoke (angular.js:4718)
    at angular.js:4517

Answer 1

您正在使用此行在 service.js 文件中重新创建模块

angular.module('myTest', ['ngResource'])

添加第二个参数创建模块，如果你只想获取模块使用这样获取

angular.module('myTest')

并将依赖项 ngResource 移动到创建模块的 module.js 文件

更新 我认为页面变成空白的原因是因为您将 service.js 放在最后，然后它在您创建组件后重新创建模块