Hi below is my code for urlRouterProvider otherwise.
.config(function config($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/invalid');
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '/invalid',
templateUrl: 'view/view.error.tpl.html'
});
})
This is what i am expecting:
1. if i go to view?businessId=12345 it should load the page without any issues
2. if i go to view?businessId=abcd it should re-direct it to the view.error.tpl.html
But instead, it does nothing if i enter the invalid url.
I reffered to this post for help but none of the options really work Otherwise on StateProvider
you can try this, without using the otherwise function:
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '*path',
templateUrl: 'view/view.error.tpl.html'
});
Try this
.config(function ($urlRouterProvider, $stateProvider) {
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '*path',
templateUrl: 'view/view.error.tpl.html'
});
})
Related
I'm trying to use clean url routing for my web app but everything I try doesnt work. Here is my app.js. Im not to sure how the location provider should be added in to the app.js but everything I try produces a 404. Please could someone point me in the right direction?
.config(function($stateProvider, $urlRouterProvider) {
//Enable cross domain calls
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'vm'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'vm'
})
.state('blog', {
url: '/blog',
templateUrl: 'views/blog.html',
controller: 'BlogCtrl',
controllerAs: 'vm'
})
.state('corparate', {
url: '/corparate',
templateUrl: 'views/corparate.html',
controller: 'CorparateCtrl',
controllerAs: 'vm'
})
.state('contact', {
url: '/contact',
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
controllerAs: 'vm'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'RegisterationCtrl',
controllerAs: 'vm'
})
.state('register', {
url: '/register',
templateUrl: 'views/register.html',
controller: 'RegisterationCtrl',
controllerAs: 'vm'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl',
controllerAs: 'vm'
})
.state('useredit', {
url: '/settings',
templateUrl: 'views/useredit.html',
controller: 'UserEditCtrl',
controllerAs: 'vm'
})
.state('friendlist', {
url: '/search',
templateUrl: 'views/friendlist.html',
controller: 'FriendListCtrl',
controllerAs: 'vm'
})
.state('friendprofile', {
url: '/profile/:userName',
templateUrl: 'views/friendprofile.html',
controller: 'FriendProfileCtrl',
controllerAs: 'vm'
})
.state('resetPassword', {
url: '/resetPassword',
templateUrl: 'views/resetPassword.html',
controller: 'ResetPasswordCtrl',
controllerAs: 'vm'
});
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get("$state");
$state.go("main");
});
})
.run(function ($rootScope, $state, ParseApi) {
$rootScope.$on('$stateChangeStart', function (event, next) {
if (!ParseApi.isAuthenticated()) {
if (next.name !== 'register' && next.name !== 'login' && next.name !== 'resetPassword' && next.name !== 'friendlist' && next.name !== 'friendprofile') {
event.preventDefault();
$state.go('login');
}
}
});
})
})();
I have a problem with my $urlRouterProvider.otherwise();
When emulated on android, the app launches on the artists state and not the welcome.
I don't see where the problem might come from.
app.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', '$sceDelegateProvider', function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $sceDelegateProvider){
$stateProvider.state('welcome', {
url: '/welcome',
templateUrl: 'templates/welcome.html',
controller: 'WelcomeCtrl'
})
.state('user',{
url:'/user',
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
})
.state('settings',{
url:'/settings',
templateUrl: 'templates/settings.html'
// controller: 'SettingsCtrl'
})
.state('artists',{
url:'/artists',
templateUrl: 'templates/artists.html',
controller: 'ArtistsCtrl'
})
.state('artist',{
url:'/artists/:artistId',
templateUrl: 'templates/artist.html',
controller: 'ArtistCtrl'
})
.state('search',{
url:'/search',
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
});
$urlRouterProvider.otherwise('/welcome');
}]);
thanks for any help !
try using
$stateProvider
.state("welcome", { url : '/welcome'})
I'm trying to replace AngularJS Route with UI Router since that seems to be what everyone uses. I'm just getting started and am wondering how to replace the following code with $stateProvider:
$routeProvider
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl'
})
.otherwise({
redirectTo: '/login'
});
Replace when with state:
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
More details here: https://github.com/angular-ui/ui-router
I want to create multi step form using angularjs.
Here is the code:
(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])
.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterPorvider) {
$urlRouterPorvider.otherwise("/Game/Home");
$stateProvider
.state("Home", {
url: "/Game/Home",
templateUrl: "/app/Game/GameView.html",
controller: "GameController as vm"
});
$stateProvider
.state("Log", {
url: "/Game/Log",
templateUrl: "/app/Log/GameLogView.html",
controller: "GameLogController as vm"
});
$stateProvider
.state("MultiStepForm", {
url: "/Game/MuiltyStepForm",
templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
});
$stateProvider
.state("MultiStepForm.view", {
url: "/Game/MuiltyStepForm/view",
templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
})
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
}]);
})();
I get this error when I try to move to state MultiStepForm.view.step2
Error: Could not resolve '.MultiStepForm.view.step2' from state 'MultiStepForm.view'
Any idea why I get the error?
And can I create nested state inside nested state?
Hi this is because you are using nested states so in your example
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
step2 inherits from step1 and not from multistepform.view
I think you should be able to fix it by doing this :
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
parent: MultiStepForm.view,
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
parent: MultiStepForm.view,
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
check out this url for more info about nested states nested views in angular
just a quick question. Can named views in the ui-router for angular have routes and an url? And if so, how can I activate them?
I searched through the wiki, but can't find any info on that.
What I want is a app with three different child routes so only one can be active at a time, but they're supposed to be in different views, so I can nicely animate between them with an accordion effect.
Any help there?
Thanks!
EDIT: Here's some code of my routing so far:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
//templateUrl: 'app/main/main.html',
//controller: 'MainController',
//controllerAs: 'main',
views: {
'' : {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
},
'contact': {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
},
'profile': {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
},
'works': {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
}
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
I'd recommend just creating different states for each view. There's no reason you can't animate smoothly between different states.
So:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('home.contact', {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
})
.state('home.profile', {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
params: {
"user" : {}
}
})
.state('home.works', {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
})
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
In your ui-sref links, you can pass data to those views using parameters, like this: <a ui-sref="home.profile({user: contact.user}) along with the 'params' section in the state definition as I've included above.
Routing is serverside so if you call any address your serverside routing needs to launch proper html or javascripts which will let you render what you want.
For more accurate answer please respond with more details: what is your serverside engine, which version of angular you use etc.