AngularJS UI-Router optional url segment in the middle - javascript

I want to have an optional url segment for the following example:
url: "/post/:category/:subcategory/:title/{id:int}",
In the above example subcategory is optional. For example it will accept:
url: "/post/sports/football/some-title/10",
and it will also accept:
url: "/post/sports/some-title/15",
which do not have subcategory. I can do that using to separate states but is there any rule for that?
Please note only subcategory segment is optional. Others are mandatory.

.state('post', {
url: '/post/:category/:subcategory/:title/:{id:int}',
templateUrl: 'views/post.html',
controller: 'postCtrl',
params: {
subcategory: { squash: true, value: null },
}
})
For more info read the doc

Solution is in detail described here
Angular js - route-ui add default parmeter
and here is how we can define such parameter:
.state('state', {
url: '/:category/{subcategory:(?:football|tennis|hokey)}/:title/:id',
abstract: true,
template: '<div ui-view=""></div>',
params: {subcategory : { squash : true, value: 'football' }}
})

Related

How to pass data through url of ionic-plugin-deeplinks

.state('profiledet', {
url: '/profiledet',
params: { 'profile_id': null},
templateUrl: 'templates/profile-det.html',
controller: 'profiledet'
})
above is the route of my page.
$cordovaDeeplinks.route({
'/profiledet': {
target: 'profiledet',
parent: 'profiledet'
}
})
this is the deep linking route, I can't pass data through this. Can anyone help me?
I have got the answer, below is the code.
$cordovaDeeplinks.route({'/profiledet:profile_id': {
target: 'profiledet',
parent: 'profiledet'
}
})

Possible to hide some parameters in URL with Angular UI Router?

I want to pass two values to new ui-view via params:
item id
list of objects
However, I'd like the new view to show only the id in the browser URL and not the stringified array of objects:
http://www.myapp.com/#/my-view/4
INSTEAD OF
http://www.myapp.com/#/my-view/4?flskdjalfjaewoijoijasdlfkjösldakjföliwejöorijo
Is it possible to either a) pass the array of objects hidden to the ui-view or b) pass both but hide the other from the browser URL?
I found something about the squash parameter, but couldn't get it to do what I'm trying.
Here's my view:
$stateProvider
.state('show', {
url: "/show/{itemId}?{itemList}",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController',
params: {
itemList: {
value: null,
squash: true
},
itemId: -1
}
}
}
How can I hide the list of objects from the URL, without hiding the id?
You are on the right path. To hide params you have to define them in params as you do, without squash.
Your example should look like:
$stateProvider
.state('show', {
url: "/show?itemId",
views: {
'mainView': {
templateUrl: 'views/itemView.html',
controller: 'showController'
// params do not work here! They need to be attached below ...
// $stateProvider.state('show', {url:'/show/:url_param',views:{}, params: {}})
}
},
resolve: {},
params: {
itemList: {
value: null
}
}
})
See example: http://plnkr.co/edit/wEjwCVWMKTyuSdyLr0og?p=preview
It's also possible doing that
SomeController:
$state.go(someState, {
'itemId' : item._id,
'itemName' : item.title
});
SomeRoute
function someRoute($stateProvider) {
$stateProvider
.state('someState', {
url : '/:itemName',
params : {
'itemId' : null //hides itemId param
}
});
}
Output: .../itemnumber1

durandal.js navigation with parameters

i am not able to navigate from one view to another view with pararameter
from :-
ViewModel : App/Foldername/page1.js
View : App/Foldername/page1.html
i want to go with id parameter:
ViewModel : App/Foldername/page2.js
View : App/Foldername/page2.html
in page1.js i wrote following things,
self.goTopage2 = function (id) {
router.mapRoute('Foldername/page2/:id', 'viewmodels/Foldername/page2', 'This is page2view');
};
in shell.js
function boot() {
router.mapNav('home');
router.mapNav('details');
router.mapNav('Foldername/page2');
log('Hot Towel SPA Loaded!', null, true);
return router.activate('home');
}
please guid me correct way!
A common approach is to have a list of routes somewhere and load up that list. When you define a list such as below, you need to use router.map() to map the routes, as mapNav creates a default route without parameters. Example of an object containing routes -
var routes = [{
url: 'home',
moduleId: 'viewmodels/home',
name: 'Home',
visible: true,
settings: {}
}, {
url: 'events',
moduleId: 'viewmodels/events/events',
name: 'Events',
visible: true,
settings: {}
}, {
url: 'eventdetails/:id',
moduleId: 'viewmodels/events/eventdetails',
name: 'Event Details',
visible: false,
settings: { event: true, show: false }
}];
And how to map those routes -
router.map(routes);
And finally how to visit those routes -
router.activate('home');
or
var url = '#/fighterdetails/' + selectedFighter.id();
router.navigateTo(url);
(DurandalJS 1.2.0) I'm not totally sure if this is the best way, since I'm quite new to Durandal, but at least managed to make it work with this:
In main.js:
router.mapRoute('details/:id', 'viewmodels/details', 'Details', false);
In list.js:
loadDetails: function (id) {
router.navigateTo('#/details/' + id);
},

ExtJS 4 TreePanel autoload

I have an Ext.tree.Panel which is has a TreeStore. This tree is in a tab. The problem is that when my application loads all of the trees used in the application load their data, even though the store is on autoLoad: false.
How could I prevent autoloading on the tree?
Ext.define('...', {
extend: 'Ext.container.Container',
alias: 'widget.listcontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
html: "...",
border: 0
}, {
xtype: '...',
flex: 1,
bodyPadding: 5,
margin: '9 0 0 0'
}]
});
Ext.define('...', {
extend: 'Ext.data.TreeStore',
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read: 'some url'
}
}
});
Ext.define('...', {
extend: 'Ext.tree.Panel',
alias: 'widget....',
id: '...',
title: '...',
height: 400,
collapsible: true,
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: true,
autoScroll: true,
store: '...',
columns: [...]
});
P.S. I've found out if I change rootVisible to true on the tree this problem doesn't happen, but then it shows to root node(which I don't want).
I hit the same problem, and to avoid an implicit request, I specified a root inline in the TreeStore's configuration, like:
Ext.create('Ext.data.TreeStore', {
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read : 'some url'
}
folderSort: true,
rootVisible: false,
root: {expanded: true, text: "", "data": []} // <- Inline root
});
After an explicit .load the inline root is overwritten.
If root is invisible then AJAX tree will automatically load first level of hierarchy (as you already proved by yourself).
I think the best way is to make root visible or create tree after some actions. I wrote code that prevent AJAX request that loads data:
var preventTreeLoad = true;
store.on('beforeexpand', function(node) {
if (node == this.getRootNode() && preventTreeLoad) {
Ext.Ajax.abort(this.proxy.activeRequest);
delete this.proxy.activeRequest;
}
}, store);
var b = Ext.create('Ext.Button', {
text: 'Click me',
renderTo: 'btn',
});
b.on('click', function() {
preventTreeLoad = false;
this.load();
}, store);
But I'm not recommended to use this approach. For example, if javascript wasn't so fast - Ajax request may be send (response will not be read but server will execute operation).
You can put a dummy proxy in place when defining the tree, then set the real proxy when you want to begin using the tree/store. For example:
var store = Ext.define('Ext.data.TreeStore', {
...
// dummy proxy to avoid autoLoad on tree store construction
proxy: {
type: 'ajax',
url: ''
},
...
);
Then, when you want to use it for the first time,
store.setProxy({
type: 'ajax',
url: 'http://some/real/url',
...
});
store.load();
You can solve it with a small override:
Ext.override(Ext.tree.View,
{
setRootNode: function(node)
{
var me = this;
me.store.setNode(node);
me.node = node;
if (!me.rootVisible && me.store.autoLoad)
{
node.expand();
}
}
});
afterlayout you need a load()
Adding to what XenoN said (though many years later when I hit the same issue)
If the expanded property is set to true in the store definition, it will auto load even if autoLoad is set to false. this is unique to a TreeStore.
However, if we do want the store to load and expand we need to
Set expanded = true sometimes in code after creation (when we want) this also fires the loading of the previously created store.
setting store.setRoot({expanded:true}); within the consumer of the store which is Ext.tree.Panel.
This will load the store when you want it to load it.
seems like after that, store.load() is redundant since the expanded = true makes the store's proxy to load up and go to the server. weird, I know.
Simplest way is setting Store's root property
Ext.create('Ext.data.TreeStore', {
....
autoLoad:false,
root: {
expanded: false
}
});
Try with children and autoLoad : false :
root: {
children : []
}

need some jquery if-else statement help

the code below is broken, but I'm not sure how. I've definitely made some big assumptions here as a newbie.
I'm basically trying to create an if else where imBannerRotater functions on #cast if the variable is true and #pram if it is false.
How could I fix this to get that result?
The # are URLs.
Thanks!-zeem
$(document).ready(function(){
if (mmjsRegionName == 'CO')
{
$("#cast").imBannerRotater({
return_type: 'json',
data_map: {
image_name: 'name',
url_name: 'url'
},
image_url: '#',
base_path: '#',
});
}
else
{
$("#pram").imBannerRotater({
return_type: 'json',
data_map: {
image_name: 'name',
url_name: 'url'
},
image_url: '#',
base_path: '#',
});
});
$(function(){
var $target = $('#cast'); // or whatever you want as a default
if (mmjsRegionName == 'CO'){
$target = $('#cast');
}else{
$target = $('#param');
}
$target.imBannerRotater({
return_type: 'json',
data_map: {
image_name: 'name',
url_name: 'url'
},
image_url: '#',
base_path: '#',
});
});
Little refactored, but should get you there.
(Though I'm not sure what you mean by "if the variable is true"--check if (mmjsRegionName){ instead of comparing it to a string maybe?)
EDIT
If it is a true/false case, you may be better off using this:
$(function(){
$(mmjsRegion?'#cast':'#param').imBannerRotater({ // note the in-line if statement
return_type: 'json',
data_map: {
image_name: 'name',
url_name: 'url'
},
image_url: '#',
base_path: '#',
});
});
If you are testing whether mmjsRegionName is true or false, then your if statement should just be:
if(mmjsRegionName) { ...
The best way to do it would be to create a variable and change it to either "cast" or "pram"
var myID = "pram";
if (mmjsRegionName == 'CO') {
myID = "cast";
}
$('#' + myID.imBannerRotation({
//your script here...

Categories