Using controller outside of view with AngularJS

Question

I am fairly new to using AngularJS and am trying to create a simple proof of concept with a static navigation bar to choose what action you would like to do. Currently I am using my index.html file as a "template" which includes the HTML for the nav bar then the ng-view via the $routeProvider.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js">
<!--<![endif]-->

<head>


</head>

<body class="container">

  <!-- Static navbar -->
  <nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavController">
    <!-- navbar buttons, links, etc. -->
  </nav>


  <div ng-view>
  </div>

  <!-- all the javascript imports down here . . . -->

</html>

What I am attempting to do is use a controller(NavController) to control the visibility of different links depending on whether the user is logged in or not. Things seem fine when I originally hit the landing page, but as soon as I route things to a different view it seems like the NavController loses scope or something.

For instance if I go to another link in my app and look at the scope in the debugger I see { This scope has no models }. If I hit refresh and look at the scope again I see the data as I would expect and things look correct.

I've done a little testing trying to figure things out and noticed that if I reference the NavController inside the ng-view then everything works fine, so I assume I am going about things the wrong way. Is there a certain way to go about getting this functionality?

score 0 · Answer 1 · answered Jun 16 '15 at 21:49

The best way to recognise an authenticated user is to use a service which stores info about user login. This is how you could define your service:

services.factory('UserService', [function() {
  var sdo = {
    isLogged: false,
    username: ''
  };
  return sdo;
}]);

Next step is to inject your service into each controller that needs to check whether the user is logged in or not:

ctrl.controller('loginCtrl', ['$scope', '$http', 'UserService', 
  function(scope, $http, User) { /* ... */ }]);

The code samples are taken from: http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app/

Another good resource for user authentication techniques is: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

Hope this helps.

I'm already using a service to keep track of things and it is injected into the NavController in my sample code above so that shouldn't be the issue. — itsthejash, Jun 16 '15 at 23:01

score 0 · Accepted Answer · edited May 23 '17 at 11:43

I was able to figure out my issue. I was not accessing the values in my service correctly.

I put together a quick sample showing things working correctly here: http://plnkr.co/edit/ihiEqKPHt8qoLT2dG6nl

This answer here from @jusio helped me see what is going on and why I was seeing issues. I was not correctly binding my property in the controller to the function in the service. The snippet below from my linked Plunker shows how I ended up binding things correctly for the status property in my controller between the service-controller-view.

.controller('v2Control', ['$scope', '$log', '$location', 'LoginService',
  function(sc, log, loc, ls) {
    sc.text = "#2"
    sc.status = ls.isVerified;

    sc.setLoggedIn = function() {
      ls.validateSession();
    }

    sc.setLoggedOut = function() {
      ls.killSession();
    }

  }
])

.factory('LoginService', ['$log', '$http',
  function(log, http) {
    var service = {};
    var verified;

    service.isVerified = function() {
      return verified;
    };

    (function() {
      if (service.verified === undefined)
        verified = 'false'
    })();

    service.validateSession = function() {
      verified = 'true';
    };
    service.killSession = function() {
      verified = false;
    };

    return service;
  }
]);

<div class="v2" ng-controller="v2Control">

  <p>This is view {{text}}</p>
  <button type="button" class="btn btn-primary" ng-click="setLoggedIn()">Log In</button>
  <button type="button" class="btn btn-primary" ng-click="setLoggedOut()">Log Out</button>
  <p>The user is logged in: <strong>{{status()}}</strong> 
  </p>
</div>

Using controller outside of view with AngularJS

2 Answers2