非常奇怪的角模板渲染問題

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

，在我的測試，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", 
    }); 
})(); 

而且/我的測試/靜態/dashboard.component.html只有一行

Test..... 

現在我adde d新文件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' } }); 
}]); 

一切正常，到目前爲止，我可以看到文本「測試...」菜單下的顯示。但是，在主index.html頁面中添加<script src="service.js"></script>後，「Test ...」的顯示消失。

<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

你與該行

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

添加第二個參數重新創建模塊在service.js文件創建模塊，如果你想只得到模塊使用這樣

的獲得

angular.module('myTest')

而移動的依賴ngResource到您創建模塊module.js文件

更新我認爲網頁一片空白的原因是因爲您將service.js最後，然後您創建的組件