I am working on MVC application with AngularJS (1.5) version. I want to maintain two different layout one before login and one after login. How Can I achieve that ?
E.g Lets say on Login I want to show different Layout/Form .. but after successful login, user redirects to different layout which will be same for rest of pages.
As I am working on MVC so I have to put code either View/Shared/_Layout or any default controller eg. Views/Home/Index .. but How can I maintain two different layout?
Angular routing will be like this
var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);
angularFormsApp.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider
.when("/account/index", {
title: "Login",
templateUrl: window.serverURL+"app/Login/loginTemplate.html",
controller: "loginController"
})
.when("/forgotpasswordform", {
title: "Forgot Password",
templateUrl: window.serverURL + "app/Login/forgotPasswordFormtemplate.html",
controller: "loginController"
})
.when("/forgotpasswordconfirmation", {
title: "Forgot Password",
templateUrl: window.serverURL + "app/Login/forgotPassConfirmationTemplate.html",
controller: "loginController"
})
.when("/ResetPassword/:paramhash", {
title: "Reset Password",
templateUrl: window.serverURL + "app/ResetPassword/resetpasswordTemplate.html",
controller: "ResetPassController"
})
.when("/Registeruser", {
title: "New External User Setup",
templateUrl: window.serverURL + "app/RegisterUser/registeruserTemplate.html",
controller: "RegisterUserController"
})
.when("/Manageuser/", {
title: "Manage Users",
templateUrl: window.serverURL + "app/ManageUsers/manageUsersTemplate.html",
controller: "manageUsersController"
})
.when("/changepassword/", {
title: "Change Password",
templateUrl: window.serverURL + "app/ChangePassword/changePasswordTemplate.html",
controller: "changePasswordController"
})
.otherwise({ redirectTo: "/account/index" });
}]);
maybe store information in template that the user is logged and then pass it to the rootScope like <script>var username='<?php echo $username;?>';</script>
and then before setting up routes check global variable username
if it is not empty take some other templates
another way is to use ng-if somewhere in the template where you want other css or html to be present like <div ng-if="username"></div>
if you want only redirect after successful login you can either redirect by your router or just show another content using ng-if
if your layouts are complicated and somehow big enough then use ng-include and make one file decide what to show while not integrating in your html schema
you must tell somehow your app that now we are displaying this and now something else, it can be by server or client side of your code, it depends on your architecture
Related
I am new to AngularJS, and I am a little confused of how I can use angularjs ui-router in the following scenario:
It consists of two sections. The first section is the Homepage with its login and sign up views, and the second section is the Dashboard (after a successful login).
When I logged in success need to navigate from login form to "Home page".
When I tapped a registration button I need to navigate to "Registration page" from login page
Similarly I also need a "forgot password" screen
My current router is below. How can I do this functionality? (Please help with some HTML code and related controllers)
app.js:
'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.when('/register', {
templateUrl: 'register.html',
controller: 'RegisterController'
})
.when('/forgotPassword', {
templateUrl: 'forgotpassword.html',
controller: 'forgotController'
})
.when('/home', {
templateUrl: 'views/dashBoard.html',
controller: 'dashBordController'
})
.otherwise({
redirectTo: '/login'
});
}]);
});
Firstly, nobody will design a website with your requirements / functionalities for you. stackoverflow is for specific problems, your questions is too broad, more about it - How to Ask. But to help you with a conversion from ngRoute to ui.router I can describe what the syntax should look like so you can adopt it for your website.
Converting to ui.router
Your config doesn't change that much. you need to replace .when with .state, use the right providers, and have the right syntax. Here is an example with just few states:
app.config(config);
/* your preferred way of injecting */
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider.
state("HomepageState", {
url: "/home",
templateUrl: 'views/dashBoard.html',
controller: 'dashBordController'
}).
state("RegisterState", {
url: "/register",
templateUrl: 'register.html',
controller: 'RegisterController'
})
/*
more can be added here...
*/
$urlRouterProvider.otherwise('/login');
}
Navigation
You should be using states for navigation at all times. So replace href="url" with ui-sref="state". Here are some examples of anchor links:
<a ui-sref="HomepageState">Home page</a>
<a ui-sref="RegisterState">Register</a>
Don't forget to replace your ng-view with ui-view. (For older browser support it's better to have <div ui-view></div> instead of <ui-view></ui-view>)
Redirection
After filling in a login form, the user will press something like:
<button ng-click="login()">Sign in</button>
which will call a function login() that will validate / verify if the user can be logged in. (You can also have <form ng-submit="login()"> with <button type="submit">...) Then, if everything is fine and the user got his session / cookie, you can have a redirection to another page with:
$state.go("HomepageState");
(Don't forget to inject $state into your controller)
Advanced navigations
In the future if you have user profiles that are listed by their index. Your routing can be improved with $stateParams. Their job is to check any additional parameters in the URL. For example: a URL: /profile/721 can have a state with url:"/profile/:id". Then you can extract that id with $stateParams.id and use it in your controllers. And your redirection would look like:
$state.go("ProfileState", { "id": 721});
I want to know if its possible to change the master page which is used by ngroute for specific pages. For example, I want to display different master page or exclude completely the master page for specific pages but still maintain the url structure.
Example:
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/views/home/index.html"
})
.when("/ourteam", {
templateUrl: "/views/home/our-team.html",
title: "Our Team"
})
.when("/login", {
templateUrl: "/views/home/login.html",
title: "Login",
countroller: "loginController"
});
$routeProvider.otherwise({ redirectTo: "/home" });
$locationProvider.html5Mode(true);
});
Url redirect works fine but the actual layout is messed up because the login page has different markup. Is it possible to switch to another master page for specific pages?
If you want different Layout for different routes than I guess you have to switch from ngRoute to uiRouter as uiRouter is more flexible in terms of creating routes and associating views to it.
There is a very nice tutorial given by Tim Kindberg on youtube for the same, I am sharing the link below just go through it.
Link:https://www.youtube.com/watch?v=dqJRoh8MnBo
I am developing an application that is supposed to be a single-page application.
The tools I am using are AngularJS, NodeJS, ExpressJS and Jade for templating.
So far I've been working with a page that has a ng-view directive on it, and I can change its content to display the page I want, while maintaining the side menu.
Now I've come to a point where I need to create a login/create account page (that I am calling 'intro', for now), and this one should use all the screen space, removing the menu as well.
How can I achieve this? My route file looks as follows:
var akaAcademicManagerApp = angular.module('akaAcademicManagerApp', ['ngRoute', 'akaAcademicControllers']);
akaAcademicManagerApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard',
controller: 'DashboardController'
}).
when('/profile', {
templateUrl: 'partials/profile',
controller: 'ProfileController'
}).
when('/intro', {
templateUrl: 'partials/introPage',
controller: 'IntroController'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
angular.module('akaAcademicControllers', []);
I think this can help you (yet, i don't think it's the optimal solution but it works)
in your index.html,after your body tag put this:
<div ng-include="accessToApplication()"></div>
Now in your controller:
$scope.loggedIn = false;// true when the user is logged in
$scope.accessToApplication = function () {
if (!$scope.loggedIn) {
return "partials/introPage.html";
}
else {
return "path to the page containing the ng-view";
}
};
I advice you to take a look at ui-router and multiple named views (https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views)
My project was built on PHP and has some pages on Angular JS. There are three types of accounts in system. Authorization system is based on PHP/Mysql.
For each account I have personal.html template. When user is logged via account(1) I need to show him template /public/html/personal.html from route, if account(2) - template /public/html/personal2.html .etc. So, path /profile/personal/:type is the same for each.
How I can manage this accounts pages with a good level of security?
I use routeProvider:
$routeProvider
.when('/profile/personal/:type', {
templateUrl: '/public/html/personal.html',
controller: 'ProfileController'
})
You can use a function as templateUrl parameter and use it to select the template for the current account type:
$routeProvider
.when('/profile/personal/:type', {
templateUrl: function(params) {
switch(params.type) {
case 1:
return: '/public/html/personal1.html';
}
},
controller: 'ProfileController'
});
I have a challenge with nested routes, in angular js, here is snippet in app.js
...
when('/profile/:id', {
templateUrl: 'partials/profile',
controller: 'profileCtrl'
}).
when('/profile/:id/editTaskList', {
templateUrl: 'partials/editTaskList',
controller: 'checkListCtrl',
activeMenu: 'editTaskList'
}).
...
I want to have to access to the "profile data" in every single route under the "/profile/:id".
"Profile Data" example is :
{
user: "demo",
title: "dev"
}
and it comes through AJAX(JSON) based on the ID in the routs
The way how it is setup now, is having a service to get the User profile and I make the service request for the profile ID in "profileCtrl".
The problem that I have, if someone share the url and goes right away to "/profile/:id/editTaskList", the "profileCtrl" doesn't fire .
I don't think by adding service request in "checkListCtrl" is a good practice , because I'll have more nested routes under the "profile" and it will require to duplicate the code in multiple controllers.
What is the best practice to fix this issue ? For me would work as well if i can fire "profileCtrl" all the time when we are "/profile/:id" or lower
you can get your data before you controllers are initalized
...
when('/profile/:id', {
templateUrl: 'partials/profile',
controller: 'profileCtrl',
resolve: {
profile: ['ProfileService','$route', function (ProfileService,$route) {
return ProfileService.getProfile($route.current.params.id);
}]
},
}).
when('/profile/:id/editTaskList', {
templateUrl: 'partials/editTaskList',
controller: 'checkListCtrl',
resolve: {
profile: ['ProfileService','$route', function (ProfileService,$route) {
return ProfileService.getProfile($route.current.params.id);
}]
},
activeMenu: 'editTaskList'
}).
...
controller will be
function myCtrl($scope,profile){
// now profile is your data
}