current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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

share|improve this question
    
I'm working on this.. wait a minute – thiagoh 23 hours ago
1  
you probably meant angular.module('myApp', []) instead of angular.module('myApp'). – Aᴍɪʀ 23 hours ago
up vote 1 down vote

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>
share|improve this answer
    
- thiagoh I tried the solution, but still didn't see the "Hello world" on the web page. – jlp 6 hours 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. – jlp 6 hours ago
    
Did you include the last version of angular 1? – thiagoh 3 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.