We Keep Coding

can not find params from route in angular

i have this senario :
when use register in site i send a email to that email . in that have a link and must click on that link for verify registertion .
that route have this information :
http://localhost:4200/auth/verify-checking?email={0}&code={1}
and i create this route :
{ path: 'verify-checking', component: CheckingVerifedComponent },
but i have tow problem :
A : can not find the params :
i use this code but not worked :
this.route.params.subscribe(params => {
this.sendModel.email = params['email'];
this.sendModel.code = params['code'];
});
B : it show me this error :
Error: Cannot match any routes. URL Segment: 'auth/verify-checking%3Femail%3Dkianoushvv123456#gmail.com&code%3DCfDJ8PQkunuAtiZOulV9qQ%252F3astuT%252Fa2VVXDAhxbE%252Fpg%252FfmcpXTcFXPR3gunRzs443wcxrxxWefG3PHVqmdbJL5GZX8dwgI0UuZTVDW%25206U2hSNBTQ1X7xT3YHh%2520%2520ym3%252FP3rlinriN4vgxJEMbmqPKQYe7XsnjcjYCtNvHY141nk%252FEYkoj6FZkEPuVdZO5qH%2520jNyRXA%253D%253D'
how can i solve this problems ?????

http://localhost:4200/auth/verify-checking?email={0}&code={1}
queryParam is used for ?email={0}&code={1}
this.route.queryParams.subscribe(params => {
this.sendModel.email = params['email'];
this.sendModel.code = params['code'];
});

You may consider this:
Route
{ path: 'verify-checking/:email/:code', component: CheckingVerifedComponent }
Extracting the Parameters
this.sendModel.email = this.route.snapshot.paramMap.get('email');
this.sendModel.code = this.route.snapshot.paramMap.get('code');

how to implement component.js in js-views in sapui5 for routing

I want to use component.js in js view but it is taking rootview for searching xml file. Please help how should I write this file so that I can do routing in js views.
jQuery.sap.declare("com.resident.Component");
sap.ui.core.UIComponent.extend("com.resident.Component", {
metadata : {
rootView : "com.resident.residentbhartiya.App",
routing : {
config : {
targetsClass : "sap.m.routing.Targets",
viewPath : "com.resident.residentbhartiya",
controlId : "rootControl",
controlAggregation : "pages",
viewType : "JS"
},
targets : {
page1 : {
viewName : "loginpage",
viewLevel : 0
},
page2 : {
viewName : "homepage",
viewLevel : 1
}
}
}
},
init : function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
this.getTargets().display("page1");
},
});

You can give rootView a configuration object instead of a string as described in the documentation:
Specifies the root view that shall be opened; can be the view name as
a string for XML views, or the view configuration object with viewName
for the view name as a string and type for the type (enumeration of
sap.ui.core.mvc.ViewType) and other properties of
sap.ui.core.mvc.view.
So it should look like this:
metadata:{
rootView: {
viewName: "com.resident.residentbhartiya.App",
type:"JS"
}
...
But im not shure if it shouldn't be viewType:"JS" this time too. You should try that too, if type doesn't work.

UI-Router : State redirecting to first child on page refresh

I am working on an AngularJS app using UI router with multiple named views. My app has one ui-view in index.html and states are configured as :
$stateProvider
.state('login', {
url : '/',
templateUrl : "partials/login.html",
controller : "login-controller"
})
.state("portal", {
url :"",
abstract : true,
templateUrl : "partials/header.html",
})
.state("portal.create-claim", {
url : "/dashboard",
views : {
'create-claim' : {
templateUrl : "partials/create-claim.html",
controller : "create-claim-controller"
}
}
})
.state("portal.history", {
url : "/history",
views : {
'history' : {
templateUrl : "partials/history.html",
controller : "history-controller"
}
}
})
/* Other child states */
I am using angular material tabs in the header for navigation. Data specific to each tab is plugged in the named view provided in header.html, hence I have made "portal" state as abstract and "create-claim" and "history" state as its child states.
Now when I am on tab history, url is : http://localhost:8082/history and refresh the browser, app goes from portal.history to portal.create-claim state. I understand that Angular apps are SPA and page refreshing bootstraps entire app but before refresh, if the url was pointing to history state, then after refresh it should go to history state. I tried to debug using $stateChangeStart event. I found that app indeed goes to "portal.history" state but then immediately redirects to 'first child state' of abstract state i.e. "portal.create-claim". I confirmed this issue by making "portal.history" as first child and "portal.create-claim" as second child, then it goes to "portal.history" as the final redirected state.
I can't figure out the issue. I am trying to handle page refresh for my app. Can anyone help me out?

This process is kind of tricky but It is working. I just check with my own code.
Problem
The thing is whenever you refresh the page if the view(html file) contains md-tabs directive it will redirect to the 1st tab(0th index). Now these tabs have index starting from 0 to length-1. So if you want a default tab to 3 you can use md-selected attribute of md-tabs directive but you are asking for setting this in a dynamic way based upon the URL.
So for that first we define a $scope variable in our main controller and assign that to md-selected. The main controller means the controller associated with portal state.If it does not exist then you need to define it.
Now If you are using ui-view for each tab and different URL that appropriate controller will be called each time.
Problem
So if you are not at your default index page and you refresh the page you will be redirected to default index but ui-route's resolve of that URL will be executed.
So you need to pass appropriate index to that main controller and for that we can use service since it is availabe appication-wide.
Example
first we define a service
var Session = function () {
this.setIndex = function(index) {
this.index = index;
};
this.getIndex = function() {
return this.index ? this.index : 0 ;
};
};
Session.$inject = [];
angular.module('tempApp').service('Session', Session);
routes file
.state("portal", {
url :"/",
templateUrl : "partials/header.html",
controller: "TempController"
resolve: {
temp: function (Session) {
Session.setIndex("0");
}
}
})
.state("portal.create-claim", {
url : "dashboard",
views : {
'create-claim' : {
templateUrl : "partials/create-claim.html",
controller : "create-claim-controller",
resolve: {
temp: function (Session) {
Session.setIndex("1");
}
}
}
}
})
.state("portal.history", {
url : "history",
views : {
'history' : {
templateUrl : "partials/history.html",
controller : "history-controller",
resolve: {
temp: function (Session) {
Session.setIndex("2");
}
}
}
}
view file:
<md-tabs md-selected="tabIndex">
....
</md-tabs>
TempController for that
var TempController = function (Session) {
this.tabIndex = Session.getIndex();
};
TempController.$inject = ['Session'];
angular.module('tempApp').controller('TempController', TempController);

Backbone Subrouter to specific view

Is it possible to add a subrouter to a specific view? Lets say I have a Backbone app for multiple Cars. Right now, my Router would look like this
carRouter = Backbone.Router.extend({
routes: {
'': 'index'
'contact' : 'contact'
':car': 'car',
':car/gallery' : 'cargallery',
':car/specs' : 'specs',
':car/infos' : 'infos',
'about: 'aboutPage'
}
car: function(){
// do this
},
cargallery: function(){
// do this
},
specs: function(){
// do this
},
infos: function(){
// do this
}
...etc
});
that approach, obviously makes the whole page render, which I basically want to avoid. When I click on "gallery" and "specs" back and forth for example, the whole page re-renders on each click.
So, is it possible to do something like:
routes: {
'contact' : 'contact'
':car': 'car',
'about: 'aboutPage'
},
car: function(){
// new router containing
// ':car/gallery' : 'cargallery',
// ':car/specs' : 'specs',
// ':car/infos' : 'infos',
},
}
And then, on the Car page, I would have 3 tabs in the menu (gallery, specs, info), which will load the Model/collection of the specific car, without the page re-rendering?
Any help/suggestion is appreciated!

You can accomplish this with events,Backbone trigger and and custom EventHandler Object.
The events hash in your CarView :
events : {
"click .spec" : "showSpecs",
"click .gallery" : "showGallery",
"click .info" : "showInfo",
},
//Invoked when you click the show specs tab.
showSpecs : function(event) {
//Say that EventBus is your custom event handler
event.preventDefault();
MyApp.EventBus.trigger("show:spec",payload);
},
showGallery : function(event) {
event.preventDefault();
MyApp.EventBus.trigger("show:gallery",payload);
}
....
And in MyApp.EventBus :
_.extend(MyApp.EventBus,Backbone.Events);
MyApp.EventBus.showGallery = function(payload) {
// payload is an optional data that you can get from the triggered view
// Fetch your models or collection
// Instantiate the corresponding view and pass your data(models/collections) to it.
// Update the url to reflect the new view so that if you hit refresh you
// come to the same tab.
MyApp.router.navigate("/your-url",{trigger:false});
}
MyApp.EventBus.on("show:gallery",showGallery);
Also add a method in the router which can handle the refresh of tabs.

How to direct multiple routes to the same method in Backbone JS?

This is my routes object in a BackboneJS app:
routes: {
"" : "_navigate",
"home" : "_navigate",
"blog" : "_navigate",
"photos" : "_navigate",
"notes" : "_navigate",
"about" : "_navigate",
"singlepost_:id" : "_navigate"
},
it redirects routes to the _navigate method, which looks like this:
_navigate: function(postId) {
if (postId) {
// show single entry
return;
}
// show regular entry
},
It works perfectly fine. However, I find the repetitive routes object to be annoying.
My question is: Is there a better way to direct all these routes to the same method without repeating yourself so much?
Thanks!

http://backbonetutorials.com/what-is-a-router/ Check out the section on splats
Any "*splats" or ":params" in route definitions are passed as
arguments (in respective order) to the associated function. A route
defined as "/:route/:action" will pass 2 variables (“route” and
“action”) to the callback function. (If this is confusing please post
a comment and I will try articulate it better) Here are some examples
of using ":params" and "*splats"
routes: {
"/posts/:id": "getPost",
// Example
"/download/*path": "downloadFile",
// Download
"/:route/:action": "loadView",
// Load Route/Action View
},
getPost: function( id ){
alert(id); // 121
},
downloadFile: function( path ){
alert(path); // user/images/hey.gif
},
loadView: function( route, action ){
alert(route + "_" + action); // dashboard_graph
}

Quite simple, really.
routes: {
"*actions:_id": "_navigate"
}
Thanks to Jason Strimpel from the BackboneJS Google Group.