AngualrJS controller not working

Question

I just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.

My code is as below (it's the same as in the video)

<html data-ng-app="">

    <head>
        <script src="angular.min.js"></script>
        <script>
            function SimpleController($scope) {
                $scope.customers = [{
                    name: 'Kamal',
                    city: 'York'
                }, {
                    name: 'Sunil',
                    city: 'DC'
                }, {
                    name: 'Malith',
                    city: 'Gotham'
                }];
            }
        </script>
    </head>

    <body>
        <div data-ng-controller="SimpleController">Name :
            <input type="text" data-ng-model="name" />
            </br>
            <ul>
                <li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
            </ul>
        </div>
    </body>

</html>

when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.

enter image description here

Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.

But I can't do that in my local machine so the problem remains as it is.

Can anybody point me to the correct path ?

Tushar · Accepted Answer · 2015-05-10T09:57:44.137

3

You need to initialize app:

var app = angular.module("myApp", []);

<div ng-app="myApp" ng-controller="SimpleController">
<!--         ^^^^^ -->

Demo: http://jsfiddle.net/xy23ybzp/2/

Docs: https://docs.angularjs.org/guide/bootstrap

Check Manual Initialization Section in Docs

edited May 10 '15 at 09:57

answered May 10 '15 at 09:51

Tushar

85,780
21
159
179

Yeah. It will work in the JSFiddle. Try selecting `onLoad` instead of `no wrap - in ` when you select the `angularJS` file. then it wont work. Still the problem remains in my local code. – prime May 10 '15 at 09:59
what I meant is my JSFiddle code is still working without your modifications. But if I choose `onLoad` then it wont work. – prime May 10 '15 at 10:01
thank you for the help. After the initialization of the app we need to use that to define our controllers or something. I figured that by another SO question's answer. I got the hint from your answer though.I posted an answer please let me if know I'm doing it correctly there. – prime May 10 '15 at 10:17
It is working. But i want to know that is it the correct way or not. thank you for the help. your answer pointed me towards solving my problem. – prime May 10 '15 at 10:18
1

@prime Yes! The correct way is defining `controller` on app. Otherwise it will create 100s of global function which is bad practice. – Tushar May 10 '15 at 10:20

score 0 · Answer 2 · answered May 10 '15 at 10:14

After getting help from the answers listed here for this question. I got it working. Below is the working code.

<html  >
<head>
<script src = "angular.min.js"  ></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("SimpleController",function($scope){
        $scope.customers = [
        {name :'Kamal',city : 'York'},
        {name : 'Sunil',city:'DC'},
        {name : 'Malith',city:'Gotham'}
        ];
    }); 
</script>

  </head>
  <body  >

  <div ng-app="myApp"  data-ng-controller="SimpleController">
    Name : 
    <input type="text" data-ng-model="name" />
    </br>
    <ul>
        <li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
    </ul>
</div>

</body>
</html>

AngualrJS controller not working

2 Answers2