Is there a way to pass data to controller without including a question mark ?
For example :
When i do this :
$location.path("/inventory/product").search({
id: 1
});
The end url looks like localhost:16684/#/inventory/product?id=8.
How can i make it so that it looks like localhost:16684/#/inventory/product/8 ?
Here is my route config :
{
url: '/inventory/product',
controller: 'inventory',
config: {
title: 'Products',
templateUrl: 'app/views/inventory.html'
}
},
Thanks!
Write it like this :
$location.path("/inventory/product/"+id)
add a second route, and make it go to the same controller
{
url: '/inventory/product',
controller: 'inventory',
config: {
title: 'Products',
templateUrl: 'app/views/inventory.html'
}
},
{
url: '/inventory/product/:id',
controller: 'inventory',
config: {
title: 'Products',
templateUrl: 'app/views/inventory.html'
}
},
Related
I have a modular app who have multiple vendor plugins and I need to load only necessary in every view.
This is my routes:
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main#': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
I know how to include oclazyload resources without webpack, but now I need to include specific resources for every view. ¿How can do this?
I solved it using this snippet:
This is a sample of a state
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
I use this function with require to load entire folder with oclazyload and compile with webpack in a bundle separate file:
function importAll (r) {r.keys().forEach(r);}
I can load css, html, js files in one view without require files one by one
I'm having a problem I can't seem to figure out. When using ui-sref to change to a new state, the correct controller "does" load, but the current controller ALSO reloads. Twice in fact. (I set a break-point in the JavaScript and it hits that break-point twice).
Here is the relevant UI-router code:
.state('index',
{
abstract: true,
url: "/index",
templateUrl: "app/shared/content.html"
})
.state('index.cardholder',
{
url: '/cardholder',
views: {
'content': {
templateUrl: 'app/views/cardholder/cardholder.html',
controller: 'cardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/cardholderController.js']
}
]);
}
},
params: {
loadParams: false
}
})
.state('index.cardholderedit',
{
url: '/cardholder/edit',
views: {
'content': {
templateUrl: 'app/views/cardholder/edit/editCardholder.html',
controller: 'editCardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/edit/editCardholderController.js']
}
]);
}
},
params: {
id: null,
template: null
}
})
And here is the sref that calls the new state:
<a ui-sref="index.cardholderedit({ id:cardholder.empPersonDTO.personId, template:selectedTemplate})">
I did a search on cardholderController just to make sure I didn't have a naming issue somewhere - it all looks kosher.
Why is cardholderController reloading? How do I stop it?
I'm trying to set up my app. It was working fine, but then I had to change some URLs on the ui-router in order to have some sub-views.
Unfortunately, now, I cannot see all my pages properly and I don't understand why.
Here's an example: http://codepen.io/anon/pen/LNQavV?editors=1010
Basically, I have different templates, and when URL changes, I display a different template into appContent view. Inside my details, I need to have a subView called zone, in which I can display detailsOverview template or detailsEdit template.
With my current setup,I'm not able to change page. Well, the page changes according to the URL, but detailsOverview is always displayed!
I think that the problem is somehow related with the subview rather than the URLs, but not 100% sure.
I'm pasting $stateProvider code here as well:
angular.module('ionicApp', ['ionic']).config([
'$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
name: 'app',
url: '/app',
abstract: true,
templateUrl: 'templates/menuTemplate.html'
}).state('app.details', {
name: 'appDetails',
url: '/:zoneID',
views: {
'appContent': {
templateUrl: 'templates/mainDetails.html'
}
}
}).state('app.details.overview', {
name: 'appDetailsOverview',
url: '/details',
views: {
'appContent': {
templateUrl: 'templates/mainDetails.html'
},
'zone': {
templateUrl: 'templates/detailsOverview.html'
}
}
}).state('app.details.edit', {
name: 'appDetailsEdit',
url: '/edit/day/:timerEditDay',
views: {
'appContent': {
templateUrl: 'templates/mainDetails.html'
},
'zone': {
templateUrl: 'templates/detailsEdit.html'
}
}
}).state('app.setup', {
name: 'setup',
url: '/setup',
views: {
'appContent': {
templateUrl: 'templates/setup.html'
}
}
}).state('app.about', {
name: 'about',
url: '/about',
views: {
'appContent': {
templateUrl: 'templates/about.html',
controller: 'aboutPageInfo'
}
}
});
$urlRouterProvider.otherwise('app/');
}
]);
The problem is that with the url: '/:zoneID', in the app.details state you "swallow" all the possible parameters.
Thats means the url #/app/about and #app/setup URLs get also handled by the app.details state and don't seem to work.
In order to get them working, you have to define the app.about and app.setup state before the app.details state:
$stateProvider.state('app', {
name: 'app',
url: '/app',
abstract: true,
templateUrl: 'templates/menuTemplate.html'
}).state('app.setup', {
name: 'setup',
url: '/setup',
views: {
'appContent': {
templateUrl: 'templates/setup.html'
}
}
}).state('app.about', {
name: 'about',
url: '/about',
views: {
'appContent': {
templateUrl: 'templates/about.html',
controller: 'aboutPageInfo'
}
}
}).state('app.details', {
name: 'appDetails',
url: '/:zoneID',
views: {
'appContent': {
templateUrl: 'templates/mainDetails.html'
}
}
}).state('app.details.overview', {
name: 'appDetailsOverview',
url: '/details',
views: {
'appContent': {
templateUrl: 'templates/mainDetails.html'
},
'zone': {
templateUrl: 'templates/detailsOverview.html'
}
}
})
See the updated codepen with a working details and setup page:
http://codepen.io/anon/pen/BKPyMd?editors=1010
I'd like to navigate to the following url through the browser:
http://localhost:9001/jira.
This only works if I add a hash to the url, like this:
http://localhost:9001/#/jira.
I tried setting the html5Mode to true, but this only removes the hash from the url. It still does not allow me to navigate directly to the url.
Here is my code:
grey.config( function( $stateProvider, $provide, $locationProvider ) {
$locationProvider.html5Mode( true ).requireBase( false );
// Set up the different views
$stateProvider
.state('index', {
url: '',
views: {
'jira_filters': {
templateUrl: 'app/partials/jira_filters.html'
},
'ciq_filters': {
templateUrl: 'app/partials/ciq_filters.html'
},
'priority': {
templateUrl: 'app/partials/priority.html'
},
'status': {
templateUrl: 'app/partials/status.html'
},
'rca': {
templateUrl: 'app/partials/rca.html'
},
}
})
.state('jira', {
url: '/jira',
views: {
'jira_filters': {
templateUrl: 'app/partials/jira_filters.html'
},
'ciq_filters': {
templateUrl: 'app/partials/ciq_filters.html'
},
'priority': {
templateUrl: 'app/partials/priority.html'
},
'status': {
templateUrl: 'app/partials/status.html'
},
'rca': {
templateUrl: 'app/partials/rca.html'
},
}
});
});
Apologies if this question is obvious.
I am defining several states simultaneously in my main modules file for use with UI-Router.
My code is:
samApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"nav": {template: "index.nav"},
"header": { template: "index.viewA" },
"page": { template: "index.viewB" }
}
})
.state('articles', {
url: "/route1",
views: {
"nav": {template: "index.nav"},
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"nav": {template: "index.nav"},
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
});
As you can see, I want every route to use the same Nav. Would it be possible to write something like:
.state(['index', 'articles', 'route2'], {
url: "",
views: {
"nav": {template: "index.nav"}
}
})
Or is this just out of the question?
Thank you.
In order to group view definition, use an abstract state:
$stateProvider
.state('parent', {
// use quotes for avoiding compilation issues with this reserved word
'abstract': true,
url: '',
views: {
'nav': { template: 'index.nav' }
}
})
.state('articles', {
parent: 'parent',
url: "/route1",
views: {
// use the viewName#stateName syntax (stateName is empty since we address root no name state
"header#": { template: "index.viewA" },
"page#": { template: "index.viewB" }
}
})
/* ... quite the same for other child states */
;
See ui router view names documentation and ui router abstract state documentation.
'