21

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).

Improve this question
3
  • 1
    man your code works fine just change the option in the fiddle from onload to "no wrap - in <head>" here is the changed option jsfiddle.net/dq8r196v/2 Commented Oct 28, 2014 at 7:32
  • 1
    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 Commented Oct 28, 2014 at 8: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? Commented Dec 20, 2015 at 21:44

8 Answers 8

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

yeah it works fine when i change my function into your angular.module code. but what is the difference between these two functions..?
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.
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.

Improve this answer

2 Comments

it seems you are right, but can you provide any resource for that . the link you provided does not mention anything written.
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) ;-)
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

Improve this answer

3 Comments

when i tried in my local machine I'm getting the following error. Error: [ng:areq] Argument 'personController' is not a function, got undefined
Hey @UiUx,Could you please post your local code including html and js so that I can help you better.
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.
2

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

Improve this answer

1 Comment

Thank you mate. Your answer + Kutyel's solved my issue
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.

Improve this answer

2 Comments

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.
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
1

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?

Improve this answer

Comments

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';
});
Improve this answer

Comments

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.