Controller Angular

Yohann3396

Hello,
I have a question

I started with Onsen UI and Angular; And I try to understand the controller system

I understood that we had to put a main controller ng-app and after controllers smaller.

In the example below I only have my second controller that works

How can I solve and why use ons.bootstrap for the global controller?

Thank you


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <link rel="stylesheet" href="css/design.css">
  <link rel="stylesheet" href="css/anime.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script>ons.platform.select('android');</script>
  <script src="https://unpkg.com/onsenui@2.5.1/js/angular-onsenui.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/applideco.js"></script>
  <script type="text/javascript" src="MWBScanner.js"></script>
  <script type="text/javascript" src="js/MWBConfig.js"></script>
  <script type="text/javascript" src="js/all_page.js"></script>
<script>
var app = angular.module('my-app', ['onsen']);
ons.ready(function() {

// Détection changement Carousel
carouselAccueil.on('postchange', function(event) {
document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true; 
 });



    
});

// Gestion du formulaire de connexion

ons.bootstrap()
  .controller('connexionController', function() {
    this.email = '';
    this.password = '';

    this.connexion = function() {
      
      if (connexionForm.$invalid) {
 
toast('Le formulaire est incomplet.');

      }
      else {




      }
    };

  });



// Gestion du formulaire d'inscription

ons.bootstrap()
  .controller('inscriptionController', function() {
    this.email = '';
    this.password = '';

    this.inscription = function() {
      
      if (inscriptionForm.$invalid) {
 
toast('Le formulaire est incomplet.');

      }
      else {


      }
    };

  });


</script>

<style type="text/css">
  ons-input  {
    width: 100%;
    font-size: 22px;
  }
textarea
{
 width: 100% !important; 
}



.item-label {
  display: table-cell;
  vertical-align: middle;
  color: white;
  line-height: 1;
  font-size: 48px;
  font-weight: bold;
}

ons-carousel[fullscreen] {
  top:49px;
}




</style>
</head>
<body onload="onLoad()">


<ons-navigator var="CategoryNavi">
<ons-page>



<div id="myTabbar" class="tabbar tabbar--top tabbar--material">
  <label  class="tabbar__item tabbar--material__item" onclick="document.getElementById('carouselAccueil').setActiveIndex(0);">
    <input type="radio" name="tabbar-material-a" checked="checked">
    <button class="tabbar__button tabbar--material__button">
      <i class="tabbar__icon tabbar--material__icon zmdi zmdi-search"></i>
      <div class="tabbar__label tabbar--material__label">Connexion</div>
    </button>
  </label>

  <label onclick="document.getElementById('carouselAccueil').setActiveIndex(1);" class="tabbar__item tabbar--material__item">
    <input type="radio" name="tabbar-material-a">
    <button class="tabbar__button tabbar--material__button">
      <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
      <div class="tabbar__label tabbar--material__label">Inscription</div>
    </button>
  </label>



</div>





<ons-carousel var="carouselAccueil" id="carouselAccueil"   fullscreen swipeable auto-scroll overscrollable>
    

<ons-carousel-item>
<ons-navigator page="connexion.html"> <ons-navigator>
</ons-carousel-item>

<ons-carousel-item>
<ons-navigator page="inscription.html"> <ons-navigator>  
</ons-carousel-item>

</ons-carousel>


</ons-page>
</ons-navigator>


<!-- Template Connexion -->
<template id="connexion.html">

 <ons-page ng-controller="connexionController as page" >



 <ons-card>
    <div class="title">Connexion</div>
    <div class="content">

<form name="connexionForm">

    <p>
      <ons-input type="email" name="connexionEmail" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"    placeholder="Adresse e-mail (requis)"  float ng-model="page.email" required>
      </ons-input>
    </p>  
 
     <p>
      <ons-input type="password" name="connexionPassWord"    placeholder="Mot de passe (requis)"  float ng-model="page.password" required>
      </ons-input>
    </p>  
 
    <p>

    </p>
    <p style="margin-top: 30px;">
      <center><ons-button ng-click="page.connexion()" ng-disabled="connexionForm.$invalid">Connexion</ons-button></center>
    </p>
</form>

   <span ng-show="connexionForm.connexionEmail.$error.pattern">L'adresse e-mail n'est pas valide.</span><br>

</div>
 </ons-card>

 </ons-page>
</template>

<!-- Template Inscription -->
<template id="inscription.html">
   <ons-page ng-controller="inscriptionController as page" >



 <ons-card>
    <div class="title">Inscription en 30 secondes </div>
    <div class="content">

<form name="inscriptionForm">

    <p>
      <ons-input type="email" name="inscriptionEmail" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"    placeholder="Adresse e-mail (requis)"  float ng-model="page.email" required>
      </ons-input>
    </p>  
 
     <p>
      <ons-input type="password" name="inscriptionPassword"  pattern=".{6,}"   placeholder="Mot de passe (requis)"  float ng-model="page.password" required>
      </ons-input>
    </p>  
 
  <ons-list>

    <ons-list-item tappable>
      <label class="left">
        <ons-checkbox input-id="check-1" ng-model="page.cgu"></ons-checkbox>
      </label>
      <label for="check-1" class="center">
        J'accepte les conditions générales d'utilisation
      </label>
    </ons-list-item>
    <ons-list-item tappable>
      <label class="left">
        <ons-checkbox input-id="check-2" ng-model="page.newsletter"></ons-checkbox>
      </label>
      <label for="check-2" class="center">
        Recevoir la newsletter 
      </label>
    </ons-list-item>
  </ons-list>
  
  
    <p style="margin-top: 30px;">
      <center><ons-button ng-click="page.inscription()" ng-disabled="inscriptionForm.$invalid">Inscription</ons-button></center>
    </p>
</form>

   <span ng-show="inscriptionForm.inscriptionEmail.$error.pattern">L'adresse e-mail n'est pas valide.</span><br>
   <span ng-show="inscriptionForm.inscriptionPassword.$error.pattern">Le mot de passe doit faire 6 caractères minimum.</span><br>
J'ai oublié mon mot de passe? // Push vers oublie.Html
    </div>
 </ons-card>


 </ons-page>
</template>


</body>
</html>

misterjunio

@Yohann3396 before turning to Onsen UI you should maybe understand Angular’s module and controller system on their own first.

In your example you probably only need one module with several controllers for your pages. What ons.bootstrap does is basically initialize a module for you so you don’t need to use ng-app, either use one or the other. You can also provide a module’s name as the first parameter of ons.bootstrap, (documentation here).

Fran Diox

@Yohann3396 I think it’s not that complicated, you can use AngularJS controllers as you want, there are no restrictions.

ons.bootstrap(...) method is just an alias for angular.module('my-app', ['onsen', ...]), so you only need to use one of them. The second one, however, requires you to specify ng-app="my-app" somewhere in the document (you dind’t write it, so I might not work as expected), whereas the first one doesn’t.

Therefore, writing var app = ons.bootstrap(); once and then as many app.controller(...) as you want should work.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Controller Angular