It was working before when "/" was "/main", It was able to load main and dashboard as $urlRouterProvider.otherwise("/main/dashboard");
but now I have changed to "/" instead of "/main", it doesn't work, it loads only main and not dashboard. I have changed the code because I am using Active Directory Authentication Library, and it was having an issue of looping.
following is the code sample (config.js)
myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$compileProvider', '$httpProvider', 'adalAuthenticationServiceProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $compileProvider, $httpProvider, adalProvider) {
$compileProvider.debugInfoEnabled(true);
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
// Main content
.state('main', {
abstract: false,
url: "/",
templateUrl: "/app/views/common/content.html"
})
.state('main.dashboard', {
url: "dashboard",
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
.state('main.usermanagement', {
url: "/usermanagement",
template: "<div ui-view></div>",
requireADLogin: true
});
}])
Any ideas on how to fix this?
Problem is that you did't define URL in correct way
please use below like, url should be start with /
$urlRouterProvider.otherwise("/dasenter code herehboard");
$stateProvider
.state('main', {
abstract: false,
url: "/",
templateUrl: "/app/views/common/content.html"
})
.state('main.dashboard', {
url: "/dashboard", // you missed slash `/` here
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
try it
Use this default childState for main:
$urlRouterProvider.when('/', '/dashboard');
And you should write url starting with '/'
.state('main.dashboard', {
url: "/dashboard",
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
Following code has resolve my issue, if anyone faces this issue when using
Active Directory Authentication Library:
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get("$state");
$state.go("main.dashboard");
});
Related
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
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'm unable to load the template url for otherwise state but,able to redirect to specified url.I had tried using urlRouterProvider but of no use.
Can anyone please help me out regarding this issue ...
My js:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: 'abc/home',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
})
.state('otherwise', {
url: 'abc/home',
templateUrl: 'views/main.html'
});
// $urlRouterProvider.otherwise('abc/home');
});
Otherwise does not work with any templates, it's not a state. It's a "redirect" url. So if you type non-existing url, it will "redirect" to that one, so it should be a valid state (or a server response if you don't want it to be within SPA)
So e.g. if you do abc/blahblah, then it will go to abc/home. In your example it seems that you need to remove the otherwise state and then it should work redirecting you to the home state.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: 'abc/home',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
});
$urlRouterProvider.otherwise('abc/home');
});
Try the below code. You need to point to the state in urlRouterProvider
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: 'abc/home',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
})
.state('otherwise', {
url: '/otherwise',
templateUrl: 'views/main.html'
});
$urlRouterProvider.otherwise('/otherwise');
});
As you want to load home state on Page load, use the below code or change the home state from below code.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
})
.state('otherwise', {
url: '/otherwise',
templateUrl: 'views/main.html'
});
$urlRouterProvider.otherwise('/');
})
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 <<<