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' } });
}]);

到目前为止一切正常，我可以看到文字＆＃34;测试......＆＃34;显示在菜单下。然而，显示＆＃34;测试......＆＃34;我在主index.html页面中添加<script src="service.js"></script>后就不见了。

<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控制台没有显示任何错误消息。＆＃34;网络＆＃34;选项卡显示文件＆＃34; /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置于最后，然后在创建组件后重新创建模块

很奇怪的角模板渲染问题

1 个答案: