dc7a9163d9 dc7a9163d9 - 2 months ago 25
AngularJS Question

Very strange angular template render issue

I have the following code in 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>


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


and in 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>


my-test/static/dashboard.component.js

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


And /my-test/static/dashboard.component.html has just one line

Test.....


Now I added a new file 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' } });
}]);


Everything works fine so far, I can see the text "Test..." displayed under the menu. However, the display of "Test..." is gone after I add
<script src="service.js"></script>
in the main index.html page as following.

<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>


The Chrome javascript console didn't show any error message. The "Network" tab shows the file "/my-test/static/dashboard.component.html" was not even requested. And if I move the
<script src="service.js"></script>
two lines down as following. The whole page is blank?

<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>


Update:

The module.js:

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


my-test/static/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]
});
})();


Error:

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

You are recreating the module in your service.js file with this line

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

adding the 2nd parameter creates the module, if you want to just get the module use the getting like this

angular.module('myTest')

And move the dependency ngResource to the module.js file where you create the module

Update i think the reason the page goes blank is because you place the service.js last and then it recreates the module after you created your components