Included in my index.html file is the following code:
......
<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>
The contents of the my-test-app.component.js are as follows:
(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", ""] }
]
});
})();
The content of my-test-app.component.html is:
<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>
The file dashboard.component.js found in my-test/static contains:
(function () {
"use strict";
var module = angular.module("myTest");
module.component("dashboard", {
templateUrl: "/my-test/static/dashboard.component.html",
});
})();
Here's the content of /my-test/static/dashboard.component.html which consists of just one line stating "Test....".
Test.....
After adding a new file service.js to the main index.html page, the display of "Test..." disappears from view.
<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>
Moving the
<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>
Update:
Code snippet from module.js:
(function () {
"use strict";
var module = angular.module("myTest", ["ngComponentRouter"]); // tried to put StaticDataService here but got error.
module.value("$routerRootComponent", "myTestApp");
})();
Updated content of 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]
});
})();
An error message appears:
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