How can iI implement broadcast to my app in angular

Question

console.log('js');

var myApp = angular.module('myApp', ["ngRoute"]);

myApp.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrlnp: 'views/partials/logIn.html',
    controller: 'LoginController as lc'
  }).when('/register', {
    templateUrl: 'views/partials/register.html',
    controller: 'RegisterController as rc'
  }).when('/login', {
    templateUrl: 'views/partials/logIn.html',
    controller: 'LoginController as lc'
  }).when('/userProfile', {
    templateUrl: 'views/partials/userProfile.html',
    controller: 'UserProfileController as uc'
  });

}); //end config

//global variables

myApp.controller('DefaultController', DefaultController);
myApp.controller('RegisterController', RegisterController);
myApp.controller('LoginController', LoginController);
myApp.controller('UserProfileController', UserProfileController);

function DefaultController(navBarService) {
  var vm = this;
  console.log('inside of DefaultController');
  navBarService.toggleHeader(vm.toggleHeader);
  vm.toggleHeader = true;



} //end DefaultController

function RegisterController(credentialsService) {
  var vm = this;

  console.log('RegisterController');
  vm.register = function() {
    if (vm.firstNameRegister === undefined || vm.lastNameRegister === undefined || vm.emailRegister === undefined || vm.passwordRegister === undefined || vm.zipcode === undefined) {
      sweetAlert({
        title: "Error!",
        text: "Something went wrong",
        type: "error"
      }); //end of sweetAlert
    } else if (vm.firstNameRegister === '' || vm.lastNameRegister === '' || vm.emailRegister === '' || vm.passwordRegister === '' || vm.zipcode === null) {
      sweetAlert({
        title: "Error!",
        text: "Something went wrong",
        type: "error"
      }); //end of sweetAlert
    } else {
      var userCredentials = {
        firstName: vm.firstNameRegister.toLowerCase(),
        lastName: vm.lastNameRegister.toLowerCase(),
        email: vm.emailRegister,
        password: vm.passwordRegister,
        zipcode: vm.zipcode
      }; //end userCredentials

      credentialsService.sendRegister(userCredentials);


    } //end of conditional statement
  }; //end register function
} //end register controller



function LoginController(credentialsService) {
  var vm = this;
  console.log('LoginController');


  vm.login = function() {
    if (vm.emailLogin === undefined || vm.passwordLogin === undefined) {
      sweetAlert({
        title: "Error!",
        text: "Something went wrong",
        type: "error"
      }); //end of sweetAlert
    } else {
      var userCredentials = {
        email: vm.emailLogin,
        password: vm.passwordLogin
      }; //end userCredentials
      console.log(userCredentials);
      credentialsService.sendLogin(userCredentials).then(function() {
        console.log('back from the service with', credentialsService.response);
        if (credentialsService.response === 'Match!!!') {
          var id = userCredentials.email;
          credentialsService.getUsers(id);
          window.location.replace("http://localhost:7138/#!/userProfile");
        } else {
          sweetAlert({
            title: "Error!",
            text: "No user found",
            type: "error"
          }); //end of sweetAlert
        } //end of else
      }); //end of then
    } //end of else conditional statement

  }; //end log in function
} //end register controller



function UserProfileController() {
  console.log('inside of UserProfileController');
  var vm = this;

  vm.getUserInfo = function() {
    console.log('inside of getUserInfo');

  }; //end of getUserInfo

} //end of userProfile

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Rental app</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="vendors/angular.min.js" charset="utf-8"></script>
  <script src="vendors/angular-route.min.js" charset="utf-8"></script>

  <script src="scripts/client.js" charset="utf-8"></script>
  <script src="scripts/services/credentialsService.js" charset="utf-8"></script>
  <script src="scripts/services/navBarService.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js" charset="utf-8"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
  <link rel="stylesheet" href="styles/register.css">
</head>

<body ng-app='myApp'>
  <div class="container" ng-controller='DefaultController as dc'>
    <div class="Navigation" ng-if='dc.toggleHeader'>
      <h1>Navigation</h1>
    </div>
    <ng-view></ng-view>
  </div>

</body>

</html>

When someone hits the login or registration partial page, I want the Navigation text to not appear. The problem is that I cant talk to different controllers. In my index.html page i have the navigation div "ng-if='dc.toggleHeader'" set to true in my default controller: "vm.toggleHeader = true;". When the user navigates to the login or register controller, how do i set vm.toggleHeader = false so the nav div will hide. Would broadcasting help me here?

possible answer: https://stackoverflow.com/questions/19446755/on-and-broadcast-in-angular — Etherealm, Jun 29 '17 at 02:22

georgeawg · Answer 1 · 2017-06-29T03:45:32.390

When the user navigates to the login or register controller, how do i set vm.toggleHeader = false so the nav div will hide.

The DefaultController can use the $route service to the determine current templateUrl in use:

function DefaultController(navBarService, $route) {
  var vm = this;
  console.log('inside of DefaultController');
  navBarService.toggleHeader(vm.toggleHeader);
  vm.toggleHeader = true;
  vm.$doCheck = function() {
      vm.toggleHeader = true;
      if ($route.current.templateUrl == 'views/partials/logIn.html') {
          vm.toggleHeader = false;
      };
      if ($route.current.templateUrl == 'views/partials/register.html') {
          vm.toggleHeader = false;
      };
  };          
}

On each digest cycle, the $doCheck function will check the current route and set toggleHeader to the appropriate value.

For more information, see

How can iI implement broadcast to my app in angular

1 Answers1