current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 1 down vote favorite

This is not displaying data, I am learning about controllers. Why it is not displaying data while it displays data in the video I am watching. 

<div data-ng-controller="FirstController">
<input type="text" name="txtName" data-ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul  >
    <li data-ng-repeat="person in Customers | orderBy:'name' |  filter:typedName  "> {{ person.name | uppercase}} - {{ person.city }}
    </li>
</ul>
 </div>
<script>
    function FirstController($scope) {
        $scope.Customers = [
            { name: 'Sita', city: 'Los Angeles' },
            { name: 'Ram', city: 'Los Vegas' },
            { name: 'Amit', city: 'San Antonio' },
            { name: 'Cat', city: 'Arkanas' },
            { name: 'Boushick', city: 'Pittsburgh' }
        ];
    }
</script>
<script src="Scripts/angular.min.js"></script>

share|improve this question
up vote 3 down vote accepted

Looks like you're following older videos where they mmight be using angular 1.2.

In latest version of angular, it's mandatory to specific app name and declare controllers under those modules. Though you can activate global controller functions via config but its not recommended.

So you need to make the following changes:

In your HTML,

<html data-ng-app="myApp">

NOw in your JS for controller:

angular.module("myApp", [])
   .controller("ControllerName", function($scope) {
      // declare your $scope data here
   })

Why global controller functions are deprecated?

When you declare controller functions globally, It will be polluting the global namespace. Assume there is another library which is using the same function name, then your function would be overriden.

For example,

you have function SimpleController in your file. Assume some third party library you're using, they also use same name for some functionality.

They set, 

window.SimpleController = window.alert

So it means your controller function has been overriden.

that's why it's been deprecated.

share|improve this answer
    
Thank you, you seem fair enough, its 2 years old video. At 29.00 in the video, they use same code without module it works. Perhaps its 1.2 version....But strange, I use 1.3 latest and it should be backward compatible....Fair enough, its mandatory now....thank you very much for pointing the reasoning....youtube.com/watch?v=i9MHigUZKEM – Learner Apr 3 '15 at 3:13
1  
You can make it compatible by adding allowGlobals in your config method. but it's better to avoid that's why its not recommended – mohamedrias Apr 3 '15 at 3:15
    
Thank you very much, helps me understand it. – Learner Apr 3 '15 at 3:19
up vote 1 down vote

From the code you provided I believe its not working because you have not declared an Angular Module in your javascript and linked it to your html view via ng-app. Please check the working Plunker below.

http://plnkr.co/edit/fwwzZwODfZ9G5Ml1Y1MS?p=preview

<body ng-app="myApp">
    <div ng-controller="FirstController">
        <input type="text" name="txtName" ng-model="typedName" />
        <br />
        Typed Name is: {{ typedName }}
        <br />
        Names:
        <ul>
            <li data-ng-repeat="person in Customers | orderBy:'name' |  filter:typedName  ">
                {{ person.name | uppercase}} - {{ person.city }}
            </li>
        </ul>
    </div>
    <script>
        angular.module('myApp', [])
            .controller('FirstController', function($scope) {
                $scope.Customers = [
                    { name: 'Sita', city: 'Los Angeles' },
                    { name: 'Ram', city: 'Los Vegas' },
                    { name: 'Amit', city: 'San Antonio' },
                    { name: 'Cat', city: 'Arkanas' },
                    { name: 'Boushick', city: 'Pittsburgh' }
                ];
            });
    </script>
</body>
share|improve this answer
1  
Thank you, he is explaining module in next section in the video. However, he never used module, you can please check the video quick @ 29.00 time. It works perfectly for him.... youtube.com/watch?v=i9MHigUZKEM – Learner Apr 3 '15 at 3:11
    
I am very curious why it worked for him while I have the exact same code which is n't working for me. Could you please identify any difference at all? – Learner Apr 3 '15 at 3:11
1  
@Deevinee Angular changed how Controllers work between 1.2 and 1.3, check out this for more details docs.angularjs.org/guide/migration – Mason Mize Apr 3 '15 at 3:14
    
Thank you very much Mason for explaining and your quick code. Helps me. But I voted other answer, because explanation is to my basic level that I can digest. – Learner Apr 3 '15 at 3:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.