What is the problem with this routing
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
abstract: true
})
.state('app.home', {
url: '/home',
templateUrl: 'templates/appHome.html',
controller: 'AppHomeController'
});
$urlRouterProvider.otherwise('/app/home');
});
Its not showing appHome.html by default.
you should specify where is the templateUrl of the abstracted route,
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app/sidemenu/menu.html',
controller: 'menuController'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'app/home/home.html',
controller: 'homeController'
}
}
});
$urlRouterProvider.otherwise('/app/home');
and also be sure that you had included <ion-nav-view name="menuContent"></ion-nav-view> in your abstracted view.
Related
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/pages/main/main.html',
title: 'Main',
sidebarMeta: {
icon: 'ion-android-home',
order: 0,
},
}).state('main.list', {
url: '/list',
templateUrl: 'app/pages/main/list/coinList.html',
title: 'Main',
controller: 'coinListCtrl',
resolve: {
coinMarketData: function(MarketCapService) {
return MarketCapService.getCrypto();
}
}
}).state('main.detail', {
url: '/detail/:symbol',
templateUrl: 'app/pages/main/detail/coinDetail.html',
title: 'Main',
controller: "coinDetailCtrl",
});
$urlRouterProvider.when('/main','/mail/list');
}
I have one main state and two child states as main.list and main.details. Using $urlRouterProvider service i want to go to main.list state by default. But it seems the command - $urlRouterProvider.when('/main','/mail/list');
is not working at all.
The code started working when i put $urlRouterProvider.when('/main','/mail/list'); above the registration of states, like this:-
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/main','/mail/list');
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/pages/main/main.html',
title: 'Main',
sidebarMeta: {
icon: 'ion-android-home',
order: 0,
},
}).state('main.list', {
url: '/list',
templateUrl: 'app/pages/main/list/coinList.html',
title: 'Main',
controller: 'coinListCtrl',
resolve: {
coinMarketData: function(MarketCapService) {
return MarketCapService.getCrypto();
}
}
}).state('main.detail', {
url: '/detail/:symbol',
templateUrl: 'app/pages/main/detail/coinDetail.html',
title: 'Main',
controller: "coinDetailCtrl",
});
}
Though i would still like to know why? This might be due to lack of JS knowledge though, but still enlighten me..
When I create tabs or sidemenu ionic app I can see in file app.js have
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
or :
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
I want replace start page with login.html file and I tried code:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
abstract: true,
templateUrl: 'templates/login.html',
controller: 'AppCtrl'
})
and it not run, but when I tried it with :
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/login.html',
controller: 'AppCtrl'
})
it run.
.state('tab', {
and
.state('app', {
what is mean? if I want replace it with
.state('login', {
how I can do it?
When you're using a side menu or a tabs, you need to carry 2 "screens" at the same time, your side menu or your tabs and the "login" in your case.
If I want to display my menu and other screen, I used liked this:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.doacoes', {
url: '/doacoes',
views: {
'menuContent': {
templateUrl: 'templates/doacoes.html'
}
}
});
Because AppCtrl is a sidemenu ctrl (in my case) and i also show a "doacoes" html in my screen.
why this sample code http://codepen.io/ionic/pen/QwamEW is working on browser but show blank page when i test on ios simulator or device ?
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.home', {
url: '/home',
views: {
'menuContent' :{
templateUrl: 'templates/home.html'
}
}
})
.state('eventmenu.checkin', {
url: '/check-in',
views: {
'menuContent' :{
templateUrl: 'templates/check-in.html',
controller: 'CheckinCtrl'
}
}
})
.state('eventmenu.attendees', {
url: '/attendees',
views: {
'menuContent' :{
templateUrl: 'templates/attendees.html',
controller: 'AttendeesCtrl'
}
}
})
$urlRouterProvider.otherwise('/event/home');
})
I'm trying to create a web app where I have an index.html page with three views: header, content and footer.
I'd like the header and footer to be consistent between pages but at the same time not be part of the index.html file.
I'd also like the content view to change depending on the url I've gone to.
Here is my current solution
index.html
<body>
<header ui-view="header"></header>
<main ui-view="content"></main>
<footer ui-view="footer"></footer>
</body>
app.js
$stateProvider
.state('my-app', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/shared/header.html',
controller: "UserController"
},
'footer': {
templateUrl: 'partials/shared/footer.html'
}
}
})
.state('my-app.home', {
url: "/",
views: {
'content': {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}
}
})
When I load the page "/" it shows the header and footer as having loaded correctly and I can see them on the page, but the main content is missing.
Can anyone tell me what I'm doing wrong?
Thanks
I managed to figure it out.
I had to get the view in my child state to point to the view in the root state explicitly.
To do that I had to point to 'content#'.
Fixed code:
app.js
$stateProvider
.state('my-app', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/shared/header.html',
controller: "UserController"
},
'footer': {
templateUrl: 'partials/shared/footer.html'
}
}
})
.state('my-app.home', {
url: "/",
views: {
'content#': {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}
}
})
You need a parent for my-app.home :
.state('my-app.home', {
parent: 'my-app',
url: "/",
views: {
'content': {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}
}
}
Try this:
$stateProvider
.state('my-app', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/shared/header.html',
controller: "UserController"
},
'content': {
template: '<ui-view/>',
},
'footer': {
templateUrl: 'partials/shared/footer.html'
}
}
})
.state('my-app.home', {
url: "/",
templateUrl: 'partials/home.html',
controller: 'HomeController'
})
in beginning I was just using $routeProvider as follows and it was giving me what I wanted.
angular.module('angularProject', ['angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
title: 'Home',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.otherwise({redirectTo: '/home'});
}]);
But when I also wanted to use $stateProvider as follows it is not giving me errors but also not allowing me to change state..
var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
myapp.config(['$routeProvider', '$stateProvider',function($routeProvider,$stateProvider) {
$routeProvider
.when('/home', {
title: 'Home',
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.otherwise('/home');
$stateProvider
// .state('index', {
// url: "",
// views: {
// "viewA": {
// template: "index.viewA"
// },
// "viewB": {
// template: "index.viewB"
// }
// }
// })
.state('route1', {
url: "/route1",
views: {
"viewA": {
template: "route1.viewA"
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": {
template: "route2.viewA"
},
"viewB": {
template: "route2.viewB"
}
}
})
// .otherwise({redirectTo: '/home'});
}]);
Any help on how to use $stateProvider with $routeProvider would be appreciated..
I don't think it's possible and I don't think that ui.router was built to be used with ngRoute.
According to the ui-router docs, you should use ui-router's own implementation of $routeProvider, called $urlRouterProvider.