AngularJS ng-controller not working

问题

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

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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.

回答5:

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?

回答6:

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

回答7:

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

回答8:

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.

来源：https://stackoverflow.com/questions/26602883/angularjs-ng-controller-not-working

标签

javascript

html

angularjs

angularjs-controller