Use angularJS .component() but got no values

Question

I am new to angularJS and trying to get the following simple samples to work. But when I ran it, I got a blank screen instead of "Hello world". Help will be greatly appreciated. Thanks.

angular-comp.js:

  angular.module('myApp').component('greetUser', {
      template: 'Hello, {{$ctrl.user}}!',
      controller: function GreetUserController() {
          this.user = 'world';
      }
 });

index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="ISO-8859-1">
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">             </script>
    <script src="js/angularcomp.js"></script>
</head>
<body>
    <greet-user></greet-user>
</body>
 </html>

Update: I found the problem, the version 1.4.5 doesn't support component. I now use 1.6.1 and it works !!!!

you probably meant angular.module('myApp', []) instead of angular.module('myApp'). — Aᴍɪʀ
– Aᴍɪʀ, Commented Feb 9, 2017 at 22:09

thiagoh · Accepted Answer · 2017-02-09 22:08:14Z

1

The problem resides here

angular.module('myApp')

where this should be

angular.module('myApp',[])

because you're creating a new module. If you don't pass the second Array argument, AngularJS will try to find your module instead of creating a new one.

try this:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="ISO-8859-1">
    <title>AngularJS</title>
  </head>

  <body ng-app="myApp">
    <greet-user></greet-user>
  </body>

  <script>
    angular.module('myApp',[])
      .component('greetUser', {
        template: 'Hello, {{$ctrl.user}}!',
        controller: function GreetUserController() {
          this.user = 'world';
        }
      });

  </script>

</html>

edited Feb 9, 2017 at 22:08

answered Feb 9, 2017 at 21:57

thiagoh

7,4588 gold badges55 silver badges78 bronze badges

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

3 Comments

jlp Over a year ago

- thiagoh I tried the solution, but still didn't see the "Hello world" on the web page.

jlp Over a year ago

I copied the above solution in my IDE, and ran it again but still didn't see the "Hello world" on the web page.

thiagoh Over a year ago

Did you include the last version of angular 1?

Collectives™ on Stack Overflow

Use angularJS .component() but got no values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related