AngularJS: rendering a component from within the template of another component

Question

I'm trying to learn angularjs and struggling with getting my second component, 'list, to render. Is something wrong with the syntax? Here's the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World, AngularJS - ViralPatel.net</title>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
</head>
<body ng-app="myModule">

    Write some text in textbox:
    <input type="text" ng-model="sometext" />

    <h1>Hello {{ sometext }}</h1>
  <app></app>
  <script src="App.js"></script>
  <script src="List.js"></script>
</body>
</html>

Here's App.js

angular.module('myModule', [])

.component('app', {

  template:
    '<div>' +
      '<h1>Hello from App.js</h1>' +
      '<list></list>' +
    '</div>'

})

And here's List.js, the one that won't render:

angular.module('myModule', [])

.component('list', {

  template:
    '<h1>Hello from List.js</h1>'
    '<ul>' +
      '<li>1</li>' +
      '<li>2</li>' +
    '</ul>'
})

Dacre Denny · Accepted Answer · 2018-07-16 02:50:54Z

1

The problem here seems to be that you're re-declaring the myModule module twice. The module is being re-declared twice in each of your .js files, when you do the following:

angular.module('myModule', [])

A subtle "gotcha" in angular is that a new module is declared internally in AngularJS when you pass [] as an second argument to angular.module (see documentation)

Try revising your List.js to this and see if that helps:

/* Remove the [] to prevent myModule from being re-defined. 
   We assume myModule has been defined during the execution of App.js, 
   which should happen before List.js is executed */
angular
.module('myModule') 
.component('list', {

  template:
    '<h1>Hello from List.js</h1>'
    '<ul>' +
      '<li>1</li>' +
      '<li>2</li>' +
    '</ul>'
})

edited Jul 16, 2018 at 2:50

answered Jul 16, 2018 at 2:40

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ArthurH Over a year ago

Thanks that helped (and I noticed a missing + in the template, afterwards). So now renders on the screen but I do get an error in the console that says "Uncaught Error: [$injector:nomod] errors.angularjs.org/1.5.6/$injector/nomod?p0=myModule" . Edit: nevermind, fixed that bug after following the link in the error. Thanks!

Collectives™ on Stack Overflow

AngularJS: rendering a component from within the template of another component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related