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.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

I am learning angular.. I have tried to run a small example through pluralsight, but wasn't able to render correct output.. http://plnkr.co/edit/cYEDSW3FrAKeh1SBjUVN?p=preview HTML

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{text}}</h1>

    <div>
      <div>First name: {{person.firstName}}</div>
      <div>Last name: {{person.lastName}}</div>
      <img ng-src="person.imageSrc" title="{{person.firstName}} {{person.lastName}}">
    </div>
  </body>

</html>

script.js

var MainController = function($scope) {

  var person = {
    firstName: "Ajay",
    lastName: "Sattikar",
    imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"

  };

  $scope.text = "Hello Angular!";
  $scope.person = person;

};

I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. Experts, kindly help...

share|improve this question
    
possible duplicate of Controller not a function, got undefined, while defining controllers globally – PSL Jan 13 '15 at 22:44
    
It does not work because pluralsight demo version might be using older version of angular application. – PSL Jan 13 '15 at 22:44
    
That code is valid with older versions of angular, but since 1.3 you need to declare the module (see other responses). However try replacing the angular loaded by, let's say, 1.1.5 instead of 1.3.7 and it works. – floribon Jan 13 '15 at 22:53
up vote 2 down vote accepted

There are a few things that need to be changed in your code

  1. you need to create an angular module 
var app = angular.module('app', []);

2 add directive to html element

<html ng-app='app'>
  1. need to register MainController against angular module like this:
app.controller('MainController', function($scope) {

  var person = {
    firstName: "Ajay",
    lastName: "Sattikar",
    imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"

  };

  $scope.text = "Hello Angular!";
  $scope.person = person;

});

Here is a working demo - http://plnkr.co/edit/i9N2OC75EGZwUTDcKtLB?p=preview

share|improve this answer
    
This works perfect. Thanks. However, one minor issue, the img src is showing as a "person.imageSrc" and not converting into the actual path (i.e. value of "person.imageSrc"), can you please assist? – ajay Jan 13 '15 at 23:02
    
great, if it helps solve your problem you can click the big tick to show other people the working solution. I will take a look at code now and see if I can see the problem – Michael Coleman Jan 13 '15 at 23:04
    
Got it.. I missed parenthesis.. {{..}} – ajay Jan 13 '15 at 23:05
    
great, another way that works is to use <img ng-src="http://odetocode.com/{{person.imageSrc}}" ...> and update your javascript accordingly, just whatever is best for your situation – Michael Coleman Jan 13 '15 at 23:10
up vote 0 down vote

You missed a few steps:

1. Declaring your app

<html ng-app='myApp'>

2. Declaring your controller inside your app module:

angular.module('myApp', [])
 .controller('MainController', function($scope) {

     var person = {
         firstName: "Ajay",
         lastName: "Sattikar",
         imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"
     };

     $scope.text = "Hello Angular!";
     $scope.person = person;
})
share|improve this answer

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.