I'm having this annoying issue, when i refresh my page, it's not reloading the controller or the state. I'm using ui-router and Angularjs. I don't understand because only one page is having this trouble.
Here is my app.js:
(the page which having this issue this app.organization):
var route = angular.module('route', ["ui.router","starter"])
route.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/app")
$stateProvider
.state('app',{
abstract:false,
url:"/app",
templateUrl: "views/header.html",
controller:"homeCtrl"
})
.state('app.organization', {
url: "/organization:id",
templateUrl: "views/organization.html",
controller:"homeCtrl"
})
.state('app.usersingle',{
url:"/user:id?page:iterate",
templateUrl: "views/single_user.html",
controller:"userCtrl"
})
.state('app.ticket',{
url:"/ticket:id/author:myid",
templateUrl: "views/ticket.html",
controller:"ticketCtrl"
})
});
and in my controller i declare this as :
.controller('homeCtrl',['$state','$stateParams','$scope','dropdown','userdisplay','displayfilter','$q','$http',
function ($state,$stateParams,$scope,dropdown,userdisplay,displayfilter,$q,$http) {
// doing request etc...
}])
I really don't know wher the problem came from and how can i resolve it any help would be really appreciate.
Its because of our state definition is incorrect for app.organization.
Change it as below:
.state('app.organization', {
url: "/organization/:id",
templateUrl: "views/organization.html",
controller:"homeCtrl"
});
On further looking I think this issues is other states as well. Correct them and it should work. Refer this for details: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters
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: {
//...
}
});
I am currently working on a web development project and I am having a problem in implementing UI-router (AngularJS).
I want to set a default state when the page loads and also default state for the child view.
If I use abstract:true method that is not the solution because when I want to again active that state it won't be possible.
Hope this will give you answer to your Question
var App = angular.module('TechdefeatApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/")
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/components/home/homeView.html",
controller:"homeController"
})
.state('member', {
url: "/member/:seo_url",
templateUrl: "app/components/member/memberView.html",
controller:"memberController"
})
.state('category', {
url: "/category/:seo_url",
templateUrl: "app/components/category/categoryView.html",
controller:"categoryController"
})
}]);
you need to use at $urlRouterProvider service,
first inject this service, after that write
$urlRouterProvider.otherwise('/otherwise').
Pay attention that the /otherwise url must be defined on a state as usual:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
good luck!
I have a standard module config like this:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/404");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/partials/home.html"
})
...
.state('error',{
url: "/404",
templateUrl: "templates/partials/404.html"
});
});
And I need not to redirect to the 404.html page, but keep in the address bar the url which user tried go to.
Is there a simple method to reach that?
Url is an optional field in state, if you don't add that , it will only render the template.
Try this :
.state('error',{
templateUrl: "templates/partials/404.html"
});
And add this state to otherwise
I am trying to implement a tabbed interface akin to this: http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx
However, on my state change, the controller of the parent state seems to be reinitialized (or a new $scope is created?)
There are two major differences between the example plunkr and my project.
I use a parameter in my url
I resolve different data on the state change for each tab (removing this does nothing).
I am not using ui-bootstrap for the tabs but am triggering a $state.go on ng-click of the tab.
I experimented with the above plunkr and added a dropdown to the parent state; however the parent dropdown values seem to persist when the child states change. I am not too concerned with the child states and will probably end up using sticky states anyways.
I am using wondering if I am doing something fundamentally wrong before I try and add another package to my project.
here is a rough plunkr of what I am trying to do: http://plnkr.co/edit/TmRQN5K8OEc8vHG84G5z?p=preview
here is my config:
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.when('/main',
function ($state) {
$state.go('parent.tab1', { main_id: '00008' });
});
$stateProvider
//Handle States Here
.state('parent', {
abstract: true,
url: '/parent?main_id',
templateUrl: "main.html",
controller: 'Main_Controller',
resolve: {
//Calls to API
}
})
.state('parent.tab1', {
url: "/applications",
templateUrl: "tab1.html",
controller:'Tab1Ctrl',
resolve: {
//Get some different data from an API
},
})
.state('parent.tab2', {
url: "/phasing",
templateUrl: "tab2.html",
controller: 'Tab2Ctrl',
resolve: {
//More API Data
}
});
});
I've made your plunker working here
$urlRouterProvider
//.when('/main',
.when('',
function ($state) {
$state.go('parent.tab1', { main_id: '00008' })
});
Also there is a change in main.html, which does not use ng-controller any more. We just have to pass the proper Controller name
$stateProvider
//Handle States Here
.state('parent', {
abstract: true,
url: '/parent?main_id',
templateUrl: "main.html",
controller: 'MainController',
resolve: {
//Calls to API
}
})
...
// MainController
// these two names should fit
app.controller("MainController", function($rootScope, $scope, $state) {
So now, it is working, and let's discuss
I use a parameter in my url
I resolve different data on the state change for each tab (removing this does nothing).
I am not using ui-bootstrap for the tabs but am triggering a $state.go on ng-click of the tab.
Quick answers:
parameter in url exists, e.g. #/parent/tab1?main_id=8000
resolve is trigerred for each controller if controller is reinstantiated. That happens when we navigate to that state (among tabs)
no need to use $state.go, I used:
a snippet:
<a ui-sref="parent.tab1({main_id:'00008'})"> go to tab1 with main_id '00008'</a><br />
<a ui-sref="parent.tab2({main_id:'00008'})"> go to tab2 with main_id '00008'</a><br />
<a ui-sref="parent.tab3({main_id:'00008'})"> go to tab3 with main_id '00008'</a><br />
Check it here
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).