Success message, Javascript and Angular

Question

I’m making an application where I register a new company, I’m starting in java script and I’m also using Angular in my project. What I want to do is, when the user clicks to register, give a success message and then return to the homepage, I tried with Alert, but I don’t know how to make the message appear only after the registration is successfully performed.

This is my form :

<form role="form" name="formCadastroEmpresa" ng-submit="formCadastroEmpresa.$valid && cadastrarEmpresa()" novalidate>

I need to call the message submit="formCadastroEmpresa.$valid && cadastrarEmpresa()" is true, and before calling the cadastrarEmpresa() of the angular I need to give an alert, or anything of the kind to warn the user that everything went right.

An example form group I’m using:

<div class="form-group"  ng-class="{ 'has-error' : formCadastroEmpresa.empresaTelefone.$touched && formCadastroEmpresa.empresaTelefone.$invalid }">
   <label>Telefone</label>
   <input 
      minlength="13"
      name="empresaTelefone"
      class="form-control"
      id="telefone"
      placeholder="Telefone fixo"
      ng-model="empresa.telefone" required>
</div>
<p ng-show=" formCadastroEmpresa.$submitted && formCadastroEmpresa.empresaTelefone.$invalid" style="color:red">Um telefone para contato é necessário</p>

Answer 1

You can use the library angular-Growl which is pretty cool. Example:

angular.module('myApp', ['angular-growl', 'ngAnimate']);

angular.module('myApp').config(['growlProvider', function (growlProvider) {
  //Configuração do tempo que a mensagem ficará na tela
  growlProvider.globalTimeToLive(5000);
}]);

angular.module('myApp').controller("myCtrl", function($scope, growl){
 $scope.alerta = function(){
    var config = {};
    growl.success("<b>Mensagem de Sucesso</b>", config);
    growl.info("Mensagem Info", config);
    growl.warning("Mensagem Alerta", config);
    growl.error("Mensagem Erro :(", config);
 }
});

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//rawgit.com/JanStevens/angular-growl-2/master/build/angular-growl.css" />

<div ng-app="myApp" ng-controller="myCtrl">
   <div growl></div>
   <button class="btn btn-success" ng-click="alerta()">Alerta</button>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-sanitize.js" type="text/javascript"></script>
<script src="//rawgit.com/JanStevens/angular-growl-2/master/build/angular-growl.js" type="text/javascript"></script>

Don’t forget to add dependencies to your project.