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'
});
Related
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 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
I'm using Ui-router and in severals $states I have a parameter as a Guid like the example bellow (":numeroSolicitacao"):
.state('solicitacoes/aprovacoes', {
url: '/solicitacoes/aprovacoes/:numeroSolicitacao',
views: {
'conteudo-view#': angularAMD.route({
templateUrl: 'js/app/visoes/solicitacoes/aprovacoes/aprovacoes.html',
controller: 'ctrlAprovacoes',
controllerUrl: 'controles/solicitacoes/aprovacoes/ctrlAprovacoes'
})
}
})
Is there a way for doing globally to remove all ":numeroSolicitacao" parameters from track event with angulartics ? Otherwise each hit on this $state will be a different page for Google Analytics
Note: I'm adding the "$analytics.pageTrack('/solicitacoes/aprovacoes');" in all controllers already, but as I said I need some globally implementation.
I have a SPA that will display data from an API in two separate parts of the page. One section displays products and prices. This information will remain on the page. The other section is a basic CRUD view. It allows the user to create new selections, read their selections, edit their selections, and remove their selections. I'm trying to determine the best way to display these two views. The CRUD section uses ng-view. Should the price/product section use a directive, a separate controller, or should I break up the page into two modules?
I'm new to Angular, and want to make sure that I do things right to avoid unforeseen issues down the road.
HTML:
<div ng-view="">
<!--user selections go here -->
</div>
<!--Product/Price info will go here. Unsure whether to insert ng-app="new module", ng-controller="new controller", or a directive with its own element-->
Javascript for user selections view:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/list.html',
controller: 'ProjectListCtrl as projectList'
})
.when('/edit/:projectId', {
templateUrl: 'views/detail.html',
controller: 'EditProjectCtrl as editProject'
})
.when('/new', {
templateUrl: 'views/detail.html',
controller: 'NewProjectCtrl as editProject'
})
.otherwise({
redirectTo: '/'
});
});
Factory for CRUD / user form section:
myApp.factory('Projects', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL+'/projects')).$asArray();
});
Factory for product list/price section:
myApp.factory('Products', function($firebase, fbURL) {
return $firebase(new Firebase(fbURL + '/products')).$asArray();
});
The native Angular router is limited when creating complex and nested UIs, but AngularUI Router is a great alternative and very widely used. If you want to include multiple views in your interface then this is the way to go. It's not much more complicated than the native router but the wins are huge.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
Here's a Plunker to demo your particular case: http://plnkr.co/edit/xZD47L?p=preview
With ui-router you can name views
<div ui-view="viewName"></div>
and include templates and controllers in the corresponding ui-router configuration
myApp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home',{
url: "/",
// list your views
views: {
"viewName": {
templateUrl: "viewName.html" ,
controller: "viewNameCtrl"
}
}
})
});
Checkout this Wiki for Multiple Named Views.
I hope this helps.
My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?
If you are using ui-router, then you can define states without specifying urls like
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'Controller3'
})
.state('state2', {
templateUrl: "state2.html",
controller: 'Controller2'
})
.state('state3', {
templateUrl: "state3.html",
controller: 'Controller3'
})
});
So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').