AngularJS ng-controller not working

Question

I just now started learning on AngularJS from w3schools. I am trying to practice examples what ever they have mentioned in the tutorials. Every thing works fine but when i came to "AngularJS Controllers" it is not working properly as working well in w3schools Try it Yourself ». I ve forked my code into this fiddle example. My script looks like this:

function personController($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
}

Try to help me out and suggest me a good tutorial(or any free pdf file).

man your code works fine just change the option in the fiddle from onload to "no wrap - in " here is the changed option http://jsfiddle.net/dq8r196v/2/ — Mohammad Shahrouri, Oct 28 '14 at 07:32
yes it is fine in fiddle but not in my local machine. I am getting the following error: Error: [ng:areq] Argument 'personController' is not a function, got undefined — UiUx, Oct 28 '14 at 08:09
Thanks for this question, I have the same problem when following another tutorial. I'm wondering was it a new version of AngularJS that required another syntax? — Yevgeniy Afanasyev, Dec 20 '15 at 21:44

score 22 · Accepted Answer · answered Oct 30 '14 at 08:38

22

This is your corrected fiddle.

It is a good practice for angular that the controller definition must look something like this:

angular.module("app", []).controller("personController", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

And, without doubt, the best tutorial ever for learning the basics of Angular is the CodeSchool one!

Hope this helps.

answered Oct 30 '14 at 08:38

Kutyel

8,575
3
30
61

yeah it works fine when i change my function into your angular.module code. but what is the difference between these two functions..? – UiUx Oct 30 '14 at 11:00
basically the syntax I used will allow you to pass more parameters to your controller in the future, like `$http` for example, and many others, which is very useful. – Kutyel Oct 30 '14 at 11:12

score 11 · Answer 2 · edited May 04 '15 at 16:00

11

It is a new approach. We cannot use controllers without a module no more. Have a look at this. Just add a module and append the controller then you will have no problem.

edited May 04 '15 at 16:00

ForceBru

43,482
10
63
98

answered Oct 30 '14 at 08:22

katmanco

1,146
12
24

it seems you are right, but can you provide any resource for that . the link you provided does not mention anything written. – Kick Buttowski Mar 26 '15 at 18:06
I pulled my hair out while debugging why it was working fine few weeks ago(1.2.x) and not working now (1.3.x) ;-) – K. Siva Prasad Reddy Jun 04 '15 at 06:49

khichar.anil · Answer 3 · 2014-10-28T07:47:00.060

5

I just modified your js fiddle. Please check the fiddle example

function personController($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
}

There was no issue with your code except JS fiddle settings from onLoad to No wrap - in head

enter image description here

edited Oct 28 '14 at 07:47

answered Oct 28 '14 at 07:35

khichar.anil

4,585
1
23
21

when i tried in my local machine I'm getting the following error. Error: [ng:areq] Argument 'personController' is not a function, got undefined – UiUx Oct 28 '14 at 08:06
Hey @UiUx,Could you please post your local code including html and js so that I can help you better. – khichar.anil Oct 28 '14 at 08:59
Thanks. It works, BTW in a new design of JS fiddle you need to set up this option in javascript area by in a drop down menu under (JavaSctipt+gear) button. – Yevgeniy Afanasyev Dec 20 '15 at 21:57

score 2 · Answer 4 · edited Oct 26 '16 at 09:02

2

by adding np-app="myApp" in any tag of html like <html ng-app = "myApp"> my code works fine.

edited Oct 26 '16 at 09:02

Ingo Karkat

167,457
16
250
324

answered Oct 26 '16 at 08:36

Samreen Quyyum

21
1

Thank you mate. Your answer + Kutyel's solved my issue – Jason Krs Mar 25 '18 at 18:39

score 1 · Answer 5 · answered Oct 28 '14 at 07:30

1

You need to create an application module, and then add a controller to it. In angular it is all about dependencies. Secondly you need an app-name. The base tutorial is on their main page: https://docs.angularjs.org/tutorial/step_00 I started with it, and it worked fine with me. Just do all steps starting from step 1.

answered Oct 28 '14 at 07:30

Beri

11,470
4
35
57

Their tutorial is very easy and you are learning by small steps. It will take you about 3 hours. Then you will have to search for a more advanced tutorials and start reading documentation:) Angular is very advanced. – Beri Oct 28 '14 at 07:31
Hi Beri thanks for your time and I m getting the error which I ve mentioned in above comment please find it and help me out – UiUx Oct 28 '14 at 08:10

score 1 · Answer 6 · answered Jul 15 '15 at 15:51

This is a common search result for "Angular Controller Not Working" so I thought it'd be helpful to add the solution that fixed my "controller not working" problem.

I had my base route with $routeProvider pointing at a controller file and a templateUrl partial like so:

$routeProvider.when('/', {
    templateUrl: 'partials/home.html',
    controller: 'homePage'
});

I had several other routes and all those controllers worked, but for some reason my first route wouldn't. Turns out, I had a small logic error in my partial and that prevented ANY of my controller code from running.

Dumb little mistake, but I was caught off guard that it was a logic issue in my partial that was preventing any controller code from running. It took a lot longer than I'd like to admit to find because the issue wasn't in my "JavaScript" even though the console errors were present. The joys of tightly coupled front-end code, amiright?

score 1 · Answer 7 · answered Sep 08 '16 at 09:56

1

You have to input function as a parameter inside module

var app = angular.module('app',[]);
app.controller('personController',function($scope){
  $scope.firstName = 'John';
  $scope.lastName = 'Smith';
});

answered Sep 08 '16 at 09:56

latifalbr

153
2
11

score 0 · Answer 8 · answered Dec 19 '15 at 02:34

0

Same problrm may be if you will try to nest ngApp into anothe ngApp.

The documentation says:

AngularJS applications cannot be nested within each other.

answered Dec 19 '15 at 02:34

Yevgeniy Afanasyev

37,872
26
173
191

AngularJS ng-controller not working

8 Answers8

Linked

Related