Angular.JS - Error on adding Controller

Question

I am new in angularjs. What I am trying to do is adding a simple controller in an angular app. So, my code is like this-

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div ng-app="">
            <div ng-init="mySwitch=true">
                <p>
                <button ng-disabled="mySwitch">Click Me!</button>
                </p>
                <p>
                <input type="checkbox" ng-model="mySwitch"/>Button Disable
                </p>
                <p>
                {{ mySwitch }}
                </p>
            </div>
        </div>
    </body>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>

So, it is working perfectly-

When I addd ng-controller="anything" as such...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div ng-app="">
            <div ng-controller="anything" ng-init="mySwitch=true">
                <p>
                <button ng-disabled="mySwitch">Click Me!</button>
                </p>
                <p>
                <input type="checkbox" ng-model="mySwitch"/>Button Disable
                </p>
                <p>
                {{ mySwitch }}
                </p>
            </div>
        </div>
    </body>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>

Nothing seems to work.

Can anyone please help, what I am doing wrong?

Thanks in advance for helping.

looks like you need to define a controller

scniro
– scniro

2015-10-19 23:40:06 +00:00
Commented Oct 19, 2015 at 23:40 — scniro
– scniro, Commented Oct 19, 2015 at 23:40

scniro · Accepted Answer · 2015-10-19 23:48:33Z

1

Looks like you have not defined a controller. Observe the following...

<div ng-app="app">
    <div ng-controller="ctrl">
[...]

angular.module('app', []).controller('ctrl', function($scope) {
    $scope.mySwitch = true;
});

JSFiddle Link - working demo

And as always, refer to the Understanding Controllers docs for more information.

edited Oct 19, 2015 at 23:48

answered Oct 19, 2015 at 23:42

scniro

17k8 gold badges67 silver badges108 bronze badges

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

Comments

Anas Sahri · Accepted Answer · 2015-10-19 23:52:15Z

1

in the first step you need to declare a name for your app

for exemple

Module.js

var home = angular.module("home",['ngRoute']);

after that call this var in your controller

Controller.js

home.controller('homeController',function($scope){
  $scope.switch = value;
});

in your code html

index.html

<!DOCTYPE html>
<html ng-app="home">

<div ng-controller="homeController" >
 {{switch}}
</div>

answered Oct 19, 2015 at 23:52

Anas Sahri

949 bronze badges

2 Comments

scniro Over a year ago

why do you have a dependency of ngRoute in this? Also, what is tangibly different in your answer than the one I posted earlier?

Anas Sahri Over a year ago

only new information my friend cause if you separate the code in folder it make that easy to manage

Collectives™ on Stack Overflow

Angular.JS - Error on adding Controller

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related