I am new to angularjs and setting up a basic web app where a user can login to search and update news articles which are posted from a different website.

I have got two questions:

1. User's login State: I am not sure how I can maintain a login state of the user which can be shared by all the controllers and this state should also be restored when the page is fully refreshed.

2. Partial templates and shared stuff: I have setup partial templates like Login.html, Search.html, Update.html etc and in my app.js I have defined routes as below:

'use strict';

var namApp = angular.module('namApp', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/login',
            {
                templateUrl: '/App/templates/Login.html',
                controller: 'loginController'
            });
        $routeProvider.when('/search',
            {
                templateUrl: '/App/templates/Search.html',
                controller: 'searchController'
            });
        $routeProvider.when('/update',
            {
                templateUrl: '/App/templates/Update.html',
                controller: 'updateController'
            });
        $routeProvider.otherwise({ redirectTo: '/login' });
    });

Now I am not sure how do I set up controllers to handle my top navigation, header, footer and all the other shared stuff between all my partial templates.

Any help will be highly appreciated.

Thanks

I am new to angularjs and setting up a basic web app where a user can login to search and update news articles which are posted from a different website.

I have got two questions:

1. User's login State: I am not sure how I can maintain a login state of the user which can be shared by all the controllers and this state should also be restored when the page is fully refreshed.

2. Partial templates and shared stuff: I have setup partial templates like Login.html, Search.html, Update.html etc and in my app.js I have defined routes as below:

'use strict';

var namApp = angular.module('namApp', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/login',
            {
                templateUrl: '/App/templates/Login.html',
                controller: 'loginController'
            });
        $routeProvider.when('/search',
            {
                templateUrl: '/App/templates/Search.html',
                controller: 'searchController'
            });
        $routeProvider.when('/update',
            {
                templateUrl: '/App/templates/Update.html',
                controller: 'updateController'
            });
        $routeProvider.otherwise({ redirectTo: '/login' });
    });

Now I am not sure how do I set up controllers to handle my top navigation, header, footer and all the other shared stuff between all my partial templates.

Any help will be highly appreciated.

Thanks

• javascript
• angularjs
• angularjs-service
• angularjs-routing

• 1 please split this into two separate questions. – Eliran Malka Commented Mar 10, 2014 at 17:06

3 Answers 3

1. User state: Create a service

You can create a factory to save user state, which you could then inject into other controllers.

For exmaple:

app.factory('user', function($http){

  user = {
    loggedIn: false
    username: ''
    email: ''

    login: function (username, password){

      $http.post('/login', {username: username, password: password})

      .then( function(response) {
        user.loggedIn = true;
        user.username = response.data.username;
        user.email = response.data.email;
      });
      // TODO: ERROR HANDLING ETC.

    logout: function() { ... }

  }

  return user;

}

The problem with this (as you have eluded to in your question), is that if you refresh the page, username, email, etc. will not be populated despite the user having a logged in session. You have two options to get around this:

1. instead of directly accessing the user object, define a getter which will check whether the user is populated, and if not will make a request to the server to get the current session (you would obviously have to implement a route on your server to do this)

2. Use server side rendering to inject some code into a <script> tag that would then populate a user on window or similar. Your service could then look for this data when you instantiate it.

2. Partials & shared UI

Your page can be split into multiple parts, routeProvider configuration only defines which controller owns the part of the page with the ng-view attribute. I would suggest that your navigation should not be inside of this element, as this is independent of the route (it's always present). You can use an inline ng-controller attribute in your html to define which controller looks after the navigation.

For things that you reuse multiple times, then you should look into directives, which are basically re-usable bits of code (template and logic) that can have their own controllers defined.

1. You should define a service to handle your login state. You can also use ngCookies to maintain the status when you reload the page.

2. You should define ngView only for the element you want to change depending on the url path:

   <html ng-app="namApp">
    <body ng-controller="myController">
     <div class="header">...</div>
     <div class="left-navigation">...</div>
     <div ng-view></div>
     <div class="footer">...</div>
    </body>
   </html>
   

This way only the element with the ng-view attribute will be replaced with the template.

Answer 1

You should use angular services for these type situations. You can define your logic there and inject which module you want... the thing is you want to keep state even after refresh, normally when an angularjs app is bootstraped it runs services like other ones again to keep your state you should use $cookies or localStorage

Answer 2

If you are using $routeprovider then you should have ng-view somewhere in your html and the controller which is bind to your ng-view part only responsible for that part which means you are free to use another controller for other part of your html with adding ng-controller...