I have two states like this:
$stateProvider.state('app', {
url: '/app',
template: '<app-index></app-index>',
data: {},
resolve: {}
});
$stateProvider.state('app.list', {
url: '/list/:type?',
template: '<app-list></app-list>',
data: {},
resolve: {}
})
it work fine but when I type url /app/list it redirect to home page, how can I make slash optional? I've tried to put this url '/list/?:type?' but that didn't work. Should I add redirect, if yes then how?
I do not believe there property to do this but you can make it work by setting up a subroute with the slash
.state('app', {
url: '/app',
template: '<app-index></app-index>',
})
.state('app.withSlash', {
url: '/',
})
To add additional routes on top of 'app' you can just ignore the existence of the '.withSlash'
.state('app.withOtherParam', {
url: '/:id',
})
Here is an example of a route where the slash is optional and has an additional param after.
.state('app', {
url: '/app',
abstract: true,
template: '<ui-view/>',
})
.state('app.specificPage', {
url: '/',
template: '<someTemplate>'
})
.state('app.withId', {
url: '/:id',
template: '<someTemplate>',
})
.state('app.withId.withSlash', {
url: '/',
})
Related
I want to add optional $stateParams to below $state ,Lets say currently i have processId and i want to add assessmentId as optional params. My goal is to launch same template and controller from two places in application and it will launch based on $stateParams.
How can i achieve that task ?
app.js
Add Challenge
.state('app.addPrcChallenge', {
url: '/add/prcChallenge',
params: { processId: null,assessmentId:null},
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
},
Edit Challenge
.state('app.editPrcChallenge', {
url: '/edit/prcChallenge/:challengeKey/processId?/:assessmentId?',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
Directly mention them in the url with a ? suffix for optional params:
.state('app.addPrcChallenge', {
url: '/add/prcChallenge/:processId/:assessmentId?',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
}
}
});
You can ignore the params property after this change, as the params property is used to define params which do not appear as part of the URL
You URL property should be like this:
.state('app.addPrcChallenge', {
url: '/add/prcChallenge/:processId/:assessmentId?',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
},
.state('app.addPrcChallenge', {
url: '/add/prcChallenge/:processId/:assessmentId',
templateUrl: 'views/process/processChallenge.html',
controller: 'ProcessChallengesCtrl',
params: {
processId: null,
assessmentId: null
}
data: {
authenticate: true
},
resolve: {
existingChallenge: function(){
return null;
}
}
});
i have one issue regarding redirecting path in angular.js.I am explaining my code below.
profileController.js:
if($('#addProfileData')[0].defaultValue=='Update'){
var updatedata={'colg_name':$scope.colgname,'address':$scope.address,'cont_no':$scope.contno,'profile_id':id};
console.log('userupdate',userdata);
$http({
method: 'POST',
url: "php/profile/updateProfileData.php",
data: updatedata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data);
$location.path('.profile');
},function errorCallback(response) {
alert(response.data);
});
}
}
here i am setting path to profile page inside success callback function.But it is redirecting to the root page after update the data.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/', {
url: '/',
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
.state('dashboard.profile', {
url: '/profile?p_i',
templateUrl: 'dashboardview/profile.html',
controller: 'profileController'
})
.state('dashboard.dept', {
url: '/dept?d_i',
templateUrl: 'dashboardview/dept.html',
controller: 'deptController'
})
.state('dashboard.princpal', {
url: '/princpal?pr_i',
templateUrl: 'dashboardview/princpal.html',
controller: 'princpalController'
})
.state('dashboard.dept_head', {
url: '/dept_head?dh_i',
templateUrl: 'dashboardview/depthead.html',
controller: 'deptheadController'
})
})
Here after update data successfully it is redirecting to login.html page.I need after updating the data the page should redirect to profile.html page.Please help me.
Try replacing the line of code with $location.path('dashboard.profile');
That would do the need for you
You can use $state instead of $location as follows:
$state.go('dashboard.profile')
Also, don't forget to inject the $state service in your controller.
If you want to use $location.path you need to use the url instead of state.
Here is the code:
$stateProvider.
state('dashboard', {
url: '/dashboard/',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
}).
state('dashboard-home', {
url: '/dashboard/home/',
parent: 'dashboard',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
I have a <div ui-view></div> element in dashboard.client.view.html
When I navigate to /dashboard/home/ nothing comes up. The goal is to have home.client.view.html get injected into dashboard.client.view.html.
There is an example as working plunker
Each Child state inherits url from its Parent. So we shoulduse just
url: '/home',
because parent will add the /dashboard.
The state definition has changed url in our child state:
.state('dashboard', {
url: '/dashboard',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
})
.state('dashboard-home', {
//url: '/dashboard/home/',
url: '/home',
parent: 'dashboard',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
And these links are working as expected:
<a href="#/dashboard">
<a href="#/dashboard/home">
Check it in action here
There is another working example, which shows that we can map states without parent:'', but with dot notation:
state('dashboard', {
url: '/dashboard',
templateUrl: 'modules/dashboard/views/dashboard.client.view.html',
controller: 'DashboardCtrl'
})
//.state('dashboard-home', {
.state('dashboard.home', {
//url: '/dashboard/home/',
url: '/home',
templateUrl: 'modules/dashboard/views/home.client.view.html'
});
You can observe it here
I am trying to get clean urls using $locationProvider.html5Mode(true) gives
TypeError: Cannot read property 'replace' of undefined.
The application uses $stateProvider for routing.
I also have the base url defined in <head>
<base href="/">
From anglularjs lib:
function trimEmptyHash(url) {
return url.replace(/(#.+)|#$/, '$1');
}
url passed to this function is empty. Anyone knows a workaround.
This is my app config:
wgApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!')
// Now set up the states
$stateProvider
.state('main', {
url: "/main",
cache: false,
templateUrl: "/web-master/main.html"
})
.state('login', {
url: "/login",
templateUrl: "/web-master/main.html"
})
$urlRouterProvider.otherwise("/login");
})
I am trying to use satellizer to authorize with a Google account. When I click login, a popup appears showing this:
Invalid parameter
Invalid parameter value for redirect_uri: Missing authority: file://
Request Details:
scope=openid profile email
response_type=code
redirect_uri=file://
display=popup
client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
What am I doing wrong?
Update 1: My Source Code
index.html
<script src="lib/satellizer/satellizer.js"></script>
app.js
.config(function($stateProvider, $urlRouterProvider,$authProvider) {
$authProvider.google({
clientId: 'xxxxxxxxxx.apps.googleusercontent.com'
});
$stateProvider
.state('app', {
url: "/app",
abstract: true,
controller: 'AppController'
})
.state('login', {
url: "/login",
templateUrl: "views/login.html",
controller: 'LoginController'
});
$urlRouterProvider.otherwise('/login');
})
and loginController.js
.controller('LoginController', function($scope,$auth) {
$scope.authenticate = function(provider) {
$auth.authenticate(provider);
};
});