Login Page without Index.html Design - ngRoute (AngularJS)

Question

I'm using ngRoute to do the routing of my AngularJS application (myApp) but I have a problem: I don't know how to NOT APPLY my index.html design (with all my sidebars) to my login.html page, which seems to be applied by default if it is defined as a view. I want a simple design for my login.html page: only two fields to fill out, without the design of my index.html, which is applied to all the views in myApp. Thereby, I don't know how to do my routing to accomplish such task. Thank you very much.

<-- This is a sample of how I do my routing in myApp (for only one view - "/view1") -->

Sample of app.js:

'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

For each view there is a .js file associated where I defined its routing and controllers. For instance, for view "/view1" - view1.js:

'use strict';

 angular.module('myApp.view1', ['ngRoute', 'ngResource'])

 .config(['$routeProvider', function($routeProvider) {
   $routeProvider.when('/view1', {
    templateUrl: 'view1.html',
    controller: 'View1Ctrl'
   });
 }])

.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);

And a sample of my index.html:

<!doctype html>
<html lang="en" ng-app="myApp">
 <head>
  <script src="view1.js"></script>
  <-- MORE SCRIPTS ARE LOADED --> 
 </head>
 <body class="hamburg" ng-controller="MasterCtrl">
  <-- SIDEBARS ARE DEFINED -->
  <div id="content-wrapper">
   <div class="page-content">

    <!-- Main Content -->
    <div class="row">
     <div class="col-xs-12">
       <div class="widget">
         <div class="widget-body">
          <div ng-view></div>
         </div>
       </div>
     </div>
    </div>

  </div>
 </div>
</body>

A real bare bones approach would be something like this: https://jsfiddle.net/u2um2yeq/ Note, there is more that needs to be done to make that fiddle login secure, like using services to validate a user or token on each request. — Rob, Apr 14 '16 at 14:21

score 3 · Accepted Answer · answered Apr 14 '16 at 15:44

Given the situation above looks like you want two page layout (page design or page template), the first one is now used in index.html, and the second one you want to use in login.html which just has two fields to fill out. So angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki) could be the solution to this issue.

The idea behind that is ui-router has a very powerful tool named ui-view which you can see it as a layout or template. So when the path is on any page other than login page like /index or /home use one ui-view, and on /login page then use another different ui-view.

For a rough example: index.html page:

<html>
    <head></head>
    <body>
        <div ui-view="layout"></div>
    </body>
</html>

I assume you will reuse the head part, so just wrap every thing from the body in the original index.html and put into the new index.html. Same to the login page login.html.

config file:

$stateProvider
  .state('index', {
      url: '/index',
      views: {
          layout: {
              templateUrl: "/path/to/index.html"
          }
      },
      controller: 'indexController'
  }

  .state('login', {
      url: '/login',
      views: {
          layout: {
              templateUrl: "/path/to/login.html"
          }
      },
      controller: 'loginController'
})

So what does the code above do is very similar to what you did with $routeProvider, it defines on which url use which controller and to load which view.

Hope this can help you, if any question let me know please.

Thank you, I think this is the best solution. I updated my routing with ui-router and it's now working. Thank you very much. — Ariana, Apr 15 '16 at 15:57
I had similar issue.I tried the above code.But only master page which contains headers and footers are loading.The content page is not loading.
is not working.@David do you have any idea? — Sachin HR, Oct 26 '17 at 04:22
Homepage is working but if i redirect to login page master page is also loading in the login page.I dont want index.html page design inside login page — Sachin HR, Oct 26 '17 at 06:41

score 2 · Answer 2 · answered Apr 14 '16 at 14:37

You need to create your login page as a diferente ngApp, store your sesion on the localSotarge in case of a successfull login and then redirect to you main ngApp.

In your main ngApp, validate if a session exists in the localStorage and redirecto to the loginApp if it dont.

I know it sounds a bit like overdoing stuff, but I have not found any other solution in my 3 years working with AngularJS. Now, keep in mind that this is necesary because you need to NOT TO APPLY your index.html, and the only way to do that is using another ngApp.

Thank you. It seems to be a good solution to my problem but I think that the easiest solution is probably to update my routing with angular-ui-router. — Ariana, Apr 14 '16 at 16:28

score 0 · Answer 3 · answered Apr 14 '16 at 14:13

0

Routing is used for injecting views in angular SPA. What I get from from your question is you need a login dialog. For that you may look ngDialog or uibDialog

answered Apr 14 '16 at 14:13

Ravi Tiwari

946
8
17

score 0 · Answer 4 · answered Apr 14 '16 at 14:22

In your case you need to load new layout. I understand, for login and for application there is mostly different layout. This operation is equal to redirecting page to new location. With new angular app and controllers for login. You can use:

$window.location.href="new/layout/template".

Login Page without Index.html Design - ngRoute (AngularJS)

4 Answers4

Linked