I am get the following error from the angular-ui-router:
TypeError: Cannot read property '#' of null
...
TypeError: Cannot read property '#main' of null
...
I have done some research on what could be the cause of this error and have come to the conclusion that the problem lies with the the fact that I do a redirect when a condition is false through a $state.go(state) during an onEnter of another state.
Here are some discussions concerning the same issue on github:
https://github.com/angular-ui/ui-router/issues/1234
https://github.com/angular-ui/ui-router/issues/1434
I tried some of the suggestions, but they are not working. They don't seem to provide a solution, but just point out the problem, and according to this github discussion it should be resolved, but I can't seem to get it to work.
I am using AngularJS v1.2.24 and ui-router v0.2.11.
Using the following code (simplified):
.state('main', {
abstract: true,
url: '/main',
templateUrl: '/main/_layout.html'
})
.state('main.home', {
url: '/home',
templateUrl: '/main/home/home.html',
controller: 'HomeCtrl',
onEnter: function ($state)
{
if (condition === true){
$state.go('main.catch')
}
}
})
.state('main.catch', {
url: '/catch',
templateUrl: '/main/catch/catch.html',
controller: 'CatchCtrl'
})
Is there a way to get this to work? Or should I consider a completely different approach to achieve the same result?
P.S.: A possible fix is to do the following in the controller,
$scope.$on('$stateChangeSuccess', function(){
// conditional redirect here
}
But I don't want to do it in the HomeCtrl.
I have encountered a similar situation, and solved it this way:
.state('main.home', {
url: '/home',
templateUrl: '/main/home/home.html',
controller: 'HomeCtrl',
onEnter: function ($state)
{
if (condition === true){
$timeout(function() {
$state.go('main.catch')
)};
}
}
})
The trick is that you want to let the original state change finish rather than trying to redirect in the middle of the state change. The $timeout allows the original state change to finish, and then immediately fire off the change to the desired state.
well, I know it's a little bit late but I've been having this problem for a long time and I finally solved it by listening to the $viewContentLoading event:
$rootScope.$on('$viewContentLoading', function(){
if(!$state.$current.locals)
$state.$current.locals = {};
});
Related
My oversimplified app.config() has:
$stateProvider.
state("/", {
url: "/",
templateUrl: "main.html"
}).
state("/newCategories", {
url: "/categories/new",
templateUrl: "/views/new_categories.html",
controller: "newCategoriesCtrl"
}).
state("/categoryPages", {
url: "/categories/:address",
templateUrl: "/views/categories.html",
controller: "categoriesCtrl",
resolve: {
categoriesDataResolve: function resolveTemplate($stateParams, DataResolver) {
return DataResolver.resolveTemplates($stateParams.address);
}
}
});
With this I can use ui-serf link with "/newCategories" to load its url: "/categories/new"
<a ui-sref="/newCategories">New Category</a>
However, when I refresh, it thinks that "/new" is part of $stateParams. Therefore it uses a different controller and tries to resolve its template (which is missing, so it gives an error).
For now I fixed it by changing the url from "/categories/new" to "/categories-new" so it won't get confused on refresh. But how do I solve this issue differently? (Maybe ui-router has a some way of dealing with it)
If I understand you right, you want to call different controller a.e. newCategoriesCtrl when user calls /categories/:address where address param is new
Changing /categories/new to "/categories-new is a right way to solve it.
Small tip: its not good practice to use / as prefix for state name. It confuses the developer and can be mixed with original URL.
$stateProvider.
//...
state("newCategories", {
url: "/categories-new",
templateUrl: "/views/new_categories.html",
controller: "newCategoriesCtrl"
}).
state("categoryPages", {
url: "/categories/:address",
templateUrl: "/views/categories.html",
controller: "categoriesCtrl",
resolve: {
//...
}
});
Possible Duplicate of $http is getting called multiple times in AngularJS
Sorry I didn't have 50 reputations to comment on the same post.
We are calling the api's using http service and all the services have session id that been passed through cookiestore value. The api call doesn't work for first time as session id is null during first call and it works only for the second call.
Can anyone help us with this. We have multiple api's and all are happening twice which is actually increasing the load. And yes we have researched it.
Router.js
angular.module('adminsuite',['ngFileUpload','ui.router','ngCookies','angular-clipboard','ngAnimate', 'ngSanitize', 'ui.bootstrap','ngMessages']).constant("__env",env).config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
//$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/',
views:{
header:{
templateUrl: '',
controller: ''
},
pageContent:{
templateUrl: 'Login/login3.html',
controller: 'loginController'
},
footer:{
templateUrl: 'common/footer3.html',
controller: 'footerController'
}
}
})
// HOME STATES AND NESTED VIEWS ========================================
.state('dashboard', {
url: '/dashboard',
views:{
header:{
templateUrl: 'common/header.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'dashboard/dashboard.html',
controller: 'dashboardController'
},
footer:{
templateUrl: 'common/innerFooter.html',
controller: 'footerController'
}
}
})
//SURVEY STATES
.state('survey', {
url: '/survey',
views:{
header:{
templateUrl: 'common/headerTool.html',
controller: 'headerController'
},
pageContent:{
templateUrl: 'survey/survey.html',
controller: 'surveyController'
},
footer:{
templateUrl: 'common/innerFooter.html',
controller: ''
}
}
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
})
LoginAuthenticationService.js
UserService.GetByUsername(requestData)
.then(function (user) {
console.log(user);
if (user.SessionID) {
sessionID = user.SessionID;
userDetails = user.UserProfile;
response = { success: true};
} else {
response = { success: false, message: 'Username or password is incorrect' };
}
callback(response);
});
UserService.js
function GetByUsername(user) {
//console.log(__env.apiUrl);
return $http.post(__env.apiUrl+'/UserAuthentication/login', user, {headers: { 'Content-Type': 'application/json'}}).then(handleSuccess, handleError('Error getting user by username'));
}
Api.js
$http.get(__env.apiUrl+'/UserSurvey/GetAllSurveys', {
headers: { 'Content-Type': 'application/json','SessionID':$rootScope.token}
})
.then(function(response){
console.log(response);
return response.data;
}, function(error){
console.log("error");
console.log(error);
return error;
});
Any help appreciated.
Assuming, you have declared controllers within your application using AngularUI state definitions such as the following:
$stateProvider
.state('index',
{
url : '/',
templateUrl : 'templates/home.html',
controller : 'HomeController'
})
And then, in the home.html view template, you also declare the controller using the ng-controller directive like so:
<div ng-controller="HomeController">
Then you have, without realising it, attached the controller twice (once through the state definition and twice through the ng-controller directive) which causes the code contained within the controller to execute twice as well.
You might be having a digest cycle issue.
When my AJAX module is located in plain Javascript my data renders on the first server query. However, when I place my AJAX module in an AngularJS module I must query the server twice before my data renders. Note the query is invoked from the UI.
After poking around I realized the data had indeed arrived on the first query and was assigned to all designated objects and variables but only within the scope of the AngularJS code. Of course, the data had arrived asynchronously and the UI had already gone through a digest cycle and had no reason to go again because nothing in the UI had changed. When there’s a change in the UI Angular updates everything but does nothing when the change (arriving data) comes from the server.
Subsequently, the second identical query would force a digest cycle and update all the bindings with the data that was already sitting there from the first query.
Thus the objective is to force a digest cycle from Javascript to update your UI bindings. I now force a digest cycle at the end of my callback function.
To force a digest cycle place the Angular method $scope.$apply([exp]) after your data variable assignments are complete. I found helpful details in the Angular docs at: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply and also a great explanation with working examples at: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html and an important detail about using the “controller as” syntax when forcing a digest cycle at: How to call $scope.$apply() using "controller as" syntax and hopefully this fixes the problem of the double HTTP call.
I have the following 2 states defined in my app.config:
state('product-details', {
url: '/products/:productId',
templateUrl: '/pages/product-details/product-details.tmpl.html',
controller: 'ProductDetailsController'
})
and
state('product-register', {
url: '/products/register',
templateUrl: '/pages/product-register/product-register.tmpl.html',
controller: 'ProductRegisterController'
})
The problem I am facing is since both their URL patterns are similar, when I try to navigate to product-register state, the 'register' is interpreted by angularui-router as a productId and redirects me to product-details state instead.
After going through some similar questions on SO, I thought I would filter these URLs using regexes as explained here. But when I tried this, although the regex was matching properly in isolation, the state refused to change.
Then again after doing a bit of research I decided to merge the two states like this:
state('product-details', {
url: '/products/:param',
templateUrl: ['$stateParams', function($stateParams) {
if($stateParams.param === 'register') {
return '/pages/product-register/product-register.tmpl.html';
} else {
return '/pages/product-details/product-details.tmpl.html';
}
}],
controller: ['$stateParams', function($stateParams) {
if($stateParams.param === 'register') {
return 'ProductRegisterController';
} else {
return 'ProductDetailsController';
}
}]
})
This also does not seem to work as expected. What am I missing? Isn't this a very normal thing you would have to do?
Try to move 'product-register' state before 'product-details' state.
Actually you need to differentiate your state URL pattern or else angular will fire the first match it will find.
You should be able to specify types for your parameters to match only certain states.
In your case you could use:
url: '/products/{productId:int}'
There are lots of other examples on the ui router page:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
Is it possible to setup a route in ui-router that only has a controller? The purpose being that at a certain URL, the only thing I'd like to do is take action programatically, and not display anything in terms of a view. I've read through the docs, but I'm not sure if they offer a way to do this.
Yes, I have read this: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state, but that is not quite what I am looking for.
For example, let's just say I have a basic body with view:
<body ui-view></body>
And some basic config:
// Routes
$stateProvider
.state('myaction', {
url: "/go/myaction",
onEnter: function() {
console.log('doing something');
}
});
When /go/myaction is visited, the view is blank. Is it possible to do this?
I was able to solve this problem by redirecting the headless state I was taking programmatic action in, to a state WITH a view at the end of the headless state:
$stateProvider
.state('myaction', {
url: "/go/myaction",
onEnter: function() {
console.log('doing something');
}
controller: function($state) {
$state.go('home');
}
});
You can't have a controller without a view but you can use onEnter instead of a controller. If you don't want to change the current view when accessing this state you can define it as a child state:
$stateProvider
// the parent state with a template
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'HomeCtrl'
})
// child of the 'home' state with no view
.state('home.action', {
url: '/action',
onEnter: function() {
alert('Hi');
},
});
Now in home.html you can do something like this:
<a href ui-sref=".action">Greet me!</a>
From the docs:
Warning: The controller will not be instantiated if template is not defined.
Why don't you use an empty string as a template to overcome this?
Yes, you can do that. Use absolute view names to re-use the <ui-view> of another state.
Take a look at this example:
Users go to my app, but depending on them being authenticated or not, I want to send them to a public or private page. I use the index state purely to see if they're logged in or not, and then redirect them to index.private or index.public.
The child states make use of absolute view names to use the <ui-view> element that corresponds to the index state. This way, I don't need to make a second nested <ui-view>.
$stateProvider.state('index', {
url: "/",
controller: 'IndexCtrl'
}).state('index.private', {
views: {
"#": {
templateUrl: 'private.html',
controller: 'PrivateCtrl'
}
}
}).state('index.public', {
views: {
"#": {
templateUrl: 'public.html',
controller: 'PublicCtrl'
}
}
});
A small note on this example: I'm using the # shortcut here. Normally you would use viewname#statename.
My solution for this was just to include a template (html file) that is blank.
I'm using angular ui router / stateProvider. However I set up my url any parts after the second forward slash is ignored and it always sends to this state:
$stateProvider.state('board', {
url: "/:board",
views: {
'content': {
templateUrl: '/tmpl/board',
controller: function($scope, $stateParams, $location) {
console.log('wat')
console.log($location)
}
}
}
});
Which has only 1 forward slash. Even when I go to localhost/contacts/asdf The following state doesn't run.
$stateProvider.state('test', {
url: "/contacts/asdf",
views: {
'main': {
templateUrl: '/tmpl/contacts/asdf',
controller: function () {
console.log('this doesnt work here')
}
}
}
});
This is a console log of $location. As you can see $location only recognizes the last part of the url as the path. As far as I can tell that's wrong. It's missing the "contacts" right before it. Any url is interpreted as having only 1 part for the url and sends to the board state. How do I fix this. THanks.
Edit: found that this was caused by angular 1.1.5. Reverting back to 1.1.4 didn't have this.
This may be the cause: https://github.com/angular/angular.js/issues/2799 . Try adding a base href.
Looks like that fixed in AngularJS v1.0.7. Just tested it.