CODEWITHSUNDEEP
angularjs
Abushawish
Abushawish

Reputation: 1473

AngularJS simple "Hello, world" not working

Trying to follow a tutorial, I can't get the "Hello, world" example working. Instead it displays: "{{greeting.text}}, world". Using Chrome and AngularJS 1.3.1.

index.html:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="angular.js"></script>
        <script src="app.js"></script>
        <!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
    </head>
    <body>
        <div ng-controller='HelloController'>
            <p>{{greeting.text}}, world </p>
        </div>
    </body>
</html>

app.js

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

My folder structure

root/
    angular.js
    app.js
    index.html

Thank you

Upvotes: 23

Views: 44224

Answers (4)

Iker Aguayo
Iker Aguayo

Reputation: 4115

Answering the question of what is wrong and if they changed something.

  • AngularJs Version 1.2 or older: The controller could be a function not defined into a module. Like in the question.

Controller

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}
  • Angular Version 1.3 or newer: The controller must be defined into a module. Like in the answer.

Controller

var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.greeting = { text: 'Hello' };
}]);

Upvotes: 13

user3999667
user3999667

Reputation:

I hope this helps.

index.html

<!DOCTYPE html>
<html ng-app="appname">

  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <link href="style.css" rel="stylesheet"/>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="appCtrl">
      <p>{{greeting.text}}, world </p>
    </div>
  </body>

</html>

script.js

var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.greeting = { text: 'Hello' };
}]);

http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview

Upvotes: 30

Ram
Ram

Reputation: 514

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCntrl">
        Enter text:
        <br />
        <input type="text" ng-model="hellomodel" />
        <br />
        <br />
        <h1>
            {{hellomodel}}</h1>
        <script language="javascript">
            var myapp = angular.module("myApp", []);
            myapp.controller("myCntrl", function ($scope) {
                $scope.hellomodel = "Hello World!";
            });
        </script>
    </div>
</body>
</html>

http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx

Upvotes: 4

rlf
rlf

Reputation: 59

The accepted answer is good but I thought I'd chip in with some resources I've found helpful if you're looking for a better understanding of how things work in Angular

  • Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
  • Shaping up with Angular www.codeschool.com/courses/shaping-up-with-angular-js

Both are completely free courses and because the egghead.io playlist is split into videos for separate concepts it's also really good reference material.

The angular.js developer guide is also really helpful!

Upvotes: 3

Related Questions