For the following state definitions and the url http://localhost/#/foo/bar, I expect to receive the console output
/foo
/foo/bar
However, I only get one /foo. Is my expectation wrong? What can I do to get the parent controller invoked as well?
$stateProvider
.state('foo', {
url: '/foo',
controller: function($scope) {
console.log('/foo')
},
abstract: true
})
.state('bar', {
parent: 'foo',
url: '/bar',
controller: function($scope) {
console.log('/foo/bar')
}
})
Update
Even more strange, when I add
onEnter: function() {
console.log('enter')
}
enter is printed (but not /foo/bar).
Update 2
I'd like to add a resolve attribute to the parent route and have all children wait for a deferral to be resolved until their controllers get instantiated. This is what it follows: https://github.com/angular/angular.js/issues/5854 The scope is used to store the result of the deferral (which is a $http response).
On the abstract parent state, there should be a ui-view directive so the child state knows where to insert itself.
.state('foo', {
url: '/foo',
abstract: true,
controller: function($scope) {
console.log("/foo");
},
template: '<ui-view/>'
})
Here is a working example: http://plnkr.co/edit/OskGCBSQGhEXlxaNLZtD?p=preview
Update 2 response
You should be able to just add a resolve to the abstract parent state:
resolve: {
user: function($q, $timeout) {
var deferred = $q.defer();
$timeout(function() {
deferred.resolve("a resolved user");
}, 1000);
return deferred.promise;
}
}
Here is a working example of that: http://plnkr.co/edit/cm0xUP8LmruHiVBhccuf?p=preview
Yeah, your expectation is wrong: only one route will be matched. If you want to match the second route, you'll need to set the url to /foo/bar, but there's no way to hit them both with one URL.
I'm not sure what you're trying to do but if you want to access url parameters you can use /foo/:paramName and the $routeParams service.
Related
Using AngularJS and ui-router to create states and I have a parent and child state.
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/templates/portfolio/portfolio.tpl.htm',
controller: 'portfolioCtrl',
controllerAs: '$ctrl'
})
.state('portfolio.patent', {
url: '/:patentId',
views:{
"": {
controller: 'caseOverviewCtrl',
controllerAs: '$ctrl',
templateUrl: 'app/templates/patent/case-overview.tpl.htm',
},
//FURTHER SIBLING VIEWS
}
})
In portfolio in the controller I make a request, await the promise and then display the data to the user in a table. If the user selects an item from the table, it displays further information in a child state portfolio.patent, passing an id value to $stateParams, which I then use to make the $http call to fetch more information.
If I refresh the page, the child state is displaying before the parent state, as the parent state $http request takes longer to resolve as there is a lot more data to fetch. I've tried to check from the child state the value of portfolioLoaded but it only checks it once.
Question
How do I check the parent state promise has resolved, before displaying the child state to the user?
I see using ng-show in the `portfolio.patent' view to check the controller whether the parent promise has been resolved.
PORTFOLIO CONTROLLER
var promise = patentsRestService.fetchAllPatents();
promise.then(
function(response){
var patents = response;
$scope.portfolioLoaded = true;
}
)
PORTFOLIO.PATENT CONTROLLER
function init() {
if($scope.$parent.portfolioLoaded) {
$scope.parentLoaded = true;
}
}
PATENT VIEW
<div data-ng-show="$ctrl.portfolioLoaded" class="animate-show">
//CONTENT
</div>
Save the promise in the parent controller:
$scope.promise = patentsRestService.fetchAllPatents();
$scope.promise.then(
function(response){
var patents = response;
$scope.portfolioLoaded = true;
}
)
Use the promise in the child controller:
function init() {
$scope.$parent.promise.then(function() {
$scope.parentLoaded = true;
});
}
This will properly delay the setting.
Move parent state's call into resolve:
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/templates/portfolio/portfolio.tpl.htm',
controller: 'portfolioCtrl',
controllerAs: '$ctrl',
resolve: {
patentData: function(patentsRestService){
return patentsRestService.fetchAllPatents()
}
}
})
It will always be resolved before child state loads
Read more: https://github.com/angular-ui/ui-router/wiki#resolve
I have a big number of angularjs routes in my app. I would like to set access to these route based on some user permission levels.
angular.module('myApp').run(['$rootScope', 'someAuthFactory', function($rootScope, someAuthFactory) {
$rootScope.$on('$stateChangeStart', function (event, toState) {
$rootScope.permissions = someAuthFactory.getPermssionLevels();
$rootScope.specialRights = $rootScope.permissions.indexOf('superRole') > -1;
...
and here is one of my routes:
.state("dashboard.overview", {
url: "/dashboard",
templateUrl: "app/dashboard.html",
resolve: {
roles: ['rootScope', function (rootScope) {
return $rootScope.specialRights;}]
},
so this code works, but if i want to add this:
resolve: {
roles: ['rootScope', function (rootScope) {
return $rootScope.specialRights;}]
}
to every route, it is gonna be duplicate code, or if I want to lookup some other role, it is gonna be boring.
Could we make the resolve part much smaller and much cleaner?
create a variable in config function on top of the routes like this
var resolveRoles = ['rootScope', function (rootScope) {
return $rootScope.specialRights;}]
}
and use it in every route like this,
.state("dashboard.overview", {
url: "/dashboard",
templateUrl: "app/dashboard.html",
resolve: {
roles: resolveRoles
},
});
You can create a service/factory, which shares $rootScope.specialRights. Just init $rootScope.specialRights in the service in the first resolve of your route e.g.
.state("dashboard", {
url: ...
templateUrl: ...
resolve: {
roles: ['rootScope', function (rootScope) {
YourServiceOrFactory.setSpecialRights($rootScope.specialRights);
return $rootScope.specialRights
}]
},
And there where you need it
YourServiceOrFactory.getSpecialRights()
It does not have to be in other resolves, just in your controller of your route or in your directive/component. Much cleaner and performanter than multiple resovles.
Since you're already setting this property in $rootScope, it is an overkill to use resolve in all of your routes, just to get a variable value, and of course, resolve is not designed for such purposes.
Instead, just inject the $rootScope in your controller and use $rootScope.specialRights in the controller.
Example:
In your controller, service, directive, or component, you can inject the $rootScope like this:
angular.module('your_module')
.controller('your_controller', ['$rootScope', function($rootScope) {
// Access $rootScope.permissions or $rootScope.specialRights here
}];
I'm attempting to resolve some server-side data in an abstract parent state before the Home child state is loaded. I want to make sure I have the user's full name for examination in the state's data.rule function. However, using console.log statements, I can see the userFullName prints as an empty string to the console before the "done" statement in the factory.privilegeData method.
EDIT
The data in the parent resolve is security data from the server that needs to be available globally before any controllers are initialized. Only one child state is listed here (for the sake of readability), but all states, outside of login are children of the abstract parent. Once the parent's resolves are complete the data is stored in the $rootScope and used to determine access rights via the data.rule function in each state.
config.js
UPDATE: per answer below I've updated the parent/child states as such, howeve I'm still running into the same issue:
.state('app', {
url:'',
abstract: true,
template: '<div ui-view class="slide-animation"></div>',
resolve:{
privileges: ['$q', 'privilegesService', function($q, privilegesService){
console.log('from parent resolve');
return privilegesService.getPrivileges()
.then(privilegesService.privilegesData)
.catch(privilegesService.getPrivilegesError);
}]
}
})
.state('app.home', {
url: '/home',
templateUrl: 'app/components/home/home.html',
controller: 'HomeController',
controllerAs: 'vm',
parent: 'app',
resolvePolicy: {when:'LAZY', async: 'WAIT'},
authenticate: true,
data:{
rule: function($rootScope){
console.log("from home state data rule");
return true;
}
}
})
privilegesService.js
factory.getPrivileges = function () {
console.log('from server call');
var queryString = "&cmd=privilege&action=user";
return $http.get(config.serviceBaseUri + queryString);
};
factory.privilegesData = function(priv){
console.log('from privilege data');
if(priv && priv.data) {
$rootScope.userFullName = priv.data.firstName + ' ' + priv.data.lastName;
}
console.log('done');
};
Based on the console statments above I'm getting the following output. I need the from home state data rule to occur last...
...since I'm using the the results of the data.rule function for authorization for each state. Below is the $stateChangeStart from my .run method
app.route.js
$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
if(toState.authenticate){
if(authService.authKeyExists()){
if(toState.data.rule($rootScope)){
navigationService.addNavObject("activity", {
summary : "Page navigation",
page : $location.absUrl().replace("#/", "")
});
} else {
$state.go('app.home');
}
} else {
event.preventDefault();
$state.go('login');
}
}
});
The child states need the parent state as a dependency in order for it to wait to load, even if its not used directly. Source
you have to try something like the following instead :
.state('app.home', {
url: '/home',
templateUrl: 'app/components/home/home.html',
controller: 'HomeController',
controllerAs: 'vm',
parent: 'app',
authenticate: true,
data:{
rule: function($rootScope){
console.log($rootScope.userFullName);
return true;
}
}
})
You can use the property resolvepolicy and set it to LAZY as well, a state's LAZY resolves will wait for the parent state's resolves to finish before beginning to load.
I don't know why this first state works but the second one doesn't:
Working state:
.state('app.pages.invoice', {
url: '/invoice',
templateUrl: "assets/views/pages_invoice.html",
title: 'Invoice',
resolve: {
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireSignIn();
}]
}
})
Not working state, throwing the Error: [ng:areq]:
validationCtrl&p1=not%20aNaNunction%2C%20got%20undefined
.state('app.form.validation', {
controller: "validationCtrl",
url: '/validation',
templateUrl: "assets/views/form_validation.html",
title: 'Form Validate',
resolve: {
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireSignIn();
}]
}
})
This second one works only when the controller is injected via this:
resolve: loadSequence('validationCtrl')
that is (controller is moved into the resolve and there is not currentAuth anymore):
.state('app.form.validation', {
url: '/validation',
templateUrl: "assets/views/form_validation.html",
title: 'Form Validate',
resolve: loadSequence('validationCtrl')
})
and then I don't know how to integrate my currentAuth element into the resolve again. How can I inject the validationCtrl.js via resolve and add the currentAuth element also into resolve?
here is the loadsequence function:
// Generates a resolve object previously configured in constant.JS_REQUIRES (config.constant.js)
function loadSequence() {
var _args = arguments;
return {
deps: ['$ocLazyLoad', '$q',
function ($ocLL, $q) {
var promise = $q.when(1);
for (var i = 0, len = _args.length; i < len; i++) {
promise = promiseThen(_args[i]);
}
return promise;
function promiseThen(_arg) {
if (typeof _arg == 'function')
return promise.then(_arg);
else
return promise.then(function () {
var nowLoad = requiredData(_arg);
if (!nowLoad)
return $.error('Route resolve: Bad resource name [' + _arg + ']');
return $ocLL.load(nowLoad);
});
}
function requiredData(name) {
if (jsRequires.modules)
for (var m in jsRequires.modules)
if (jsRequires.modules[m].name && jsRequires.modules[m].name === name)
return jsRequires.modules[m];
return jsRequires.scripts && jsRequires.scripts[name];
}
}]
};
}
My first state doesn't have any controller, so I am fine resolving the currentAuth alone. But when the view has a controller, add the currentAuth causes the controller not to work anymore.
note:
my currentAuth is taken from here.
update:
herer is the validationCtrl.js:
app.controller('ValidationCtrl', ["$scope", "$state", "$timeout", "SweetAlert", "$location",
function ($scope, $state, $timeout, SweetAlert, $location) {
...
update 2:
basically the question is to allow only currently signed in users to view the pages which are children of app.; so my parent view is like this: so basically I am looking to inject the currentAuth factory into the main parent view and the children should inherit this. They cannot be viewed unless the currentAuth in the parent is resolved.
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
resolve: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl'),
abstract: true
})
edit 1:
I have put the question in other words as well here and trying to find an answer to multiple resolve states.
edit 2:
here is the main.js: pastebin url
and the validationCtrl.js pastebin url.
actually, the validationCtrl is just an example controller among other controllers I have.
Question is how to block view permission for child views unless the parent currentAuth is resolved? given that I don't know how to handle multiple resolve with loadsequence and a singleton factory.
Assuming you are using ui router as a routing framework for your SPA app.
Error: [ng:areq]
the error you get:
validationCtrl&p1=not%20aNaNunction%2C%20got%20undefined
is due to the declaration of the controller within the state, the name of the controller function is not resolved because "ValidationCtrl" is not equal to "validationCtrl" then correct state is:
.state('app.form.validation', {
controller: "ValidationCtrl",
url: '/validation',
templateUrl: "assets/views/form_validation.html",
title: 'Form Validate',
resolve: {
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireSignIn();
}]
}
})
Abstract States - Nested States
to answer the second question, a useful example for your case may be this:
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
resolve: {
scripts: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl').deps,
currentAuth: function(Auth){ return Auth.$requireSignIn();}
},
abstract: true
})
.state('app.pages.invoice', {
// url will become '/app/invoice'
url: '/invoice',
templateUrl: "assets/views/pages_invoice.html",
title: 'Invoice'
})
.state('app.form.validation', {
controller: "ValidationCtrl",
// url will become '/app/validation'
url: '/validation',
templateUrl: "assets/views/form_validation.html",
title: 'Form Validate'
})
As you can see from the example in the resolve of the abstract state you can define different factory functions, ui router will wait until all dependencies are resolved before resolving the children states.
Resolve property explanation :
The resolve property is a map object. The map object contains key/value pairs of:
key – {string}: a name of a dependency to be injected into the controller.
factory - {string|function}:
If string, then it is an alias for a service.
Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before the controller is instantiated and its value is injected into the controller.
for more details I refer you to ui router doc.
As said in my comment i suggest you to try the following :
.state('app.form.validation', {
url: '/validation',
templateUrl: "assets/views/form_validation.html",
title: 'Form Validate',
controller: "validationCtrl",
resolve:{
"myCtrl": loadSequence('validationCtrl'),
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireSignIn();
}]
}
})
The other part of my comment was about the fact that child states inherits parent's resolve and children can override it.
So you can just do the following :
.state('app', {
// all states require logging by default
resolve:{
"currentAuth": ["Auth", function(Auth) {
return Auth.$requireSignIn();
// i'm guessing we're redirecting toward app.login if not logged
}]
}
})
.state('app.login', {
resolve:{
"currentAuth": ["Auth", function(Auth) {
return true;// just be sure to not do infinite redirections
}]
}
})
Note if you have some trouble because Auth isn't yet loaded with lazy loading, you should be able to load it in a angular.run.
Firstly coming to the error
Error: [ng:areq]:
validationCtrl&p1=not%20aNaNunction%2C%20got%20undefined
controller: "validationCtrl", change it according to the main controller
that is
This means there is no validationCtrl function.
I may be wrong but i think there is a small typo' in this line in your controller controller: "validationCtrl", change it according to the **main controller** controller: "ValidationCtrl"
that is
This error happens due to either defining two angular.modules with the same name in different files containing different arguments as you may be trying to implement the dependancy injection.
It causes the problem as the script loaded inyour main html file won't know which angular.module to be configured.
To resolve this define the angular.modules with different names.
How to block view permission for child views unless the parent currentAuth is resolved
You can install this package angular middlewareThis middleware package contains some pre-defined route functions or you can also create your own functions.Along with this $http documentation using the success and callback functions,you can create your own middleware and the auth service while using a singleton factory
OR
Assuming that you are using node.js as your backend you can use [middleware][3] routing in your server using express and map it to the frontend routes.
Here is a perfect tutorial for middleware authentication in nodejs
I have an example here. How i can access 'itemId' parameter in the parent state controller? Parent view must not be reloaded.
angular.module('app',['ui.router'])
.config(function($stateProvider){
$stateProvider.state('step', {
url: '/orders/:step',
templateUrl: 'parent.html',
controller: function ($scope, $stateParams) {
$scope.itemId = $stateParams.itemId;
$scope.step = $stateParams.step;
}
})
.state('step.item', {
url: '/:itemId',
templateUrl: 'child.html',
controller: function ($scope, $stateParams) {
$scope.itemId = $stateParams.itemId;
$scope.step = $stateParams.step;
}
});
}).controller('SimpleController', function($scope, $state){
$scope.items = [1,2,3,4,5,6];
$scope.steps = ["first", "second"];
})
I see only two ways:
add an service and inject it to both controllers
access a parent scope from a child controller and pass a parameter
But both cause me to add watchers at a parent scope.
Maybe i can accomplish it easier?
First, you need to recognize that a parent state's controller runs only once when you enter the subtree of its child states, so switching between its children would not re-run the controller.
This is to say that if you want the itemId parameter to always be up to date, you'd need a $watch (which you tried to avoid).
For the first time, you could collect the itemId like so in the parent's state:
$scope.itemId = $state.params.itemId;
If you need it to be kept up-to-date, then you'd need to watch for changes, for example:
$scope.$watch(function(){
return $state.params;
}, function(p){
$scope.itemId = p.itemId;
});
plunker
Similarly, if you only need to place it in the view, then set $state on the scope:
$scope.$state = $state;
and in the view:
<div>parent /orders/{{step}}/{{$state.params.itemId}}</div>
EDIT:
I guess another way would be to call a scope-exposed function on the parent to update the value. I'm not a fan of such an approach, since it relies on scope inheritance (which is not always the same as state inheritance) and scope inheritance in a large application is difficult to track. But it removes the need for a $watch:
In the parent controller:
$scope.updateItemId = function(itemId){
$scope.itemId = itemId;
};
and in the child controller:
if ($scope.updateItemId) $scope.updateItemId($stateParams.itemId)
I can see, that you've already found your answer, but I would like to show you different approach. And I would even name it as "the UI-Router built in approach".
It has been shown in the UI-Router example application, where if we go to child state with some ID = 42 like here we can also change the other, than the main view (the hint view in this case).
There is a working example with your scenario, showing that all in action.
What we do use, is the Multiple Named Views
The parent state, now defines root view, which is injected into unnamed ui-view="" inside of the root/index.html.
A new parent.html
<div ui-view="title"></div>
<div ui-view=""></div>
As we can see, it also contains another view target (than unnamed) - e.g. ui-view="title" which we fill with another template immediately... in parent state:
$stateProvider.state('step', {
url: '/orders/:step',
views : {
'': {
templateUrl: 'parent.html',
},
'title#step': {
templateUrl:'parent_title_view.html',
}
}
})
And child? It can continue to handle main area... but also can change the title area. Both views are independent, and belong to child.
.state('step.item', {
url: '/:itemId',
views : {
'': {
templateUrl: 'child.html',
},
'title': {
templateUrl:'child_title_view.html',
}
}
So, there are no watchers, nothing... which is not shipped with the UI-Router by default. We just adjust many places (views) with the child implementation. We can still provide their content with some defaults in parent..
Check that example here. Hope it will help to see it a bit differently...
I'm not sure if this will really solve your problem but you can do
$stateProvider.state('step', {
url: '/orders/:step/:itemId',
templateUrl: 'parent.html',
http://plnkr.co/edit/sYCino1V0NOw3qlEALNj?p=preview
This means the parent state will collect the itemID on the way through.
include $state in resolve function for parent state
.state('parent', {
url: '/parent',
controller: 'parentController',
resolve: {
params: ['$state', function ($state) {
return $state.params;
}]
}
})
then in parent controller inject the resloved vars
app.controller('parentController', ['$scope', 'params',
function ($scope, params) {
$scope.params = params;
}]);
in this way params available in both child and parent.