Controller Angular



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

  • Onsen UI

    @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).


  • Onsen UI

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


Log in to reply