ui-route works just the first time angularJS - angularjs

i have a problems , after to have put the ui-route modal and page , i have another probleme my ui-route works just the first time and i don't know why
this is my route
angular.module('ui.bootstrap.demo').config(function($stateProvider, $urlRouterProvider,$qProvider){
$stateProvider
.state("connexion", {
url: "/",
views: {
// for column two, we'll define a separate controller
'Principal': {
abstract :true,
templateUrl: 'connexion.html'
}
}
})
.state('agenda', {
url: "/agenda",
views: {
// for column two, we'll define a separate controller
'Principal': {
abstract :true,
// templateUrl: 'agenda.html'
template:'<a ui-sref="view">Open me!</a>'
}
}
})
.state('modal', {
abstract: true,
parent: 'agenda',
url: '/modal',
onEnter: ['$uibModal', '$state', function($uibModal, $state) {
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
}
})
}]
})
.state('view', {
url: ':id1',
parent: 'modal',
views: {
'modal#': {
template: '<div class="navbar">'+
'<div class="navbar-inner">'+
'<h4 class="brand">Quick Start</h4>'+
'<ul class="nav">'+
'<li><a ui-sref="foo">Route 1</a></li>'+
'<li><a ui-sref="bar">Route 2</a></li>'+
'</ul>'+
'</div>'+
'</div>'
}
}
})
.state('foo', {
url: ':id2',
parent: 'modal',
views: {
'modal#': {
template: '<h1>foo</h1><a ui-sref="view">back menu</a>'
}
}
})
.state('bar', {
url: ':id3',
parent: 'modal',
views: {
'modal#': {
template: '<h1>bar</h1><a ui-sref="view">back menu</a>'
}
}
})
$urlRouterProvider.otherwise("/");
$qProvider.errorOnUnhandledRejections(false);
})
and this a plunker,
http://plnkr.co/edit/4D6fsQv0FiPqtjoNiebS?p=preview
if some one can help me
thanks in advance
edit
Hello guys
re edit
.state('modal', {
abstract: true,
parent: 'agenda',
url: '/modal',
onEnter: ['$uibModal', '$state', function($uibModal, $state) {
$state.go('view');
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
}
})
}]
})

Related

Angular ui-router $urlRouterProvider not working

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..

Prevent reload controller in a nested views

I coding a modular adminpanel and only need load specific data one time.
<div id="main" ui-view>
<div ui-view="header"></div>
<div ui-view="sidebar"></div>
<!-- Start: Content-Wrapper -->
<section id="content_wrapper">
<div ui-view="topbar"></div>
<div ui-view="main"></div>
<div ui-view="footer"></div>
</section>
</div>
Topbar, header and footer should only load one time or an specific event.
I have set my states like this:
$stateProvider
.state('root', {
url: '/',
views: {
'header#': {
templateUrl: '/angular/apps/backend/views/template/header.html',
controller: 'AuthController'
},
'sidebar#':{
templateUrl: '/angular/apps/backend/views/template/sidebar.html',
controller: 'AppsController'
},
'topbar#':{
templateUrl: '/angular/apps/backend/views/template/topbar.html'
},
'footer#':{
templateUrl: '/angular/apps/backend/views/template/footer.html',
controller: ''
},
'main':{
templateUrl: '/angular/apps/backend/views/inicio.html',
controller: ''
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
.state('login', {
url: '/login',
templateUrl: '/angular/apps/backend/views/login.html',
controller: 'AuthController',
data: {
title: 'Iniciar Sesión',
bodyClass: 'external-page sb-l-c sb-r-c',
requiredLogin: false
}
})
.state('applist', {
url: '/:AppPermalink',
views: {
'header#': {
templateUrl: '/angular/apps/backend/views/template/header.html',
controller: 'AuthController'
},
'sidebar#':{
templateUrl: '/angular/apps/backend/views/template/sidebar.html',
controller: 'AppsController'
},
'topbar#':{
templateUrl: '/angular/apps/backend/views/template/topbar.html'
},
'footer#':{
templateUrl: '/angular/apps/backend/views/template/footer.html',
controller: ''
},
'main':{
templateUrl: '/angular/apps/backend/views/appresults.html',
controller: 'AppController'
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
.state('appedit', {
url: '/:AppPermalink/editar/:Itemid',
views: {
'header#': {
templateUrl: '/angular/apps/backend/views/template/header.html',
controller: 'AuthController'
},
'sidebar#':{
templateUrl: '/angular/apps/backend/views/template/sidebar.html',
controller: 'AppsController'
},
'topbar#':{
templateUrl: '/angular/apps/backend/views/template/topbar.html'
},
'footer#':{
templateUrl: '/angular/apps/backend/views/template/footer.html',
controller: ''
},
'main':{
templateUrl: function(stateParams){return '/angular/apps/backend/views/appedit_'+stateParams.AppPermalink+'.html'},
controller: 'AppController'
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
But when i change the state, the data of the sidebar has been reloaded.
I don't design a good nested views. How can doing this?
Solution found! I need use abstract state to define "sidebar", "header", "topbar" and "footer".
$stateProvider
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: '/angular/apps/backend/views/template/header.html',
controller: 'AuthController'
},
'sidebar':{
templateUrl: '/angular/apps/backend/views/template/sidebar.html',
controller: 'AppsController'
},
'topbar':{
templateUrl: '/angular/apps/backend/views/template/topbar.html'
},
'footer':{
templateUrl: '/angular/apps/backend/views/template/footer.html',
controller: ''
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
.state('root.home', {
url: '/',
views: {
'main#':{
templateUrl: '/angular/apps/backend/views/inicio.html',
controller: ''
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
.state('login', {
url: '/',
templateUrl: '/angular/apps/backend/views/login.html',
controller: 'AuthController',
data: {
title: 'Iniciar Sesión',
bodyClass: 'external-page sb-l-c sb-r-c',
requiredLogin: false
}
})
.state('applist', {
url: '/:AppPermalink',
parent: "root",
views: {
'main#':{
templateUrl: '/angular/apps/backend/views/appresults.html',
controller: 'AppController'
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
.state('appedit', {
url: '/:AppPermalink/editar/:Itemid',
parent: "root",
views: {
'main#':{
templateUrl: function(stateParams){return '/angular/apps/backend/views/appedit_'+stateParams.AppPermalink+'.html'},
controller: 'AppController'
}
},
data: {
title: 'Dashboard',
bodyClass: '',
requiredLogin: true
}
})
Controller only execute one time :)

ionic $stateprovider showing blank page on device

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');
})

Angular ui router - Share views between states

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'
})

Using $routeProvider with $stateProvider

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.

Resources