5

I am new in Angular.js and start learning angular on plunker.co. The problem is when I use ng-controller in any tag of html page , angular stops working. I mean {{ 4+4 }} display as it is just after the using of ng-controller.

this is code from Plunker.co 

<html ng-app>

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" 
    src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>Hello Plunker!</h1>
    {{8*8}}
{{message}}

  </body>

</html>

without ng-controller it displays 64 as output but with ng-controller is displays as it is like {{8*8}}. why it is happening. Please give some advice. thnks in advance. :)

script.js

var MainController = function($scope){
  $scope.message = "Hello World!";
}

edited Now message attirbute value is not displaying on page.

msk
  • 110
  • 1
  • 1
  • 11
  • ng-controller="yourControllerName" that defined in script.js. it is display as is because, it cause error and angular stop running. – YOU Apr 21 '15 at 15:13
  • but i tried this also. nothing is happing. – msk Apr 21 '15 at 15:14
  • also ng-app="yourApp" name. and please link to plnkr. so can point out what is wrong. script.js should be like `angular.module('yourApp', []).controller('yourControllerName', function($scope) {})` – YOU Apr 21 '15 at 15:19
  • You are supposed to give `ng-controller` the name of your controller. Otherwise, it treats it as bad syntax. https://docs.angularjs.org/error/$controller/ctrlfmt. In short either `ng-controller` = `"ControllerName"` or remove `ng-controller` altogether – Sandeep Nayak Apr 21 '15 at 15:20
  • @YOU It is possible to use ng-app as a directive. You don't need to specify the name of any app: http://jsfiddle.net/4xfq2xLu/1/, but if you set a controller as an attribute angular expects it to be named -> you can have multiple controllers, but only one app. Although I agree with you to name the app. – Michelangelo Apr 21 '15 at 15:21
  • @YOU thanx. your advice works. But now I am not getting the value of `message` attribute on html page. – msk Apr 21 '15 at 15:22
  • have you considered just using the angular template that plunker provides? it like...already works. And you can see the proper way to set it up. – tpie Apr 21 '15 at 15:26
  • http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2 – tpie Apr 21 '15 at 15:27
  • @sohail: http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally... In Angular 1.3+ it may not work... you cannot add controller to global scope – Sandeep Nayak Apr 21 '15 at 15:27
  • 1
    i was defining the controller in global scope. – msk Apr 21 '15 at 15:39

4 Answers4

3

First try to set a name for your app :

<html ng-app="myApp">

then set a name for your controller : 

<body ng-controller="MainController">

and finally, all you need to do is to define your app :

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

and try this definition for your controller :

myApp.controller('MainController', function($scope) {
    $scope.message = "Hello World!";
});
Khalid
  • 4,730
  • 5
  • 27
  • 50
1

ng-controller expects a parameter that is the name of the controller defined in your angular code. Something like ng-controller=foo. You should read up more on how Controllers work

David says Reinstate Monica
  • 19,209
  • 22
  • 79
  • 122
1

I'm not sure if you can use in the AngularJS controllers without name. Please set a name for your controller and it should work.

Pasha.Proton
  • 71
  • 4
1

What do you mean it all works? http://jsfiddle.net/4xfq2xLu/2/

<div ng-app>
<div ng-controller="MainController">
    <h1>Hello Plunker!</h1>
    {{8*8}}
{{message}}  </div>
</div>

JS

var MainController = function($scope){
  $scope.message = "Hello World!";
}
Michelangelo
  • 5,888
  • 5
  • 31
  • 50