I would like to configure my routes to be able to accept any integer after its' URL.
For example,
/product/id/1242
This integer will be accessed by the API factory as a value to be queried by the API.
I have read doc's on setting up routes, but haven't been able to do to it. If i enter a URL with an integer, it just redirects to the login page.
angular.module('myapp123.routes', [])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");
//$location.path('/product').search('queryStringKey', value).search( ...);
$stateProvider
.state('login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'app/core/login/login.html'
}
},
controller: function ($ionicHistory, $scope) {
console.log('Clearing history!');
$ionicHistory.nextViewOptions({
historyRoot: true,
disableBack: true
});
}
})
.state('product', {
url: '/product',
when:('/product/id/product_id')
views: {
'menuContent': {
templateUrl: 'app/components/product/product.html'
}
}
})
According to the docs This should do the trick. [0-9] limits the product Id to numbers.
.state('product', {
url: '/product/id/{productId:[0-9]}',
views: {
'menuContent': {
templateUrl: 'app/components/product/product.html'
}
}
Thanks- wasn't able to get your version working for some reason.
A work-around I've found, which works:
.state('product', {
url: '/product/id/:product_id',
templateUrl: 'app/components/product/product.html',
controller: function($scope, $stateParams) {
$scope.product_id = $stateParams.product_id;
}
})
Related
My website has 2 main routes:
/home
/:something
Any request to / should go to /home and this is done by using 'otherwise', anything else that does not match home AND is not empty should go to app.lista. The thing is, app.lista matches / because is like :slug is empty, so otherwise is not being called:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: '/_/common/templates/main.html',
controller: 'main'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
How can I tell the stateProvider to not match app.lista if :slug is empty?
Looks like same issue which is logged Here on github and solution seems to be the use ragular expression
I think changing your slug route to
.state('app.lista', {
url: '/{slag:[^\/]+}',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
Should solve your problem plunker
Make your app route non-abstract and change the template and controller to point to that of app.home. Since it is defined before app.list, '/' will match app route instead.
$stateProvider
.state('app', {
url: '/',
templateUrl: '/_/common/templates/home.html',
controller: 'home'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('app.lista', {
url: '/:slug',
templateUrl: '----.html',
controller: 'list',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.slug=== undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
I got a working angular code to successfully get/store/retrieve a jwt token for authentication.
Also I got the following route controller:
// Router configuration
App.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'assets/views/dashboard.html'
})
.state('customers', {enter code here
url: '/customers',
templateUrl: 'assets/views/customers.html'
})
.state('customersAdd', {
url: '/customers/add',
templateUrl: 'assets/views/customers_add.html'
})
.state('account', {
url: '/account',
templateUrl: 'assets/views/account.html'
})
.state('login', {
url: '/login',
templateUrl: 'assets/views/login.html'
});
}
]);
I went through different tutorials on the net and I think, for my understanding the best approach would be using resolve on my routes. Yet I don't know how to bring the pieces togehter. I got a working auth service with a function auth.isAuth() that returns true or false.
But how can I bind this into my routes? And also I would like to explicit mark routes that doesn't need auth.isAuth() to be true, because there are only like two states that doesn't require an authenticated user.
Greetings
eXe
Just in case someone is looking for the same, this is my final solution:
// Router configuration
App.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('auth', {
url: '',
abstract: true,
resolve: {
loginRequired: loginRequired
},
})
.state('auth.dashboard', {
url: '/dashboard',
templateUrl: 'assets/views/dashboard.html'
})
.state('auth.customers', {
url: '/customers',
templateUrl: 'assets/views/customers.html'
})
.state('auth.customersAdd', {
url: '/customers/add',
templateUrl: 'assets/views/customers_add.html'
})
.state('auth.account', {
url: '/account',
templateUrl: 'assets/views/account.html'
})
.state('login', {
url: '/login',
templateUrl: 'assets/views/login.html'
});
}
]);
function loginRequired($q, $location, auth) {
var deferred = $q.defer();
if (auth.isAuthed()) {
deferred.resolve();
} else {
$location.path('/login');
}
return deferred.promise;
}
By using nested states my 'auth' state acts like a middleware. Now I can easily manage my routes.
Here is how I do it. Borrowed from the Satellizer library. Works great!
//note the resolve block.
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
data: {
pageTitle: 'Home'
},
resolve: {
loginRequired: loginRequired
}
})
.state('splash', {
url: '/',
templateUrl: 'views/auth/splash.html',
controller: 'SplashCtrl',
data: {
pageTitle: 'Welcome'
},
resolve: {
skipIfLoggedIn: skipIfLoggedIn
}
})
//add to your apps config block, below your route definitions
function skipIfLoggedIn($q, auth) {
var deferred = $q.defer();
if (auth.isAuth()) {
deferred.reject();
} else {
deferred.resolve();
}
return deferred.promise;
}
function loginRequired($q, $location, auth) {
var deferred = $q.defer();
if (auth.isAuth()) {
deferred.resolve();
} else {
$location.path('/');
}
return deferred.promise;
}
mainApp.config(['$stateProvider', '$routeProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider',
function($stateProvider, $routeProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('page', {
abstract: true,
url: '/newgmr/admin',
views: {
'home': {
template: '<div ui-view="body"></div>'
}
}
}).state('page.login', {
url: '/',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/login.html',
controller: 'loginController'
}
}
})
.state('page.forgotpassword', {
url: '/forgot-password',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/forgotPassword.html',
controller: 'forgotPasswordController'
}
}
})
.state('page.resetpassword', {
url: '/reset',
views: {
'body#page': {
templateUrl: 'mainApp/landingPage/resetPage.html',
controller: 'resetPasswordController'
}
}
})
.state('admin.dashboard', {
url: '/dashboard',
views: {
'header#admin': {
templateUrl: 'mainApp/dashboardPage/header.html'
},
'leftPane#admin': {
templateUrl: 'mainApp/dashboardPage/leftPane.html',
controller : 'leftSidePaneController'
},
'body#admin': {
templateUrl: 'mainApp/dashboardPage/tabHolder.html'
},
'footer#admin': {
templateUrl: 'mainApp/dashboardPage/footer.html'
}
}
});
$urlRouterProvider.
otherwise('/');
I am newbie to angular. When I give, localhost/newgmr/admin it loads my app. But when I try to navigate to any other state, say forgot-password screen by typing localhost/newgmr/admin/forgot-password into the browser's url and hit enter, the app shows 404 page. However, I can achieve this by clicking on a link which will call the state "page.forgotpassword". I understand that this happens because there is no actual directory like forgot-password and there is no index.html in that location either. So, please help me how to achieve this. User must be able to navigate to a state by typing the url as well.
If the data provided is not enough, please let me know.
I have two main routes in my Angular app. "/" and "/something/{id}". I'd expect any other route (e.g. "site.com/#/tree") to throw an error, however it's being routed to my main route.
$stateProvider
.state('main', {
parent: 'app',
url: '/',
data: {
authorities: [],
pageTitle: 'Main'
},
views: {
'content#': {
templateUrl: 'app/main/main.html',
controller: MainController
}
}
})
.state('main.id', {
url: '^/main/{id:int}',
views: {
'content#': {
templateUrl: 'app/main/main.html',
controller: MainController
}
}
});
Is there a way to make my main state only match the exact "/" url?
Try
app.config(["$urlRouterProvider","$stateProvider",
function($urlRouterProvider, $stateProvider) {
//reroute to error page
$urlRouterProvider.otherwise({templateUrl:'/404.html'});
//the rest of your $stateProvider code goes here.
}
]);
I cretaed a new ionic blank app intuit there are two html pages: 1 index.html and a category.html. I configured the states and then added controller in app.js file but it is not working.
This is my state configurations:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'index.html'
})
.state('category', {
url: "/category",
templateUrl: "category.html",
controller: 'CategoryCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/camera');
})
And this is my controller:
.controller('CameraCtrl',function($scope,$state){
$scope.menu = function() {
console.log('yesytest');
$state.go('category');
// window.location = "category.html";
};
})
This is my app.js. Is anything wrong here?
Unfortunately I only had 15 minutes to mock this together, Let me know if this works for you and if you need any further assistance drop me a response.
Controller
var example = angular.module('starter', ['ionic', 'starter.controllers',]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html'
}
}
})
.state('tab.camera', {
url: '/camera',
views: {
'camera': {
templateUrl: 'templates/camera.html'
}
}
})
.state('tab.category', {
url: '/category',
views: {
'category': {
templateUrl: 'templates/category.html'
}
}
});
$urlRouterProvider.otherwise('/tab/home');
});
>>> Working Example <<<