طلب modulerr module error

tunisiano44

عضو مميز
إنضم
19 جويلية 2010
المشاركات
828
مستوى التفاعل
332
Salam,

je trouve cette erreur quand écrire code angular js:

AngularJS

code index.html:

HTML:
{% extends 'base.html.twig' %}
{% block title %} Acceuil {% endblock %}
{% block stylesheets %}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css">
<style>
 
a {
    text-decoration:none;
    color: #e74c3c;
        margin-right: 25px;
 
}
 
</style>
 
{% endblock %}
{% block body %}
<div class="container" ng-app="myApp">
    <a href="#/!">Acceuil</a>
 
<a href="#!login">Login</a>
<a href="#!register">Register</a> <br><br>
 
<div ng-view></div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.js"></script>
<script src="angularJwt.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script type="text/javascript" src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<scritp src="app.js"></script>
<script>
</script>
 
</div>
{% endblock %}

code login.html:

HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css">
<style>
 
body{
    background-color: #525252;
}
.centered-form{
    margin-top: 60px;
}
 
.centered-form .panel{
    background: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
}
 
a {
    text-decoration:none;
    color: #e74c3c;
    margin-right: 25px;
}
 
</style>
</head>
<body>
 
<div class="container" ng-app="myApp">
    <div style="margin-top:50px;" class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Welcome</h3>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="Username" ng-model="user" name="username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" ng-model="pass" name="password" type="password" value="">
                            </div>
                            <!-- Change this to a button or input when using this as a form -->
                            <button type="button" class="btn btn-success btn-block" ng-click="login()">Login</button>
                            <p>New Member? <a href="signUp.html" class="">Sign up</a></p>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js"></script>
</body>
</html>

code registere.html:


HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css">
<style>
 
body{
    background-color: #525252;
}
.centered-form{
    margin-top: 60px;
}
 
.centered-form .panel{
    background: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
}
 
a {
    text-decoration:none;
    color: #e74c3c;
        margin-right: 25px;
 
}
 
</style>
</head>
<body >
<div class="container" ng-app="myApp">
        <div class="row centered-form">
        <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                        <h3 class="panel-title text-center" >{{m}}</h3>
                         </div>
                         <div class="panel-body">
                        <form role="form">
                            <div class="row">
                                <div >
                                    <div class="form-group">
                            <input type="text" name="first_name" id="first_name" ng-model="username" class="form-control input-sm" placeholder="Username">
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6">
 
                            </div>
 
                            <div class="form-group">
                                <input type="email" name="email" id="email" ng-model="email" class="form-control input-sm" placeholder="Email Address">
                            </div>
 
                            <div class="row">
                                <div class="col-xs-6 col-sm-6 col-md-6">
                                    <div class="form-group">
                                        <input type="password" name="password" ng-model="password" id="password" class="form-control input-sm" placeholder="Password">
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6">
                                    <div class="form-group">
                                        <input type="password" name="password_confirmation" ng-model="confirmationpass" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password">
                                    </div>
                                </div>
                            </div>
 
                            <input type="submit" value="Register" ng-click="SendData()" class="btn btn-info btn-block">
 
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/js/bootstrap.min.js"></script>
 
 
 
</body>
</html>

et code app.js:


HTML:
var app = angular.module("myApp", ["ngRoute","ngStorage"]);
 
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when("/login", {
      templateUrl: Routing.generate('login',
        {template:"default/login.html.twig"}),
        controller: 'loginctrl',
    })
    .when("/register", {
      templateUrl: Routing.generate('register',
        {template:"default/registere.html.twig"}),
      controller: 'httpgetctrl', 
    });
}]);
 
    app.controller("httpgetctrl", function ($scope, $http) {
 
        $scope.SendData = function () {
           // use $.param jQuery function to serialize data from JSON
            var data = $.param({
                username: $scope.username,
                email: $scope.email,
                pass: $scope.password,
                confir: $scope.confirmationpass
            });
 
            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }
 
            $http.post("{{path('register')}}", data, config)
            .then(function (response) {
                console.log("success");
            })
            .catch(function() {
                console.log("error");
  })
        };
 
    });
 
    app.controller("loginctrl", function ($scope, $http,$localStorage) {
 
        $scope.login = function () {
           // use $.param jQuery function to serialize data from JSON
            var data = $.param({
                username: $scope.user,
                password: $scope.pass
            });
 
            var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }
 
            $http.post("{{path('login')}}", data, config)
            .then(function (response) {
                console.log("success");
                //$localStorage.LocalMessag = x ;
                //console.log($localStorage.LocalMessag);
            })
            .catch(function() {
                console.log("error");
  })
        };
 
    });

je déclare module MyApp en fichier app.js mais je trouve le probléme , quand il copie code app.js dans index.html cette erreur est disparâitre

aide moi s'il vous car je suis bloquée

et merci d'avance
 

B.Marwein

عضو
إنضم
18 جويلية 2017
المشاركات
95
مستوى التفاعل
71
Par ce que tu n'utilise pas la bonne logique d'Angular

Angular JS comme VueJS comme Backbone et React et pleins d'autres framework frontend, c'est pour creer des site One Page
Donc si tu utilise symfony alors ton fichier twig dois servir de template generale, ton appli back ne renvoi que une seule page, dans tous les cas elle te renvoi toujours la meme page, le meme code html qui ne contient que l'archi de base html et la div avec ton ng-app pour dire que angular va bosser ici
Conclusion, Symfony te renvoi ton index et ne te sert que d'une API que tu appelera en ajax

ensuite dans les differents fichiers html utilisé par Angular, tu ne redeclare pas ng-app par ce que si le code est lancé et la page est appelé ca veux dire que TU ES DEJA DANS ANGULAR, donc si tu le redeclare il va te dire qu'est ce que t'as bu ou t'as fumé ? je suis deja la, comme si tu lui dit : va chercher si je suis laba o_O

Revise un peu Angular JS avant de poser ton code, et conseil, utilise Angular 4 au lieu d'angularjs, sinon ton appli sera obselete dans tres peu de temps,
 

tunisiano44

عضو مميز
إنضم
19 جويلية 2010
المشاركات
828
مستوى التفاعل
332
Par ce que tu n'utilise pas la bonne logique d'Angular

Angular JS comme VueJS comme Backbone et React et pleins d'autres framework frontend, c'est pour creer des site One Page
Donc si tu utilise symfony alors ton fichier twig dois servir de template generale, ton appli back ne renvoi que une seule page, dans tous les cas elle te renvoi toujours la meme page, le meme code html qui ne contient que l'archi de base html et la div avec ton ng-app pour dire que angular va bosser ici
Conclusion, Symfony te renvoi ton index et ne te sert que d'une API que tu appelera en ajax

ensuite dans les differents fichiers html utilisé par Angular, tu ne redeclare pas ng-app par ce que si le code est lancé et la page est appelé ca veux dire que TU ES DEJA DANS ANGULAR, donc si tu le redeclare il va te dire qu'est ce que t'as bu ou t'as fumé ? je suis deja la, comme si tu lui dit : va chercher si je suis laba o_O

Revise un peu Angular JS avant de poser ton code, et conseil, utilise Angular 4 au lieu d'angularjs, sinon ton appli sera obselete dans tres peu de temps,

merci beaucoup pour votre réponse frére,
donc vous dites que tous les actions du symfony renvoie au même page est index.html.twig !! mais quand il fait login par exemple comment symfony connait que les données renvoyéé par ajax depuis page login ( car en page login j'ai formulaire où je saisie nom utilisateur et mot de pass )

!!
 

B.Marwein

عضو
إنضم
18 جويلية 2017
المشاركات
95
مستوى التفاعل
71
merci beaucoup pour votre réponse frére,
donc vous dites que tous les actions du symfony renvoie au même page est index.html.twig !! mais quand il fait login par exemple comment symfony connait que les données renvoyéé par ajax depuis page login ( car en page login j'ai formulaire où je saisie nom utilisateur et mot de pass )

!!
c'est le principe des transaction ajax. Symfony te sert d'API, ce qui veux dire que quand tu tape l'adresse de ton site qui est par exemple http://monsite.com/ alors symfony renvoi une page qui instancie angularjs, jusque la c'est bon !! pas tres complexe
c'est a partir de ce moment la que le comportement change car c'est angular js qui va prendre le relais, et tu remarquera que pour la page login par exemple ca deviens http://monsite.com/#!/ogin et non pas http://monsite/com/login c'est completement different, le premier c'est un lien en interne a la page, comme une ancre, et donc c'est angular qui va l'interpreter sans deveoir changer de page et rafraichir le navigateur, la deuxieme est un exemple d'url symfony ou l'on dois passer a une autre page et donc lenavigateur va recharger une autre page

Le fonctionnement n'est pas du tout le meme

le index.html.twig va rendre le rendu finale du site cote backend, donc comme j'ai dit rendu final, on n'y touche plus, c'est angular js qui fera toutes les modification et operations, le login c'est quoi ??
un login c'est saisir les identifiant, clique sur le bouton login , au clique angular devrai faire un appel en ajax a ton api symfony qui gere les login et lui dit : tiens je te poste cet identifiant et ce mot de passe, verifie moi tout ca ! symfony donc fait ce qu'il a a faire et repond c'est pas bon frero ; le mec n'existe pas chez moi. cette reponse est en json par exemple, à la reception de cette info angular va changer le dom en ajoutant un message d'erreur pour dire : ho mec t'es qui toi ?? verifie bien tes bordel si tu veux te connecter ou voici le lien pour t'enregistrer

mais dans tous ca ta page n'as pas fait de rafraichissement, alors il faut utilise $http.post pour envoyer le formulaire en methode post a ton api
JavaScript:
//Exemple avec une application appelé app
var app = angular.module('app', []);

app.controller('loginCtrl', function($scope, $http) {
       var login = function () {
       $http.post("/url/symfony/pour/login",{username : user, password : pass})
      .then(function(response) {
          //la tu recois la reponse de symfony , en generale le principe
          //d'une api c'est qu'elle nous renvoi des donnee soit ok avec le resultat
          //soit ko avec le message de'erreur
          //donc a toi de gerer la partie symfony deja en ce qui concerne les reponses
          //ensuite ici tu gere s'il faut afficher un message d'erreur si la rep est negative ou connecté le visiteur si symfony confire que tout est bon
      });
    }
  
});

bien sur tout ca change selon ta page, les noms de tes champs etc
 

tunisiano44

عضو مميز
إنضم
19 جويلية 2010
المشاركات
828
مستوى التفاعل
332
je modifié la code mais quand il ouvre page index dans navgateur ,il bloque navigateur et je peut faire rien , on peut pas clique sur la boutton login ou register :

code loginAction :

PHP:
public function loginAction() {

         $em = $this->getDoctrine()->getManager();
         $request = $this->getRequest();
         $test = null; $token = null; $res = null;
         if ($request->getMethod() == 'POST') {
             $username = $request->request->get('username');
            $password = $request->request->get('password');

         $test = $em->getRepository('MedBundle:Med')->findOneBy(array('username' => $username));

            if (!($test)) { $res = "error"; } else{
                $salt= $test->getSalt();
                $pass = crypt($password,$salt);
                if ( $pass !== $test->getPassword() ) { $res='error password'; } else {
                $res='success';  
         
            $token = $this->get('lexik_jwt_authentication.jwt_manager')->create($test);
            var_dump($token);
            $test->setToken($token);
               $em->persist($test);
            $em->flush();

         } }

 }      
             return $this->render('default/index.html.twig',array('test' => $test, 'token' => $token,'res' => $res));

     }


et je change dans la code twig que je supprime ng-app dans page login.html.twig et page registre.html.twig je laissse l'appel d'angular juste la page indeex.html.twig
 
التعديل الأخير:

B.Marwein

عضو
إنضم
18 جويلية 2017
المشاركات
95
مستوى التفاعل
71
je te met un petit exemple qui te montre comment transferer des donnees :
1- du controller angularjs vers la vue (avec le scope)
2- du controller dúne api php par exemple ou peut importe le langage , ver le controller angular avec le http (ajax)

tnsat-angular-exemple-http

HTML:
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
        <!--<link rel="stylesheet" href="css/main.css"> -->
        <style type="text/css" media="all">
            [ng-cloak] {
                display: none;
                background-color: #ffffff;
            }
            pre {
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <div ng-app="tnsatApp" ng-controller="tnsatCtrl" ng-cloak>
            <a ng-href="{{ link }}" target="_blank">{{ name }}</a>
            <pre ng-cloak>{{ resultatAjax | json}}</pre>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script>

        var tnsatApp = angular.module('tnsatApp', []);

        tnsatApp.controller('tnsatCtrl',['$scope', '$http', function($scope, $http) {
            var result = $http.get('https://www.data.gouv.fr/api/1/organizations/premier-ministre/')
                                .then(
                                    function(response) {
                                      $scope.resultatAjax = response.data;
                                      },
                                      function(error){
                                          console.log(error);
                                      });
           $scope.name = "Tunisia-sat";
           $scope.link = 'https://Tunisia-sat.com/'
        }]);
        </script>
      
    </body>
</html>

donc si tu veux utiliser des donnees qui sont dans ton controller Angular JS alors il faut les gerer avec le $scope, sinon si tu veux les recuperer dún backend symfony alors il faut utilise ajax, tu fait appel au liens backend et tu ecoute ce quíl te dit, dans mon cas il renvoi un json avec ce que jái demandé, je passe ce json dans une variable $scope et je peux donc lútiliser dans mon controller angular et ma vue

MAIS OUBLIE LE RENDU TWIG, TWIG cést juste pour te rendre la premiere page index qui contient la balise ng-app et cést tout, a partir de la cést angular qui prendra le relais pour tout faire, sinon ca ne sert a rien dútiliser angularjs, pourquoi tu te prend la tete dans ce cas la ?
 
التعديل الأخير:

B.Marwein

عضو
إنضم
18 جويلية 2017
المشاركات
95
مستوى التفاعل
71
Alors tu t'en sort avec ton projet ? J'ai l'impression que t'as une peu de mal de faire le pont entre le back et le front, l'histoire de controller et model et vue des deux côtés te brouille l'esprit
 
أعلى