I'm currently working with angular 1.6 and have encountered an issue with two components, config-list and request-dates.
Both components function correctly individually on a page, but when I attempt to add both components to the same page, only the second one seems to work. In the example below, request-dates is the component that works properly.
Is it possible to have multiple components on a single page?
Below is the code for the main page:
<div ng-app="playground" ng-cloak>
<config-list></config-list>
<request-dates></request-dates>
</div>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/module.js"></script>
<script src="~/Scripts/app/config-list.component.js"></script>
<script src="~/Scripts/app/request-dates.component.js"></script>
For module.js:
(function () {
"use strict";
angular.module("playground", []);
}());
As for config-list.component.js:
(function(){
var module = angular.module("playground", []);
function controller()
{
var model = this;
};
module.component("configList",
{
templateUrl: "/Scripts/app/config-list.component.html",
controller: controller,
controllerAs: "model"
});
}());
Content of config-list.component.html:
<p>Hello from configlist</p>
Next is request-dates.component.js:
(function () {
var module = angular.module("playground", []);
function controller()
{
var model = this;
}
module.component("requestDates",
{
templateUrl: "/Scripts/app/request-dates.component.html",
controller: controller,
controllerAs: "model"
});
}());
Lastly, here's request-dates.component.html:
<p>Hello from requestDates</p>
[Update] - The correct answer revealed that my issue was due to accidentally overwriting the module (replacing the first component) with a new module containing the second component. This explains why the first component was not displaying as expected.