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.
}
]);
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');
}
}
})
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'm using angular 1.5.2 and angular ui router 0.2.5, i make a page transition, from a state to another state, only the screen changes, but the controller not change, i tried to do the transition by three different ways:
$location.path('/home');
$state.go('home');
$state.transitionTo('home');
the states
appTmw.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider.state('login', {
url: '/login',
controller: 'LoginCtrl',
views: {
'': {
templateUrl: '/components/login/loginview.html'
}
}
})
.state('home', {
url: '/home',
controller: 'HomeCtrl',
views: {
'': {
templateUrl: '/components/home/homeView.html'
},
'nav#home': {
templateUrl: '/assets/partials/cabecalho.html'
},
'rod#home': {
templateUrl: '/assets/partials/rodape.html'
}
}
})
...
The screen change from login to home, but the controller remains the LoginCtrl.
What is wrong with de code?
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;
}
})
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 <<<