Angularjs controller is showing error

Question

I'm using monaca ide for the development.

I'm trying to post the data from html to php page using angularjs, which gives me error Uncaught Error: [ng:areq] Argument 'joinctrl' is not a function, got undefined i don't know anything about angularjs, please help me with this, thank you for any help.

html

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <script src="js/script.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();
        ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)
    </script>
</head>
<body>
    <ons-navigator title="Navigator" var="myNavigator" page="page1.html">

    </ons-navigator> 
</body>
</html>

page2.html

<ons-page style="background:#5C2D50">
<div class="modal">
    <div class="modal__content" ng-app=joinus ng-controller="joinctrl">
        <form>
        <h1>Join Us</h1>
        <input type="email" placeholder="Email" ng-model="email"><br />
        <input type="password"  placeholder="Password" ng-model="password"><br />
        <input type="password"  placeholder="Confirm Password" ng-model="cpassword"><br />
        <input type="submit" value="Create" class="creat" ng-submit="create()">
        </form>
    </div>
</div>
<div id="gos" onclick="myNavigator.popPage()"><span class="fa fa-chevron-left" id="bk"></span></div>
</ons-page>

script.js

var app = angular.module('joinus', ['onsen']);

app.controller('joinctrl', function($scope, $http){
   $scope.create=function(){
       var request=$http({
           method:"post",
           url:"http://www.elunika.com/joinus.php",
           data:{
               email:$scope.email,
               password:$scope.password,
               cpassword:$scope.cpassword
           },
           headers:{'Content-Type':'application/x-www-form-urlencoded'}
       });
   request.success(function(data){
       myNavigator.popPage();
   });
   request.error(function(data){
       alert("Error While Proccessing");
   })
   }
});

please let me know the mistakes i'm doing.

Please let me know that <form> needs to be used in html or not if i'm using angularjs.
Please let me know if i can use alert the same way we use in jquery.

once again thank you for any help.

You have to remove ng-click on submit & add it form as ng-submit="create()" — Jain, Nov 22 '14 at 20:19

Nikolay Melnikov · Accepted Answer · 2014-11-26T14:38:13.083

1

Do you have onsen module dependency included in your index.html file?

Here is a working version of your code, with the onsen excluded.

One could use a single ng-app at the <html> or <body> tags. Make sure to have a single ng-app attribute over the whole app.

As for:

You can use <form> like that.
You can.

:)

PS: The Plunker example I provided doesn't get the problem of areq, as you may see in browser's console.

edited Nov 26 '14 at 14:38

answered Nov 22 '14 at 20:17

Nikolay Melnikov

1,395
1
15
25

it is showing the same error for me if i go without `onsen` but onsen is included because i'm working with onsen ui – user2881430 Nov 22 '14 at 20:22
Do you mention controller or app names anywhere else in your `html` file by any chance? – Nikolay Melnikov Nov 22 '14 at 20:25
change `ng-app="joinus"` to `ng-app=joinus` – Nikolay Melnikov Nov 22 '14 at 20:27
and in general, more clues here: http://stackoverflow.com/questions/17289236/error-argument-is-not-a-function-got-undefined – Nikolay Melnikov Nov 22 '14 at 20:29
and a check-sequence here: http://stackoverflow.com/questions/26797756/how-to-find-a-reason-angularjs-argument-myctrl-is-not-a-function-got-undefin/26797874#26797874 – Nikolay Melnikov Nov 22 '14 at 20:30
i already checked that, that possibilities haven't resolved my query – user2881430 Nov 22 '14 at 20:31
i think everything is correct according to them, but this problem is still not getting resolved – user2881430 Nov 22 '14 at 20:35
is there more to the error that you posted? would you be so kind to update the question with an 'extended' error message? And also, the sequence of scripts inclusion in the `index.html` file. – Nikolay Melnikov Nov 22 '14 at 20:37
Thank you. And what happens if you try to include these `ng-app=joinus ng-controller="joinctrl"` in the `` tag of the index file? and remove them from where they currently are – Nikolay Melnikov Nov 22 '14 at 20:51
well i can't do that because i have one more form which will also be included in the same then – user2881430 Nov 22 '14 at 20:55
you can nest controllers and could put a single `ng-app` at the `` tag. Make sure to have a single ng-app over the whole app. And where do you include `angular.js` script? as well as `onsen.js`? – Nikolay Melnikov Nov 22 '14 at 20:59
but if i try doing that also it shows multiple errors – user2881430 Nov 22 '14 at 20:59
loader.js is having everything in it – user2881430 Nov 22 '14 at 21:08
anyway thank you for the help and i appreciate for giving me your precious time. – user2881430 Nov 22 '14 at 21:22
it helped me alot, i inserted ng-app variable in the `` tag and it worked. please edit your answer so thet i can select your answer as correct. – user2881430 Nov 26 '14 at 06:35
Done. Added a part about `ng-app` inclusion. – Nikolay Melnikov Nov 26 '14 at 14:39

score 0 · Answer 2 · answered Nov 22 '14 at 20:15

0

Form does need to be used when you are using AngularJS. It is the same way as you would for other frameworks. The way you added ng-click to the submit button is valid.
AngularJS is just a JavaScript framework. The way you used alerts is valid.

May I ask at what point/for what action do you get Uncaught Error: [ng:areq] Argument 'joinctrl' is not a function, got undefined?

answered Nov 22 '14 at 20:15

tuzhucheng

158
3
9

well as @nikolay answered about this, it is working fine in demo. but when i'm using it in monaca debugger, it is showing me such errors – user2881430 Nov 22 '14 at 20:24

Angularjs controller is showing error

2 Answers2