on an Ionic-angular application, I'm calling:
$state.go("main.crudlist");
and having the following exception in response:
Error: Could not resolve 'entry' from state 'main'
at Object.transitionTo (angular-ui-router.min.js:3074)
at Object.go (angular-ui-router.min.js:3007)
at angular-ui-router.min.js:4057
at angular.min.js:138
at e (angular.min.js:40)
at angular.min.js:44
What's that entry supposed to mean?
Here's the state declaration:
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'Content/Mobile/templates/login.html',
controller: 'LoginController'
})
.state('settings', {
url: '/settings',
templateUrl: 'Content/Mobile/templates/settings.html',
controller: 'SettingsController'
})
// setup an abstract state for the tabs directive
.state('main', {
url: "/main",
templateUrl: "Content/Mobile/templates/main.html",
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'Content/Mobile/templates/home.html',
controller: 'HomeController'
}
}
})
.state('main.settings', {
url: '/settings',
views: {
'main': {
templateUrl: 'Content/Mobile/templates/settings.html',
controller: 'SettingsController'
}
}
})
.state('main.crudlist', {
url: "/crudlist",
views: {
'main': {
templateUrl: "Content/Mobile/templates/crudlist.html",
controller: 'CrudListController'
}
}
})
In the end,it had nothing to do to angular,but to the ionic html declaration itself.
I had:
<a ui-sref="entry" class="item" ng-repeat="leaf in menuleafs()" ng-click="loadApplication(leaf)">{{leaf.title}}</a>
Switching it to:
<a class="item" ng-repeat="leaf in menuleafs()" ng-click="loadApplication(leaf)">{{leaf.title}}</a>
Did the trick.
Sorry I didn't provide enough info
Related
I scaffolded an ionic V1 site using tab template and created the following link in a page.
<a href="#/tab/Test">
Test
</a>
And an empty control for "Test" page.
.controller('TestCtrl', function ($scope) {
})
The following is the router
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
However, when testing using ionic serve, click the link doesn't go to the page. It stays in the page but the URL in the address bar changed to localhost:8100/#/tab/test.
Full router.
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('events', {
url: '/events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
.state('tab.venues', {
url: '/venues',
views: {
'tab-venues': {
templateUrl: 'templates/tab-venues.html',
controller: 'VenuesCtrl'
}
}
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'templates/tab-events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.categories', {
url: '/categories',
views: {
'tab-categories': {
templateUrl: 'templates/tab-categories.html',
controller: 'CategoriesCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Update:
It will works if I change the router to the following. But it will be full screen and the tabs are gone.
.state('test', {
url: '/test',
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
})
and the link href to href="#/privacy".
Change the href url href="#/test'" instead of href="#/tab/Test"
I am using this code
<ion-tab title="" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/test" ng-if="userkey">
<ion-nav-view name="tab-test"></ion-nav-view>
</ion-tab>
if you want to navigate
< ion-nav-view name="tab-test">
and state name sould be same
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
Im transitioning from one state to another using $state.go() like below:
$state.go('menuItem.list');
This causes following error.
Could not resolve 'menuItem.list' from state 'branches.view'
Below are the state providers for menuItem and branch modules.
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
})
.state('branches.view', {
url: '/:branchId',
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
})
This way you can all modules in new module file
angular.module('branches.modules', [
'branches', 'branches.list', 'branches.view', 'menuItems','menuItems.list'
]);
and add that in your main app.js or app.module.js
angular.module('app', ['ui.router', 'branches.modules']);
yo can use code below :
module : branch
.state('branches', {
abstract: true,
url: '/branches',
template: '<ui-view/>'
})
.state('branches.list', {
url: '',
views: {
templateUrl: 'modules/branches/client/views/list-branches.client.view.html',
controller: 'branchesListController',
controllerAs: 'vm'
}
})
.state('branches.view', {
url: '/:branchId',
views: {
templateUrl: 'modules/branches/client/views/view-branch.client.view.html',
controller: 'branchesController',
controllerAs: 'vm'
}
})
module : menuItem
.state('menuItems', {
abstract: true,
url: '/menuItems',
template: '<ui-view/>'
})
.state('menuItems.list', {
url: '',
views:{
templateUrl: 'modules/menuItems/client/views/list-menuItems.client.view.html',
controller: 'menuItemsListController',
controllerAs: 'vm'
}
})
you must use views in state
Good Luck
I am trying to use ui-sref in ion-slide tag but it is not working.
Does ion-slide support ui-sref or href?
Please see the below code snippet
<ion-content scroll="false" class="animate-ripple">
<ion-slide-box show-pager="false" ion-slide-tabs slide-tabs-scrollable=false on-slide-changed="slideHasChanged($index)">
<ion-slide ion-slide-tab-label="General" ui-sref="app.holiday.generalholiday"><ion-nav-view name="general-tab"></ion-nav-view></ion-slide>
<ion-slide ion-slide-tab-label="Restricted" ui-sref="app.holiday.restrictedholiday"><ion-nav-view name="restricted-tab"></ion-nav-view></ion-slide>
<ion-slide ion-slide-tab-label="On Sunday" ui-sref="app.holiday.onsundayholiday"><ion-nav-view name="onsunday-tab"></ion-nav-view></ion-slide>
</ion-slide-box>
</ion-content>
my app.js looks like below
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: "AppCtrl"
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state('app.applyleave', {
url: '/applyleave',
views: {
menuContent: {
templateUrl: 'templates/applyleave.html',
controller: 'ApplyLeaveCtrl'
}
}
})
.state('app.balances', {
url: '/balances',
views: {
menuContent: {
templateUrl: 'templates/balances.html',
controller: 'BalancesCtrl'
}
}
})
.state('app.history', {
url: '/history',
views: {
menuContent: {
templateUrl: 'templates/history.html',
controller: 'HistoryCtrl'
}
}
})
.state('app.holiday', {
url: '/holiday',
views: {
menuContent: {
templateUrl: 'templates/holiday.html',
controller: 'HolidayCtrl'
}
}
})
.state('app.holiday.generalholiday', {
url: '/generalholiday',
views: {
'general-tab': {
templateUrl: 'templates/generalholiday.html',
controller: 'GeneralHolidayCtrl'
}
}
})
.state('app.holiday.restrictedholiday', {
url: '/restrictedholiday',
views: {
'restricted-tab': {
templateUrl: 'templates/restrictedholiday.html',
controller: 'RestrictedHolidayCtrl'
}
}
})
.state('app.holiday.onsundayholiday', {
url: '/onsundayholiday',
views: {
'onsunday-tab': {
templateUrl: 'templates/onsundayholiday.html',
controller: 'SundayHolidayCtrl'
}
}
})
Neither ui-sref nor href is working.
Please suggest if there is any workaround or I am missing something.
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
I m new at Angular so please forgive me for this question. But i didnt find a way to solve it. I have two main states and these states has child states.
$stateProvider
.state('login', {
url: "/login",
abstract: true,
templateUrl: "views/login.html"
})
.state('login.intro', {
url: "/intro",
views: {
'menuContent': {
templateUrl: "views/intro.html",
controller: "introController"
}
}
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/menu.html"
})
.state('app.main', {
url: "/main",
views: {
'menuContent': {
templateUrl: "views/main.html",
controller: "MainController"
}
}
})
I m trying redirect to app.main state when i m in login.intro state with this code.
$scope.startApp = function () {
$state.go('/app/main');
};
But i m getting this error
Error: Could not resolve '/app/main' from state 'login.intro'
at Object.transitionTo
So can you help me to fix this problem please ?
$state.go() expects the name of a state:
$state.go('app.main');