All geek questions in one place

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

I use ngRoute to route my AngularJS application (myApp), but I have a problem: I don’t know how to NOT APPLY my index.html project (with all my login.html ) for my login.html , which apparently applied by default if it is defined as a view. I want a simple design for my login.html page: there are only two fields to fill in, without the design of my index.html , which applies to all views in myApp. Thus, I do not know how to perform my routing in order to perform such a task. Thank you very much.

<- This is an example of how I perform my routing in myApp (for only one view - "/ view1") →

Example 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 in which I determined its routing and controllers. For example, for the 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>

+5
source share
4 answers

Given that the situation above looks like you want to use a 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 has only two fields for filling in. So angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki ) might be the solution to this problem.

The idea behind this ui-router has a very powerful tool called ui-view , which you can see as a layout or template. Therefore, when the path is on any page except the login page, for example /index or /home , use one ui-view and on the /login page, then use another ui-view .

As an example, index.html:

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

I assume that you will again use the head part to simply wrap every thing from the body in the original index.html and put in the new index.html . The same goes for the login.html login login.html .

configuration 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 the above code does is very similar to what you did with $routeProvider , it determines which url use controller on and load view .

Hope this helps you if any question informs me please.

+2
source

You need to create your login page as diferente ngApp, save your sesion to localSotarge in case of successful login, and then redirect to the main ngApp.

In your main ngApp, check if a session exists in localStorage and is redirected to loginApp if it is not.

I know this sounds a bit like overwork, but I have not found another solution in my 3 years working with AngularJS. Now keep in mind that this is necessary because you do not need to access your index.html, and the only way to do this is to use another ngApp.

+2
source

Routing is used to enter views in angular SPA. From what I got from your question, you need a login dialog. For this, you can look at ngDialog or uibDialog

0
source

In your case, you need to load a new layout. I understand that the main layout is used for logging in and for the application. This operation is equal to redirecting the page to a new location. With the new app and angular controllers for login. You can use:

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

Read more @ angular Dev Docs .

0
source

Source: https://habr.com/ru/post/1247136/

More articles:


All Articles