Hi I have been using stateprovider for a long time and this time I want to implement a functionality in which without changing the url, I want to go not found state but not on url.
This is my code.
(function () {
angular.module('mean').config(aosOfferConfig);
function aosOfferConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/link/404_not_found");
$stateProvider
.state('offers', {
url: '/offers/packages',
templateUrl: 'views/aosOffers/aosoffers.html',
controller: 'offersController',
controllerAs: 'packages'
})
.state('offersignup', {
url: '/offers/signup',
templateUrl: 'views/aosOffers/offerssignup.html',
controller: 'offersSignupController',
controllerAs: 'offerssignup'
})
.state('thankyou', {
url: '/offers/thankyou',
templateUrl: 'views/aosOffers/offersthankyou.html'
});
}
})();
Now in my otherwise part I am taking the user to /link/404_not_found. I don't want this. Instead, I want that it will remain in current url but the state should be changed. Just like github does.
How can I do this ?
do it this way
(function () {
angular.module('mean').config(aosOfferConfig);
function aosOfferConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(function ($injector, $location) {
var state = $injector.get('$state');
state.go('404_not_found', {}, { location: false });
return $location.path();
});
$stateProvider
.state('offers', {
url: '/offers/packages',
templateUrl: 'views/aosOffers/aosoffers.html',
controller: 'offersController',
controllerAs: 'packages'
})
.state('offersignup', {
url: '/offers/signup',
templateUrl: 'views/aosOffers/offerssignup.html',
controller: 'offersSignupController',
controllerAs: 'offerssignup'
})
.state('thankyou', {
url: '/offers/thankyou',
templateUrl: 'views/aosOffers/offersthankyou.html'
})
.state('404_not_found', {
template: '<h1>Notfound</h1>'
});
}
})();
Related
Here below is my URL
localhost:9000/index.html#!/app/apis/1066/general.
If I change value of param to 1067 it should update API(s) general information based on 1067.
But instead URL is set back to param value 1066 instantly and the page is not refreshed.
Here is my route:
$ocLazyLoadProvider.config({
debug:false,
events:true
});
$urlRouterProvider.otherwise('/app/welcome');
$stateProvider
.state('app', {
abstract:true,
url:'/app',
templateUrl: 'views/dashboard/main.html'
})
.state('app.home', {
url: '',
templateUrl: 'views/dashboard/home.html',
controller: 'MainCtrl'
})
.state('app.api', {
url: '/apis',
controller: 'apiCtrl',
templateUrl: 'views/dashboard/apis/index.html'
})
.state('app.addApi', {
url: '/apis/add',
controller: 'apiCtrl',
templateUrl: 'views/dashboard/apis/createApi.html'
})
.state('app.apis', {
url: "/apis/:id",
templateUrl:"views/dashboard/apisMain/updateApis.html",
controller: "updateApisCtrl",
resolve:{
apiData :function ($stateParams, proxyService) {
return proxyService.api($stateParams.id);
}
}
})
.state('app.apis.general', {
url: "/general",
templateUrl: "views/dashboard/general/updateGeneral.html",
controller: "updateGeneralCtrl"
})
I can provide more information if needed. I'm using angularjs 1.7
It might be so that the stateprovider does not consider new url props in it's cache-key.
Try to disable the cache on the state and see if it helps
.state('app.apis', {
cache: false,
url: "/apis/:id",
templateUrl:"views/dashboard/apisMain/updateApis.html",
controller: "updateApisCtrl",
resolve:{
apiData :function ($stateParams, proxyService) {
return proxyService.api($stateParams.id);
}
}
You miss param ID in path config state general, Please try change it:
state('app.apis.general', {
url: "/general",
templateUrl: "views/dashboard/general/updateGeneral.html",
controller: "updateGeneralCtrl"
})
>>>change
state('app.apis.general', {
url: "/:id/general",
templateUrl: "views/dashboard/general/updateGeneral.html",
controller: "updateGeneralCtrl"
})
This code is functional, but it could work better. My question:
How i can insert navDetalle or other views in many states without call controller again.
(function() {
'use strict';
angular
.module('miApp')
.config(routerConfig);
var nav = {
templateUrl: 'app/nav/nav.html',
controller: 'NavController',
controllerAs: 'nav'
};
var navInter = {
templateUrl: 'app/nav/navInter.html',
controller: 'NavController',
controllerAs: 'nav'
};
var navDetalle = {
templateUrl: 'app/navDetalle/navDetalle.html',
controller: 'NavDetalleController',
controllerAs: 'navDetalle'
};
/** #ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
// the main template will be placed here (relatively named)
'nav': nav,
'carousel': {
templateUrl: 'app/carousel/carousel.html',
controller: 'CarouselController',
controllerAs: 'carousel'
},
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('detalle', {
url: '/detalle/:idDetalle',
views:{
'nav': navInter,
'detalle': {
templateUrl: 'app/detalle/detalle.html',
controller: 'DetalleController',
controllerAs: 'detalle'
},
'navdetalle': navDetalle,
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('resumen', {
url: '/resumen',
views:{
'nav': navInter,
'navdetalle': navDetalle,
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('success', {
url: '/success',
views:{
'nav': navInter,
'success': {
templateUrl: 'app/success/success.html',
controller: 'SuccessController',
controllerAs: 'success'
},
'navdetalle': navDetalle,
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
})
.state('cancel', {
url: '/cancel',
views:{
'nav': navInter,
'navdetalle': navDetalle,
'cancel': {
templateUrl: 'app/cancel/cancel.html',
controller: 'CancelController',
controllerAs: 'cancel'
},
'footer':{
templateUrl: 'app/footer/footer.html'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();
and if you have suggestion on another improvements please comment
I'm not sure if this is possible to prevent executing controller every time. But, I do have another solution. That might work. The Ionic Framework do this internally by preserving controller state.
Create a global controller and add it to <body> or <html> tag so that its scope can be available every time.
app.controller('GlobalController', function($scope) {
var navDetalleCtrlInstantiated = false;
$scope.$on('$stateChangeStart', function(e, toState, toParams) {
if (!navDetalleCtrlInstantiated && toState.views && toState.views.navdetalle) {
// Do the common logic on controller instantiation
// Mark so that we don't have to do the same logic again
navDetalleCtrlInstantiated = true;
}
});
});
In your view:
<body ng-controller="GlobalController">
</body>
And remove logic from your NavDetalleController.
I don't know if what you want is possible. Because ui-router always creates a new instance to the view's controller, and that makes sense cause every single view has your own scope.
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
Playing around with angular stateProvider, this is my route:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
On bootstrapping I would like to go to state 'test':
app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$state.go('test');
console.log('app.run');
}]);
These are the controllers:
app.controller('StartCtrl', function($scope) {
console.log('start');
});
app.controller('TestCtrl', function($scope) {
console.log('test');
});
Why is the application routing to the 'start' state ? I would like to go to the 'test' state?
Code reference:http://plnkr.co/edit/FCcL4M?p=preview
You need to change the url for either the test or the start "state", right now they are both the same. I changed the test state url to "/test" and it loaded correctly.
http://plnkr.co/edit/2esV4dbd4ptNSEmwD3g4?p=preview
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}
]);
Just need to add to previous answer : both start and test need to be corrected
to follow standards.
http://plnkr.co/edit/TjDzyL?p=preview
pp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/start",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
I have a < ion-side-menu > with links to my pages defined here:
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider.state('content', {
url: "/content",
abstract: true,
templateUrl: "templates/sidemenu.html",
controller: 'SideController'
});
$stateProvider.state('content.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: "HomeController"
}
}
});
$stateProvider.state('content.nearby', {
url: "/nearby",
views: {
'menuContent': {
templateUrl: "templates/nearby.html",
controller: "NearbyController"
}
}
});
$stateProvider.state('content.map', {
url: "/map",
views: {
'menuContent': {
templateUrl: "templates/map.html",
controller: "MapController"
}
}
});
$stateProvider.state('content.radar', {
url: "/radar",
views: {
'menuContent': {
templateUrl: "templates/radar.html",
controller: "RadarController"
}
}
});
$stateProvider.state('content.location-details', {
url: "/location-details/:index",
views: {
'menuContent': {
templateUrl: "templates/location-details.html",
controller: "DetailsController"
}
},
resolve: {
currentLocation: function($stateParams, shareService, NearbyFactory)
{
return NearbyFactory.getLocations()[$stateParams.index];
}
}
});
$urlRouterProvider.otherwise("/content/home");
});
I want to execute a method in my controllers when the user navigates to this page and when the page is left (for loading AJAX data or start listening to some Cordova sensors). Like this:
app.controller("HomeController", function()
{
$scope.onEnter = function(previous_page)
{
...
};
$scope.onExit = function(next_page)
{
...
};
});
I've already tried onEnter and onExit inside the $stateProvider state but afaik I don't have my $scope there.
What is the easiest/best/nicest way to get this functionality? It would be great if I could determine the previous/next page and if the user navigated back/forward. I tried this:
$scope.$on('$routeChangeStart', function(event, next, current)
{
console.log(next);
});
but this didn't work every time and it didn't fire when loading the page. This also seems a bit dirty to me because I'd have to implement this in every single controller.
Thank you!
You can use $ionicView.beforeEnter and beforeLeave.
Simply add this to your HomeController :
app.controller("HomeController", function()
{
$scope.$on('$ionicView.beforeEnter', function() {
//do stuff before enter
});
$scope.$on('$ionicView.beforeLeave', function() {
//do your stuff after leaving
});
});
You can check the docs of the $ionicView here.
You can try this. It works every time when it's loading the page:
$scope.$on('$locationChangeStart', function(event)
{
console.log(event);
});