Search code examples
javascriptangularjsonsen-uimonaca

Angularjs controller is showing error

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.

Solution

  • 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.