非常奇怪的角度模板渲染问题

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 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", ""] }
        ]
    });
})();

在我的-test-app.Compent.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>

my/静态/dashboard.Component.js

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

并且/my-test/静态/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>添加到主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>

控制台没有显示任何错误消息。"Network“选项卡显示的文件”/my-test/静力/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");
})();

my/静态/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放在最后，然后它在创建组件之后重新创建模块