controller doesnt render using angularJS

Question

I'm starting to learn angularJS just now and i have a problem with my first controller.

This is my HTML:

<!DOCTYPE html>
<html ng-app="">
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="includes/stylesheet.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script type="text/javascript" src="includes/main.js"></script>
</head>
<body>
    <div ng-controller="firstCtrl">
        <h1>{{data.message +" world"}}</h1>
        <div class="{{data.message}}">
            This is just a game!
        </div>
    </div>
</body>
</html>

and this is the javascript file main.js:

function firstCtrl ($scope){

    $scope.data = {message: "Hello"};
}

in the tutorial im working with what im suppose to see its the Hello World message in the h1 but what i actually see its :

{{data.message +" world"}}

This is just a game!

this is the errors in console :

 Error: [ng:areq] http://errors.angularjs.org/1.3.8/ng/areq?p0=firstCtrl&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:19:417)
    at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:20:1)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:76:95
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:57:257
    at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:7:408)
    at v (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:57:124)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:52:9)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:52:26)

can someone help me figure out what it is?? i copied the exact code from the tutorial so i guess its something with my configuration but i have no clue what it is

see error in console of your browser – Igor Semin Jan 05 '15 at 18:08 — Igor Semin, Jan 05 '15 at 18:08

score 3 · Accepted Answer · answered Jan 05 '15 at 18:15

3

Problem is with your controller. Try changing your controller like this

var myApp = angular.module('***',[]);

myApp.controller('firstCtrl', ['$scope', function($scope) {
   $scope.data = {message: "Hello"};
}]);

answered Jan 05 '15 at 18:15

ssug89

249
2
8

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

ok i found the answer here : [Controller not a function, got undefined, while defining controllers globally

Igor Semin - thx for the guidelines

edited May 23 '17 at 11:58

Community

1
1

answered Jan 05 '15 at 18:18

Al.s

300
4
20

controller doesnt render using angularJS

2 Answers2