In my project I have displayed my navigation menus using :
function config($stateProvider, msNavigationServiceProvider){
$stateProvider.state('app.contacts', {
url : '/contacts',
views : {
'content#app': {
templateUrl: 'app/main/apps/contacts/contacts.html',
controller : 'ContactsController as vm'
}
},
resolve: {
}
});
//For Navigation
msNavigationServiceProvider.saveItem('apps.contacts', {
title : 'Contacts',
icon : 'icon-account-box',
state : 'app.contacts',
weight: 10
});
}
Now I want to show navigation on a condition that when super admin has assigned the sub user its permission. So what I should do in that condition?
Until now I tried adding this $stateProvider.state and msNavigationServiceProvider.saveItem in if condition, where in if contained a response from a service (a service which defines which items should appear in navigation), but this isn't working, calling of service is not allowed in config.
So what should I do for this?
Related
I have an app where a module looks at the URL. If the URL has anything past the "Document" section then one state is set using the information beyond that URL. If the URL has nothing beyond that point, then another state is set. So the two URLs are ...
www.xyz.com/Document/
and
www.xyz.com/Document/someData
I am currently solving the problem as below. This works, but I really need the two states to be in the same module and I can't figure out how to make that happen.
So, instead of the second state applying to app.documentEmpty, I want it to apply to app.document.empty.
angular
.module('app.document', [
'app.document.worksheet',
'app.document.tableOfContents',
'app.document.properties',
'app.document.bibliography',
'app.document.inputs',
'app.document.datasets',
'app.document.fileAsFunction',
'app.document.importedFunctions',
'app.document.directory'
])
.config(config);
/** #ngInject */
function config($stateProvider, $translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider)
{
$stateProvider.state('app.document', {
url : '/Document/{path:.*}/',
views : {
'content#app': {
templateUrl: 'app/main/apps/document/worksheet/worksheet.html',
controller : 'DocumentController as vm'
}
},
resolve : {
Documents: function (msApi)
{
return msApi.resolve('document.documents#get');
},
emptyDocuments: function (msApi)
{
return msApi.resolve('document.emptyList#get');
}
},
bodyClass: 'worksheet'
}).state('app.documentEmpty', {
url : '/Document/',
views : {
'content#app': {
templateUrl: 'app/main/apps/document/documentEmpty.html',
controller : 'DocumentController as vm'
}
},
resolve : {
Documents: function (msApi)
{
return msApi.resolve('document.documents#get');
},
emptyDocuments: function (msApi)
{
return msApi.resolve('document.emptyList#get');
}
},
bodyClass: 'document'
});
The problem is that whenever I remove the second state from above and replace it with something like what's below in the directory submodule, the URL is not recognized and the proper page is not loaded. There are several other submodules that do not depend upon URL and they work fine.
$stateProvider.state('app.document.directory', {
url : '/Document/',
views : {
'content#app': {
templateUrl: 'app/main/apps/document/directory/directory.html',
controller : 'DocumentController as vm'
}
},
bodyClass: 'directory'
});
Is it not possible to route to submodules via URLs?
You are confused with state and module.
The dot notation in ui-router indicates child states. So when you are doing this: $stateProvider.state('app.document.directory',{}), the views will only be populated IF your app.document exists and it has a ui-view directive in it. Added to that, the url parameters set in the state object will be appended AFTER the url defined in app.document state.
Say for your example above, you have defined a state like this:
$stateProvider.state('app.document', {
url : '/Document/{path:.*}/',
//... omitted for brevity
Now, this will work:
.state('app.documentEmpty', {
url : '/Document/',
//... omitted for brevity
because app.document and app.documentEmpty are sibling states.
On the other hand, this will not work:
$stateProvider.state('app.document.directory', {
url : '/Document/',
//... omitted for brevity
because app.document.directory is the child state of app.document (child states are defined by the dot notation, i.e .directory)
So in order to work, you have to rethink of your states hierarchy. In your app.document.directory module, define a state app.documentDirectory (note that there is no dot after the document):
angular.module("app.document.directory",[])
.config('$stateProvider',function($stateProvider){
$stateProvider.state('app.documentDirectory',{ //not app.document.directory, because this will make it a child state of app.document
url:'/directory'
//omitted for brevity
})
});
I have a requirement that states:
Logged in user can view employee list, individual employee view etc. For administrator, left navigation menu provides list of different entities and administrator should be able to view list of all employees for selected entity.
But I need to navigate administrator to home page once the entity is changed in left navigation drop down. employee-config.js uses employeeListCtrl and home page has its own controller (defined in separate home-config.js)
How to navigate from
$stateProvider.state("employeeList",{
url: "/employee/list",
templateUrl: cfg.URL_ROOT + "/IC/employee-app/employee-list/employee-list.html",
data: {
listStateName: "homeMain" // This is not working
},
controller: "employeeListCtrl as vm"
});
TO
$stateProvider
.state("homeMain", {
url: "/home/main",
templateUrl: cfg.URL_ROOT + "/IC/home-app/home-main/home-main.html",
data: {
listStateName: "homeMain"
},
controller: "homeMainController as vm"
});
If you talking about just redirecting to other states you can do with simple
$location.url("here your state names like 'employeeList')
and if you are talking about authorization of the current users this you can do with $stateprovider's onstatechangestart function in .config i would share this code for reference.
Blockquote
$rootScope.$on("$routeChangeStart", function(event, next, current) {
$rootScope.onLoading(); var authorised = null;
if (next.access !== undefined && next.access.requiresLogin) {
var userLoggedIn = UserService.getCurrentUser();
authorization.getConditions(next.access,userLoggedIn);
} });
there you can find next.access with reference to routes
ROUTER.when('dashboard_path', '/dashboard', {
controller : 'DashboardCtrl',
templateUrl : CONFIG.prepareViewTemplateUrl('videos/index'),
access: {
requiresLogin: true,
requiredPermissions: ['admin', 'AccountManager'],
permissionType: 'AtLeastOne'
}
});
there access would store values and we can get it into routechange function and compare.
Please note there is authorization is service which check server side user session existance.
please let me know if it helps or needed more details.
I work on a project jhipster
I have had a blockage is part of angularjs, I would like to integrate a menu in the admin profile so
I modified scripts/app/admin.js but nothing happens.
'use strict';
angular.module('pmappApp').config(function($stateProvider) {
$stateProvider.state('admin', {
'abstract' : true,
parent : 'site',
views : {
'gmenu#' : {
templateUrl : 'scripts/app/admin/gmenu/gmenu.html',
controller : 'GmenuController'
}
}
});
});
By using
$stateProvider.state('admin', {
'abstract' : true,
parent : 'site',
views : {
'gmenu#' : {
templateUrl : 'scripts/app/admin/gmenu/gmenu.html',
controller : 'GmenuController'
}
}
});
I can see the additional menu are properly inserted while accessing /audits
I have an application which is role based, so I am using parent states to create layouts which are used across different roles, and then I have child states which add specific templates for the role which is necessary.
When the user authenticates the application, I am transitioning to the relevant role based state, but when you reload the page, the state is lost and it returns to the parent state.
Example Code
$stateProvider
.state('dashboard', {
url: '/dashboard',
views: {
'header#': {
templateUrl: 'partials/layout/sections/auth/header.html'
},
'content#': {
templateUrl: 'partials/dashboard/template.html'
},
'left-column#dashboard': {
templateUrl : 'partials/dashboard/left-column.html',
controller : 'DashNavCtrl'
}
},
data: {
layoutType: 'three-column'
}
})
.state('dashboard.admin', {
views: {
'centre-column#dashboard': {
templateUrl: 'partials/dashboard/recruiter/dashboard.html'
},
'right-column#dashboard': {
templateUrl : 'partials/dashboard/recruiter/right-column.html',
controller : 'DashSidebarCtrl'
}
},
data: {
authorisedRoles: [USER_ROLES.admin]
}
})
When I transition the user to the dashboard.admin state, on reload the user gets directed back to the empty containing state.
Is it possible to stop this from happening?
I am building the front-end app for a REST service, and most of the resources are located at long urls where most of the segments are dynamic based on records created in the app by users. Obviously I won't be able to know or create hardcoded routes for most of these records.
My question I suppose is how to handle urls like this with ui-router:
<semester>/<program>/<class>/enrollment
or
<semester>/myclasses/<class>/assignments
There is always at least one static, predictable segment in every resource url, and the segments are always in a predictable order.
Do I make abstract states for each segment in the url like:
$stateProvider.state(semester)
.state(program)
.state(class)
.state(assignments);
??
I've tried building routes that look like this:
param = {
name: "param",
url: "/:hue/:temp/param",
templateUrl: "http://localhost:81/route/tpl/param.tpl.html",
controller: "paramController"
};
but it ends up sending me back to the .otherwise() state when I link to the "param" state.
Thanks for any help, I'm a bit stumped.
I had a similar problem and I quickly coded this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
url : "/app",
abstract : true,
templateUrl : "layout/navigation-drawer.tpl.html"
}).state('app.help', {
url : "/help",
views : {
'menuContent' : {
templateUrl : "layout/help.html"
}
}
}).state('app.settings', {
url : "/settings",
views : {
'menuContent' : {
templateUrl : "layout/settings.html"
}
}
}).state('app.rate-us', {
url : "/rate-us",
views : {
'menuContent' : {
templateUrl : "layout/rate-us.html"
}
}
}).state('app.projects', {
url : "/projects",
views : {
'menuContent' : {
templateUrl : "layout/projects.html",
controller : 'ProjectsCtrl'
}
}
}).state('app.forms', {
url : "/:project_name/forms",
views : {
'menuContent' : {
templateUrl : "layout/forms.html",
controller : 'FormsCtrl'
}
}
}).state('app.entries', {
url : "/:project_name/:form_name/entries/:form_id",
views : {
'menuContent' : {
templateUrl : "layout/entries.html",
controller : 'EntriesCtrl'
}
}
});
which is working, "/:project_name/:form_name/entries/:form_id" will resolve to something like app/Mirko_test/University/entries/1
Ok so I tested this out and it works in my case. It fails when the state is only a parameter, but it seems as long as each state has a non-parameterized bit, ui-router is able to parse down to children states. I haven't seen this case demonstrated or explained anywhere before. Most tutorials only cover simple hardcoded nested states and not parameterized ones.
It's not ideal, but it works.
I hope this helps someone else facing this issue. :)
var app = angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ( $stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
var semester = {
name: "semester",
abstract: true,
url: "semester/:sem",
templateUrl: "http://localhost:81/route/to/semtemplate.tpl.html",
controller: "semesterController"
},
program = {
name: "program",
parent: sem,
url: "program/:prg",
templateUrl: "http://localhost:81/route/to/prgtemplate.tpl.html",
controller: "programController"
},
classes = {
name: "classes",
parent: prg,
url: "/classes",
templateUrl: "http://localhost:81/route/to/clstemplate.tpl.html",
controller: "classesController"
};
$stateProvider.state(sem)
.state(prg)
.state(classes);
}]);
app.controller('paraController', ['$scope', '$stateParams', '$state',function($scope, $state, $stateParams){
console.log('paraController instantiated');
$scope.sem = $stateParams.params.sem;
$scope.prg = $stateParams.params.prg;
}]);
As this is a hierarchical REST api this pattern works perfectly, and when also taking advantage of scope inheritance from each controller it should be a good fit for my project. I haven't tested extremes of nested states, but it would be interesting to see how it behaves under even more parameterized states. The only limitation I have found is that each state needs to have a non-parameterized part as well. So /:sem fails but semester/:sem works fine.
It's not ideal as it makes URLs longer, but I haven't found a workable alternative.
I know this question is old, but I had essentially the same question recently and found the official answer. Apparently, angular ui-router now supports the notion of URL Parameters in URL Routing, which allow you to specify parameters, along the lines of the following:
$stateProvider
.state('contacts.detail', {
url: "/contacts/:contactId",
templateUrl: 'contacts.detail.html',
controller: function ($stateParams) {
// If we got here from a url of /contacts/42
expect($stateParams).toBe({contactId: 42});
}
})
For more info, go here: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters