Angularjs controller is showing error

753 views Asked by At

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.

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

once again thank you for any help.

2

There are 2 answers

16
Nikolay Melnikov On BEST ANSWER

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:

  1. You can use <form> like that.

  2. You can.

:)

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

1
tuzhucheng On
  1. 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.
  2. 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?