Geek Answers Handbook

Angular stops working when I use ng controller in html tag

I am new to Angular.js and start learning angular at plunker.co . The problem is that I use ng-controller in any html page tag, angular stops working. I mean the {{ 4+4 }} mapping as soon as after using ng-controller .

This is the 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 displays 64 as output, but with ng-controller displays as {{8*8}} . Why is this happening. Please give some advice. in advance. :)

script.js

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

edited Now the message attirbute value does not appear on the page.

+5
source share
4 answers

First try specifying a name for your application:

 <html ng-app="myApp">

then provide a name for your controller:

 <body ng-controller="MainController">

and finally, all you have to do is define your application:

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

and try this definition for your controller:

 myApp.controller('MainController', function($scope) { $scope.message = "Hello World!"; });
+3
source

ng-controller expects a parameter, which is the name of the controller defined in your angular code. Something like ng-controller=foo . You should read more about how controllers work.

+1
source

I'm not sure what you can use in AngularJS controllers without a name. Specify the name of your controller and it should work.

+1
source

What does it all work? 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!"; }
+1
source

More articles:


All Articles