Angular.js fails to instantiate the module

Asked

Viewed 560 times

1

Well, it’s the first time I’ve ever done anything with Angular.js and I’m picking up a bit to create a message of "Incorrect Login and Passwords" with the same.

I have a method in a file . js that is below:

angular.module('myApp',[])
    .controller('loginController', function($scope){
        $scope.displayLoginError = (url.indexOf("error") >= 0);
    });

Logo on my . jsp did the Angular and File import with my method:

    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/angular.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/pages/login.js"></script>

Nesta mesma pagina tenho um form de login com a DIV que faz a verificação 

<div ng-app="myApp">
    <div ng-controller="loginController">
        <div  ng-class="{{'': displayLoginError == true, 'none': displayLoginError == false}}">
            <span class="entypo-attention"></span> <strong>Erro!</strong>&nbsp;&nbsp;Login
            ou Senha Incorretos!
        </div>
    </div>
    <form class="form-signin" method="post"
        action="j_spring_security_check">

        <div class="input-group">
            <span class="input-group-addon entypo-user"></span> <input
                name="j_username" id="j_username" type="text" class="form-control"
                placeholder="Usuario">
        </div>
        <br>
        <div class="input-group">
            <span style="padding: 0 14px;" class="input-group-addon entypo-lock"></span>
            <input name="j_password" id="j_password" type="password"
                class="form-control" placeholder="Senha">
        </div>

        <button type="submit"
            class="btn btn-lg btn-fltees btn-primary btn-block">Entrar</button>

        <a href="<c:url value="register"/>"
            class="btn btn-lg btn-fltees btn-primary btn-block">Crie uma nova
            Agência!</a>

    </form>
</div>

Well, I’m using Spring Security. Just when the authentication fails a parameter and added in the URL (...?error=403), so my javascript method can go into action and display or not the message in my form.

The problem that such error message is displayed:

https://docs.angularjs.org/error/$injector/modulerr? P0=myApp&p 1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.0-rc.1%2F$injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20at%20E

Does anyone know how I can solve?

EDITION

The method that performs the URL check. In the url variable the value is right.

angular.module('myApp',[])
    .controller('loginController', function($scope, $location){
        var url = "" + $location.$$absUrl;
        $scope.displayLoginError = (url.indexOf("error") >= 0);
    });

This is the section where you will check for authentication error and will present the:

<div ng-controller="loginController">
    <div class="alert alert-danger" ng-class="{'': displayLoginError == true, 'none': displayLoginError == false}">
        <span class="entypo-attention"></span> <strong>Erro!</strong>&nbsp;&nbsp;Login ou Senha Incorretos!
    </div>
</div>

But logica doesn’t seem to work and no more bugs in the firebug console

javascript angularjs

  • You can’t see the complete error by this URL that you passed. It has to post the error message?

  • 1

    According to the codes you posted, the attribute ng-app="myApp" is set twice? <html lang="pt-BR" id="ng-app" ng-app="myApp"> and <div ng-app="myApp">. Other than that last div does not solve the problem? Anyway, post the complete error.

  • Hello @gabrielhof, well I removed the <div ng-app="myApp"> and it didn’t work. I edited the question with the completed bug firebug reports to me. Thank you

  • 1

    It seems to be a syntax error. Why did you put two keys ({{) in ngClass? (ng-class="{{'': displayLoginError == true, 'none': displayLoginError == false}}") Try to put only one on each side.

  • 1

    It’s true @Danguilherme. I think the directive ngClass do expects something similar to the format JSON: https://docs.angularjs.org/aping/directive/ngClass

  • In fact, it’s a JSON object that she really expects, because she will treat it as a normal javascript object internally.

  • Hi guys, I ended up leaving trip and could not test the solution offered by our friend @Danguilherme. But unfortunately it did not work. The error message this time was another. It is accusing that the url. I ended up taking this example in a blog, it seems that is not correct the way used by the writer of the same. Does anyone have any suggestions how can I get the value passed in the URL? I updated the question with the recent stacktrace. Thank you all.

  • In the login.js file, on line 3, you are referencing a variable url which was not previously declared. You can post the code of this file to confirm?

  • Hi @Danguilherme, I fixed the variable problem url, masw now seems that logic is not hitting. I edited the question again explaining what happens. Obliged by the help.

  • 2

    You’re using ng-class to hide the message? I don’t think it will work, remove this ng-class and tries to use ng-show="displayLoginError".

  • Yes that was the goal @gabrielhof. It worked perfectly with the ng-show. Thanks for your help. I’m going to grab some links to learn more about Angular.js. Have any suggestions you’d like to share?

  • 1

    Cool :) ! Just remember to post an answer explaining what you do to work.

  • Oops, I’ve answered it the way it worked @gabrielhof

Show 8 more comments

1 answer

1


Well, folks the problem was solved by editing the file. js where is the method in which it aims to show or not the login message.

login js.

angular.module('myApp',[])
    .controller('loginController', function($scope, $location){
        var url = "" + $location.$$absUrl;
        $scope.displayLoginError = (url.indexOf("error") >= 0);
    });

This is the section where you will check for authentication error and display the message:

<div ng-controller="loginController">
    <div class="alert alert-danger" ng-show="displayLoginError">
        <span class="entypo-attention"></span> <strong>Erro!</strong>&nbsp;&nbsp;Login ou Senha Incorretos!
    </div>
</div>

Remember that I had to change the tag by adding the parameter ng-app="myApp"

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.