I am having an issue loading controllers / templates for each child state. I have a console.log in each state controller, yet they don't fire. Any ideas will be greatly appreciated!
Intent is to always load artist for every child state following.
var stateConfig = ['$stateProvider', function($stateProvider) {
// State Configurations
$stateProvider
.state('artist', {
abstract: true,
url: '/' + artistSlug,
controller: "artistCtrl",
resolve: {
artist: function(artist){
return artist.getArtist();
}
}
})
.state('events', {
parent: 'artist',
url: '',
controller: 'eventsCtrl',
templateUrl: "/templates/artist/events.html"
})
I think you need to revise your states / params
It should go artists -> artists.artist -> artists.artist.events. Then if you go to //site.com/artists/justintimberlake/events it will resolve artist and then events
var stateConfig = ['$stateProvider', function($stateProvider) {
// State Configurations
$stateProvider
.state('artists', {
abstract: true,
url: '/artists'
})
.state('artists.artist', {
url: '/:artistId',
controller: 'artistCtrl',
template: '<div ui-view>Artist Template Wrapper for Artist and Events</div>',
resolve: {
artist: function (artist, $stateParams) {
return artist.getArtist($stateParams.artistId);
}
}
})
.state('artists.artist.events', {
url: '/events',
controller: 'eventsCtrl',
templateUrl: '/templates/artist/events.html',
resolve: {
events: function (artist, $stateParams) {
return artist.getArtistEvents($stateParams.artistId);
}
}
})
}];
Related
For example, on the last state on the below code I want to get the value of "category" URL parameter so that I can use it to retrieve some from the database
var app = angular.module("myApp",["ui.router"]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("main", {
url: "/",
views: {
"slider": {
templateUrl: "slider.html"
},
"departments": {
templateUrl: "departments.html"
},
"brands": {
templateUrl: "brands.html"
}
}
})
.state("cart", {
url: "/cart",
views: {
"cart": {
templateUrl: "../account/cart.php"
}
}
})
.state("department", {
url: "/department/:category",
views: {
"department": {
templateUrl: "department.php"
}
}
});
});
Create a controller, pass stateParams and instantiate the controller within the views of the last state
.state("department", {
url: "/department/:category",
views: {
"department": {
templateUrl: "department.php",
controller: "myController"
}
}
});
});
app.controller('myController', function($stateParams) {
var param = $stateParams.category;
document.getElementById("category").value = param;
});
I'm working with a large AngularJS application, which has 1 large module, which I'm trying to break down into more easily managed modules.
We have several ui-views on the main page for menu, footer, content, sidebar etc.
At the moment each $stateProvider.state is populating each of these ui-views on every state change. I want to change it to only be more hierarchical and only have the root state change these. This I can do.
However, I'm having issues when I split the application into modules. I've created a Plunker to demonstrate.
(function() {
angular
.module("acme", ["ui.bootstrap", "ui.router", "acme.admin", "acme.stock"]);
angular
.module("acme")
.config(MainModuleConfig);
MainModuleConfig.$inject = ["$stateProvider", "$urlRouterProvider", "$locationProvider"];
function MainModuleConfig($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
var root = {
name: "root",
url: "/",
views: {
"menuView": {
templateUrl: "app/menu/menuTemplate.html",
},
"mainView": {
templateUrl: "app/mainTemplate.html",
controller: "MainController",
controllerAs: "vm",
}
}
};
$stateProvider
.state("root", root);
$urlRouterProvider
.otherwise("/");
}
})();
(function() {
angular
.module("acme.admin", ["ui.router"]);
angular
.module("acme.admin")
.config(AdminConfig);
AdminConfig.$inject = ["$stateProvider", "$locationProvider"];
function AdminConfig($stateProvider, $locationProvider) {
var admin = {
name: "admin",
url: "/Admin",
views: {
"menuView": {
templateUrl: "app/menu/menuTemplate.html",
},
"mainView": {
templateUrl: "app/admin/adminTemplate.html",
}
}
};
var countries = {
name: "admin.Countries",
url: "/Admin/Countries",
views: {
"adminView": {
templateUrl: "app/admin/adminCountriesTemplate.html",
controller: "AdminCountriesController",
controllerAs: "vm"
}
}
}
var people = {
name: "admin.People",
url: "/Admin/People",
views: {
"adminView": {
templateUrl: "app/admin/adminPeopleTemplate.html",
controller: "AdminPeopleController",
controllerAs: "vm"
}
}
}
$stateProvider
.state("admin", admin)
.state("admin.Countries", countries)
.state("admin.People", people);
}
})();
In the admin module and others, I don't want to have to set the "menuView" again, but I can't see how to reference the parent
I managed to fix the issue:
First I set up the root state in the main module:
var root = {
name: "root",
url:"/",
views: {
"menuView": {
templateUrl: "app/menu/menuTemplate.html",
},
"mainView": {
templateUrl: "app/mainTemplate.html",
controller: "MainController",
controllerAs: "vm",
}
}
};
Then in the child modules, I changed the main node to be a child of root and also suffixed the ui-view name with an #:
var admin = {
name: "root.admin",
url: "/Admin",
views: {
"mainView#": {
templateUrl: "app/admin/adminTemplate.html",
}
}
};
The plunker has been updated with the working example.
I cretaed a new ionic blank app intuit there are two html pages: 1 index.html and a category.html. I configured the states and then added controller in app.js file but it is not working.
This is my state configurations:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'index.html'
})
.state('category', {
url: "/category",
templateUrl: "category.html",
controller: 'CategoryCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/camera');
})
And this is my controller:
.controller('CameraCtrl',function($scope,$state){
$scope.menu = function() {
console.log('yesytest');
$state.go('category');
// window.location = "category.html";
};
})
This is my app.js. Is anything wrong here?
Unfortunately I only had 15 minutes to mock this together, Let me know if this works for you and if you need any further assistance drop me a response.
Controller
var example = angular.module('starter', ['ionic', 'starter.controllers',]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html'
}
}
})
.state('tab.camera', {
url: '/camera',
views: {
'camera': {
templateUrl: 'templates/camera.html'
}
}
})
.state('tab.category', {
url: '/category',
views: {
'category': {
templateUrl: 'templates/category.html'
}
}
});
$urlRouterProvider.otherwise('/tab/home');
});
>>> Working Example <<<
i'm trying to get work this combination of sub levels routes.
http://plnkr.co/edit/1nBzppJkB45Ljv5SRW4b?p=preview
i took a sample from ui-route on github and added a parent view (contactg).
$stateProvider
.state('contactg', {
url: '/contactg',
templateUrl: 'contactG.html',
onEnter: function () { console.log("enter contactG"); }
})
.state('contactg.contacts', {
abstract: true,
url: '/contacts',
templateUrl: 'contacts.html',
controller: function ($scope) {
$scope.contacts = [{ id: 0, name: "Alice" }, { id: 1, name: "Bob" }];
},
onEnter: function () {
console.log("enter contacts");
}
})
.state('contactg.contacts.list', {
url: '/list',
// loaded into ui-view of parent's template
templateUrl: 'contacts.list.html',
onEnter: function () {
console.log("enter contacts.list");
}
})
.state('contactg.contacts.detail', {
url: '/:id',
// loaded into ui-view of parent's template
templateUrl: 'contacts.detail.html',
controller: function ($scope, $stateParams) {
$scope.person = $scope.contacts[$stateParams.id];
},
onEnter: function () {
console.log("enter contacts.detail");
}
})
My issues is when i click on an item in contactg.contacts.list, the link generated tends to redirect me to /contacts/:id (detail) instead of /contactg/contacts/:id
is there a way to specify that ?
Thanks
Guillaume.
When using ui-router's $state.go() in my Ionic app, the onEnter method is not called.
The states would be transitioning from tab.settings to tab.queries. The state transitions fine. How do I get the onEnter method to be called from $state.go() call? Does onEnter not get called when entering child views?
Route
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.queries', {
url: '/queries',
views: {
'tab-queries': {
templateUrl: 'templates/tab-queries.html',
controller: 'QueryCtrl',
onEnter: function() {
activate();
}
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
});
SettingsCtrl
vm.removeAll = function() {
Data.removeAll().then(function() {
$state.go('tab.queries');
});
};
QueryCtrl
function activate() {
console.log('Activating');
}
Try moving the onEnter from within the view object up a level to the state object, I've just ran across this same problem and it seemed to work OK for me.
.state('tab.queries', {
url: '/queries',
views: {
'tab-queries': {
templateUrl: 'templates/tab-queries.html',
controller: 'QueryCtrl'
}
},
onEnter: function() {
activate();
}
})