Angular nested views?

Question

I am stuck with using multiple controllers on a single page. I am building a website using bootstrap and angular. I have the top navbar (currently served as index html from flask), and a content div where I have ng-view. The content div is populated by controllers launched by angular $routeProvider. In the navbar I have a user icon and a "logout" button which should change after one of the controller calls the API and user gets logged in. How do I do it without having redirects from backend? I guess I need to have the navbar rendered with another angular controller, but how do I communicate events between the components? Is there some mediator API? The only "solution" I found is based on ng-switch and ng-include. It seems overcomplicated, and in this case I'd rather use jinja2 inheritance. Can anybody point me at the right manual how to build it using multiple views and a routing?

Answer 1

You would need to define a service

This a singleton that will be shared across all your controllers.

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

module.service('loginService', function() {
    return {loggedIn: false}
});

Then in your controllers you have code like this:

app.controller('SomeController', ['$scope', 'loginService', function($scope, loginService) {
  $scope.loginService= loginService;

  $scope.$watch('loginService.loggedIn', function(newValue, oldValue) {
       // TODO handle login/logout
   });
}]);

Another possible solution is to inject the root scope into the login service and emit events when the user logs in or out