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');
Related
My website has 2 main routes:
/home
/:something
Any request to / should go to /home and this is done by using 'otherwise', anything else that does not match home AND is not empty should go to app.lista. The thing is, app.lista matches / because is like :slug is empty, so otherwise is not being called:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: '/_/common/templates/main.html',
controller: 'main'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
How can I tell the stateProvider to not match app.lista if :slug is empty?
Looks like same issue which is logged Here on github and solution seems to be the use ragular expression
I think changing your slug route to
.state('app.lista', {
url: '/{slag:[^\/]+}',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
Should solve your problem plunker
Make your app route non-abstract and change the template and controller to point to that of app.home. Since it is defined before app.list, '/' will match app route instead.
$stateProvider
.state('app', {
url: '/',
templateUrl: '/_/common/templates/home.html',
controller: 'home'
})
.state('app.home', {
url: 'home',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/home.html',
controller: 'home'
}
}
})
.state('app.lista', {
url: ':slug',
views: {
sectionHolder: {
templateUrl: '/_/home/templates/list.html',
controller: 'list'
}
}
});
$urlRouterProvider.otherwise('/home');
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('app.lista', {
url: '/:slug',
templateUrl: '----.html',
controller: 'list',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.slug=== undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
I m new to angularjs and ui-router...I m facing hard time in solving issue
I have ui router configured.It works well upto two nested states but when i add new nested state ,it stop working.i cant figure out the reason,can some one point me what i miss??
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('settings', {
url: '/settings',
templateUrl: 'public1/settings.html'
})
.state('settings.profile', {
url: '/profile',
templateUrl: 'public1/profile.html',
controller: 'ProfileController'
})
.state('settings.account', {
url: '/account',
templateUrl: 'public1/account.html',
controller: 'AccountController'
});
.state('settings.login', {
url: '/login',
templateUrl: 'public1/login.html'
});
$urlRouterProvider.otherwise('/public1/profile');});
The end of your settings.account 'state', you have a semi-colon before the .state('settings.login ...
That's what's causing your error, I suspect.
Remove ";" from account state
.state('settings.account', {
url: '/account',
templateUrl: 'public1/account.html',
controller: 'AccountController'
})
.state('settings.login', {
url: '/login',
templateUrl: 'public1/login.html'
});
I have state as follow. I can navigate from app to app.child1. But I cannot navigate from app.child1 to app.child1.child2. There is no error in browser console. Do note that I am developing an ionic application but i dont think that this is ionic issue.
app.state('app', {
url: '/app',
abstract: true,
templateUrl: '',
controller: ''
})
.state('app.child1', {
url: '/app',
views: {
'menuContent': {
templateUrl: '',
controller: ''
}
}
})
.state('app.child1.child2', {
url: '/app/child1/child2',
views: {
'menuContent': {
templateUrl: '',
controller: ''
}
}
})
Navigation:
<button ui-sref="app.child1.child2">Change Page</button>
There is a working plunker
There are few issues with the state definition, which are covered in comments below:
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app.tpl.thml',
controller: 'appCtrl'
})
.state('app.child1', {
// child1 should have url part /child1
// while the /app is inherited from parent
//url: '/app',
url:'/child1',
views: {
'menuContent': {
templateUrl: 'child1.tpl.html',
controller: 'child1Ctrl'
}
}
})
.state('app.child1.child2', {
// all parts are inherited from parents
// so just /child2 is enough
//url: '/app/child1/child2',
url: '/child2',
views: {
// we target named view in a grand parent
// not in parent, we need to use the absolute name
// 'menuContent': {
'menuContent#app': {
templateUrl: 'child2.tpl.html',
controller: 'child2Ctrl'
}
}
})
These links will work now
<a href="#/app/child1">
<a href="#/app/child1/child2">
<a ui-sref="app.child1">
<a ui-sref="app.child1.child2">
Check it in action here
Your states don't have a template (templateUrl: ''). They should have a template with ui-view directive where it's child state can be injected.
The issue I'm having is that for some reason when navigating to the users home aside from it not loading and causing my browser to freeze when I inspect the console. (I take out the abstract: true from app.user) in the console it shows the 's of my of app.user.base nested inside each other with the top being the mainview and the footer getting loading inside of it. What Am i doing wrong?
.state('app', {
abstract: true,
url: '',
template: '<ui-view/>'
})
.state('app.user', {
abstract: true,
url: '/user',
templateURL: 'app/user/user.html'
})
.state('app.user.base, {
url: '',
views: {
mainView: {
template: '<ui-view/>'
}
footer: {
templateUrl: 'app/user/views/footer.html',
controller: 'footerCtrl'
}
}
})
.state('app.user.base.home', {
url: '/home',
templateURL: 'app/user/views/home.html',
controller: 'uHomeCtrl'
})
.state('app.user.base.profile', {
url: '/profile',
templateURL: 'app/user/views/profile.html',
controller: 'uProfileCtrl'
})
.state('app.main, {
abstract: true,
url: '',
templateURL: 'app/main/main.html'
})
.state('app.main.home, {
url: '/home',
views: {
landing: {
templateUrl: 'app/main/views/landing.html',
controller: 'landingCtrl'
},
about: {
templateUrl: 'app/main/views/about.html',
controller: 'aboutCtrl'
}
}
})
not sure if you can have it the same url's '/home' in few places, please read this article about nested states I may help to fix you issue.
You need to make sure to remove url property from all the states you have that are not navigable. Do that first, then see what new errors you get. URLs are not at all required to be able to navigate to a state.
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