0

I'm using angular 1.6, and I have two components, config-list and request-dates.

The components work correctly if they are the only component on the page, but if I put more than one on a page, only the second one works. So in the page, below, request-dates works right.

Can there only be one component on a page?

Here's the main page:

<div ng-app="playground" ng-cloak>
    <config-list></config-list>
    <request-dates></request-dates>
</div>uest-

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

Here's module.js:

(function () {
    "use strict";

    angular.module("playground", []);    
}());

Here's 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"
        });
}());

Here's config-list.component.html:

<p>Hello from configlist</p>

Here's 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"
        });
}());

Here's request-dates.component.html:

<p>Hello from requestDates</p>

[Update] - as the correct answer showed, I was accidentally overwriting the module (which wiped out the first component) with a new module containing the second component, which explains why the first component was not appearing.

Rick Hodder
  • 2,189
  • 3
  • 26
  • 54
  • Try removing the brackets (and comma) from the module declaration in the external files – Dan Feb 18 '17 at 04:12
  • Possible duplicate of [AngularJS best practices for module declaration?](http://stackoverflow.com/questions/19957280/angularjs-best-practices-for-module-declaration) – Dan Feb 18 '17 at 04:14
  • No sh0ber, this is not a duplicate - a best practice link is not a duplicate answer, and as the answer below states I was accidentally redefining (and thereby overwriting) the existing module. Before you downvote someone's answer (which affects their reputation), you should be more careful. – Rick Hodder Feb 22 '17 at 16:15
  • This question is asked frequently (i.e. How do I use 2 modules / pages?) Also, I did not leave that comment hoping for a reply. It gets auto-generated by a close vote. – Dan Feb 22 '17 at 17:33
  • I didn't downvote anyone's answer though. – Dan Feb 22 '17 at 17:33
  • Im sorry then, my assumption was that marking things as a possible duplicate auto downvotes – Rick Hodder Feb 22 '17 at 17:37
  • I did downvote your question because I feel it's a duplicate but since it bothers you I will remove it. – Dan Feb 22 '17 at 17:45

1 Answers1

1

When accessing your playground module, you do not need the second parameter (dependencies).

So, in your module.js you have var module = angular.module("playground", []); which is the correct way to create a module.

Then in your config-list.component.js and request-dates.component.js, you should be just accessing your module, NOT creating them.

Accessing an already created module: var module = angular.module("playground");

Chanthu
  • 1,794
  • 1
  • 15
  • 22