how we can define a function in controller with Angular JS

Question

how we can define a function in angular JS i was trying a function , but when i load my page it says in console SimpleController() is not a function. may b i'm doing some syntax mistake

HTML

<div ng-app>

 name: <input type="text" ng-model="name">

 <div ng-controller="SimpleController">
    <ul>
        <li ng-repeat="custName in customers | filter: name | orderBy:name">{{ custName.name }} - {{ custName.city | uppercase}} - {{ custName.address }}</li>
    </ul>
 </div>
</div>

My Contorller

function SimpleController($scope){

        $scope.customers = [

            {
                name:'John Doe',
                city:'Aurora',
                address:'Dickenson'
            },
            {
                name:'Daniel Pervaiz',
                city:'Denver',
                address:'Country Lane'
            },
            {
                name:'Arooj Paul',
                city:'Jesu',
                address:'Green Valley'
            }

        ];

    }

How is SimpleController connected to your app ? RTFM or start from an Ionic "Tabs" starter example : you'll get a good structure and correct syntax to refer to. — Christian Bonato
– Christian Bonato, Commented Apr 20, 2016 at 23:11
I updated my answer below with working code. I think you did not define your ng-app properly or controller. Unless you did not post all your code. — Enkode
– Enkode, Commented Apr 20, 2016 at 23:22

Community · Accepted Answer · 2017-05-23 11:59:52Z

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

myApp.controller('SimpleController', ['$scope', function($scope) {
       $scope.customers = [
            {
                name:'John Doe',
                city:'Aurora',
                address:'Dickenson'
            },
            {
                name:'Daniel Pervaiz',
                city:'Denver',
                address:'Country Lane'
            },
            {
                name:'Arooj Paul',
                city:'Jesu',
                address:'Green Valley'
            }

        ];
    
}]);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example8-production</title>  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    
</head>
<body ng-app="myApp">

  name: <input type="text" ng-model="name">

 <div ng-controller="SimpleController">
    <ul>
        <li ng-repeat="custName in customers | filter: name | orderBy:name">{{ custName.name }} - {{ custName.city | uppercase}} - {{ custName.address }}</li>
    </ul>
 </div>

</body>
</html>

Not sure if your controller is defined properly.

AngularJS controller and methods

Also make sure ng-App is declared properly.

<div ng-app="myApp">

Christian Bonato · Accepted Answer · 2016-04-20 23:24:51Z

Angular relies on the concept of modules. Make sure your app is structured like this :

app.js

angular.module('the_name_of_my_app', [
    'ionic', 
    'ngMaterial',
    'the_name_of_my_app.controllers', 
    'the_name_of_my_app.services',
    'the_name_of_my_app.directives'
]
)

.run(function( /* Inject whatever is needed */ ) {

}
.config.run(function( /* Inject any Provider, and routes definitions */ ) {

});

controllers.js

 angular.module('the_name_of_my_app.controllers', [])  

.controller('SimpleController', [
    '$scope',
    '$rootScope', // another dependency injection example
    '$mdDialog', // another dependency injection example
    '$timeout',// another dependency injection example
    function
    (
    $scope,
    $rootScope, // another dependency injection example
    $mdDialog, // another dependency injection example
    $timeout // another dependency injection example
    ) 
    {
...

    }]) 

.controller('AnotherController', [  // ...

index.html

You also need to reference your app in your view :

<div ng-app="the_name_of_my_app">

Jesus is Lord · Accepted Answer · 2016-04-20 23:27:09Z

If you weren't registering your controller it'd look like this on Angular 1.4.9:

angular.js:12722 Error: [ng:areq] Argument 'SimpleController' is not a function, got undefined

And this on Angular 1.0.8:

angular.js:5930 Error: Argument 'SimpleController' is not a function, got undefined

The fact that your error says SimpleController() shows me that the code you have in your question is probably not responsible for your error (or using a version of Angular I haven't tried - I tried to oldest and newest available on plnkr.co).

To fix this you should:

Clear your browser cache.
Make sure your ng-app (or whatever you use to bootstrap) has the correct main module specified - looks like you don't have one in your question for some reason?
Make sure the source directory you're looking in matches the directory of the server serving the static content.
Search for all instances of SimpleController in your source directory - it looks like it might be outside the context of a view using the ng-controller directive due to the () (or different version of Angular with a differently formatted message).

Collectives™ on Stack Overflow

how we can define a function in controller with Angular JS

3 Answers 3

Comments

app.js

controllers.js

index.html

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

app.js

controllers.js

index.html

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related