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'
});
Related
I'm trying to create a nested state config. When I go with the simple non-nested it works, but when I attempt to do it in a nested fashion it fails.
Below is the working code: (Notice the last state 'new')
app.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/views/home.html',
controller: 'MainCtrl',
resolve: {
qstnrPromise: ['qstnrs', function(qstnrs) {
return qstnrs.getAll();
}]
}
})
.state('questionnaires', {
url: '/questionnaires/{id}',
templateUrl: '/views/questionnaire.html',
controller: 'QuestionsCtrl',
resolve: {
questionnaire: ['$stateParams', 'qstnrs', function($stateParams, qstnrs){
return qstnrs.get($stateParams.id);
}]
}
})
.state('new', {
url: '/questionnaires/{id}/new',
template: '<h3> testy </h3>'
});
//$urlRouterProvider.otherwise('home');
$urlRouterProvider.otherwise(function($injector, $location){
$injector.invoke(['$state', function($state) {
$state.go('home');
}]);
});
});
If I attempt to change it with the following, it fails. The URL on browser changes but I don't receive the template.
.state('questionnaires.new', {
url: '/new',
template: '<h3>New question</h3>'
});
Have I understood states incorrectly? Or where have I gone wrong?
Try changing your new state to:
.state('new', {
url: '/new',
parent: 'questionnaires',
template: '<h3>New question</h3>'
})
See if that works for you.
You can make the questionnaires state abstract.
$stateProvider
.state('questionnaires', {
abstract: true,
url: '/questionnaires',
})
.state('questionnaires.new', {
// url will become '/questionnaires/new'
url: '/new'
//...more
})
But in this case you will need to add one additional nested state in order to implement the functionality you need for the $stateParams.id.
i am with doubt of like i call an view inside of other view. I want call the view " menu " in side of state "login" . However is not working
$stateProvider
.state('menu', {
abstract:true,
views: {
"menu": {
templateUrl: 'assets/templates/menu/menu.html',
controller: 'MenuController',
}
}
})
.state("login", {
url: '/login',
views: {
"": {
templateUrl: 'assets/templates/LoginTest.html',
controller: 'LoginController as ctrl',
},
"#menu":{ }
}
});
You need to use nested state for that.
This tutorial will help you AngularJS Multi-Step Form Using UI Router
working plunkr :https://plnkr.co/edit/ar9kbBCdggZxvUGDq5HI?p=preview
$stateProvider
.state('login', {
abstract:true,
url: '/login',
templateUrl: 'assets/templates/LoginTest.html',
controller: 'LoginController as ctrl'
})
// nested states
// each of these sections will have their own view
// url will be nested (/login/menu)
.state("login.menu", {
url: '/menu',
templateUrl: 'assets/templates/menu.html',
controller: 'MenuController'
}
);
I started building ionic app, and I want to change the views, I am not using tag, I have separate file for every view.
The states look like this:
var route = angular.module('route', []);
route.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'home.html',
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html'
})
.state('manage-booking', {
url: '/manage-booking',
templateUrl: 'manage_booking.html'
})
.state('clinic-list', {
url: '/clinic-list',
templateUrl: 'clinic_list.html'
})
$urlRouterProvider.otherwise('/home');
});
When I run the app, the url defaults to '/#/home'
I am not able to figure out why is it not loading the home page. When I change the otherwise to point to '/#/login', everything works.
Remove the abstract: true property (source)
I have a wizard based process for creating quotes. I'm using angularjs ui-router to manage the wizard urls. The routes shown below work fantastic for creating a new quote. I now need to go back in to edit existing quotes and need to figure out how to use the ID in the URL. I was thinking something like baseUrl/quote#/3/options (quote #3 options step). Currently the url looks like baseUrl/quote#/options. If I change the url in the .state definition from url: 'options', to url:':quoteId/options' it breaks my routes (can no longer get to the option step). Also this wouldn't work for a new quote since it doesn't yet have an ID. What's the best way to get this to work?
quoteWizardModule.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('wizard', {
url: '',
templateUrl: 'Scripts/templates/quoteWizard/wizardLayout.html',
controller: 'wizardNavigationCtrl'
})
.state('wizard.options', {
url: 'options',
templateUrl: 'Scripts/templates/quoteWizard/wizardOptions.html',
controller: 'wizardOptionsCtrl'
})
.state('wizard.newmodel', {
url: 'newmodel',
templateUrl: 'Scripts/templates/quoteWizard/wizardModel.html',
controller: 'wizardModelCtrl',
})
.state('wizard.model', {
url: 'model/:factoryId/:index',
templateUrl: 'Scripts/templates/quoteWizard/wizardModel.html',
controller: 'wizardModelCtrl'
})
.state('wizard.other', {
url: 'other',
templateUrl: 'Scripts/templates/quoteWizard/wizardOther.html',
controller: 'wizardOtherCtrl'
})
.state('wizard.customer', {
url: 'customer',
templateUrl: 'Scripts/templates/quoteWizard/wizardCustomer.html',
controller: 'wizardCustomerCtrl'
})
.state('wizard.shipping', {
url: 'shipping',
templateUrl: 'Scripts/templates/quoteWizard/wizardShipping.html',
controller: 'wizardShippingCtrl'
})
.state('wizard.notes', {
url: 'notes',
templateUrl: 'Scripts/templates/quoteWizard/wizardNotes.html',
controller: 'wizardNotesCtrl'
})
.state('wizard.review', {
url: 'review',
templateUrl: 'Scripts/templates/quoteWizard/wizardReview.html',
controller: 'wizardReviewCtrl'
});
}]);
How do I load different layouts ?
Currently I have three layouts for my backend, one for admin, one for user and last for teacher i.e adminLayout.html, userlayout.html and teacherLayout.html for dashboards.
I am writing my routes something like this -
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/home.html',
controller: 'homeCtrl'
})
.when('/users/login', {
templateUrl: 'views/users/login.html',
controller: 'usersLoginCtrl'
})
.when('/users/dashboard', {
templateUrl: 'views/users/dashboard.html',
controller: 'usersDashCtrl'
})
.when('/teachers/login', {
templateUrl: 'views/teachers/login.html',
controller: 'teachersLoginCtrl'
})
.when('/teachers/dashboard', {
templateUrl: 'views/teachers/dashboard.html',
controller: 'teachersDashCtrl'
})
});
For /users/dashboard I want usersLayout.html and /teachers/dashboard I want teachersLayout.html.
How could I acheive this ?
I tried $window.location.href = "LINK_TO_LAYOUT"; but its is taking the whole path in the URL, however I want to my URL like -
mysite.com/teachers/dashboard
mysite.com/users/dashboard
mysite.com/admin/dashboard
You should use Ui-Router.
It support nested views.
So in your example your routes would be like this.
app.config(function($stateProvider){
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/pages/home.html',
controller: 'homeCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'views/users/layout.html'
})
.state('users.login', {
url: '/users/login',
templateUrl: 'views/users/login.html',
controller: 'usersLoginCtrl'
})
.state('users.dashboard', {
url: '/users/dashboard',
templateUrl: 'views/users/dashboard.html',
controller: 'usersDashCtrl'
})
.state('teachers', {
url: '/teachers',
templateUrl: 'views/teachers/layout.html'
})
.state('teachers.login', {
url: '/teachers/login',
templateUrl: 'views/teachers/login.html',
controller: 'teachersLoginCtrl'
})
.state('teachers.dashboard', {
url: '/teachers/dashboard',
templateUrl: 'views/teachers/dashboard.html',
controller: 'teachersDashCtrl'
})
});
Then you need to creat this new Layout Pages.
On: views/users/layout.html
<div id="usersLayout">
<ui-view/>
</div>
On: views/teachers/layout.html
<div id="teachersLayout">
<ui-view/>
</div>
Hope this get you going.
One of ways use 'abstract' state from ui-router
$stateProvider
.state('contacts', {
abstract: true, // <<< this is your layout
url: '/contacts',
// Note: abstract still needs a ui-view for its children to populate.
// You can simply add it inline here.
// >>> Or use templateUrl: 'contactLayout.html'
template: '<ui-view/>'
})
.state('contacts.list', {
// url will become '/contacts/list'
url: '/list'
//...more
})
.state('contacts.detail', {
// url will become '/contacts/detail'
url: '/detail',
//...more
})
Please spend some time for learning ui-router and you will have powerfull and simple tool for routing in angularjs.
Check docs for more info about abstract state.