i am trying to pass a web address as a parameter between views in angular but it is not working.
i am using the uiRouter and have nested states.
here is the code:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.chat-detail', {
url: '/home/:url1/:url2',
views: {
'tab-home': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
i am passing links in the url as:
href="#/tab/home/www.somepage.com/nesteded?id=99/www.second.com/page/one/more"
i am sure the slashes / are causing the problem here.
Your problem is that www.second.com/page/one/more is missing a protocol. Without the protocol if you just pass that to href browser will interpret it as a relative url.
You either need to correct the source or parse the source to check if it has a protocol before using it in your view
Without more code provided there isn't much more help can be provided
Use percent encoding: https://en.wikipedia.org/wiki/Percent-encoding. For a slash, you need to put %2F instead. Use a URL encoder/decoder to do it: http://www.url-encode-decode.com/
Input is http://www.somepage.com/nesteded?id=99, so your URL encoded URL would be http%3A%2F%2Fwww.somepage.com%2Fnesteded%3Fid%3D99, and your link <a href="#/tab/home/http%3A%2F%2Fwww.somepage.com%2Fnesteded%3Fid%3D99/http%3A%2F%2Fwww.second.com%2Fpage%2Fone%2Fmore">
You can write a filter link in this stack overflow question to make it easier: How to generate url encoded anchor links with AngularJS?
Related
I am running into trouble understanding how you can correctly pass parameters using AngularJS.
This is the code I was trying to use in my app.js file for the nested views, however, the nest state never properly renders.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: '/news',
templateUrl: 'templates/news.html',
controller: 'NewsCtrl'
})
.state('news.id', {
url: '/news/:id',
templateUrl: 'templates/news.id.html',
controller: 'NewsCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/news');
})
It will try and change the url to #/news/news/:id versus just #/news/:id.
And if I try and change the path to just be the #/news/:id, then the pages do not render correctly.
What is the best approach to achieve these nested views with parameters?
According to ui-route wiki:
When using url routing together with nested states the default
behavior is for child states to append their url to the urls of each
of its parent states.
If you want to have absolute url matching, then you need to prefix
your url string with a special symbol '^'.
So in your case, you should try
.state('news.id', {
url: '^/news/:id',
templateUrl: 'templates/news.id.html',
controller: 'NewsCtrl'
});
I have an Angular app which has several dynamic fields, each of these fields are changed updated based on config which comes from a backend database.
In order to control what config is used I need to dynamically switch a single variable - I've decided that the URL is the best way to set/switch the variable as there need to be multiple permutations of the site based on the URL so:-
/:dynamicVariable/
I'm looking for some guidance as to whether this is the best way to do it and what the best way to do it would be? I'm struggling as I don't want to have to set each route for each section like this /:dynamicVariable/homepage /:dynamicVariable/about-us etc etc. Ideally the core module checks it and sets it but the routing ignores it so /:dynamicVariable/ becomes the root.
Hope that makes sense, thanks in advance for your help.
I ended up doing this by using ui.router and nesting states within an abstract parent state which held the client, like so :-
.state('rootClient', {
abstract: true,
url: '/:client',
templateUrl: 'app/layout/layout.html',
controller: 'Layout',
controllerAs: 'layout',
noClient: false,
resolve: {
client: function ($stateParams, ClientService) {
return ClientService.getClient($stateParams.client);
}
}
})
.state('rootClient.home', {
url: '/homepage',
views: {
'content': {
templateUrl: 'app/homepage/homepage.html',
controller: 'Homepage',
controllerAs: 'home'
}
}
});
This way all the routes are under the parent route, I also added a resolve to make sure the client exists before moving to the route. Hopefully this will help someone else down the line.
Cheers
I'm using Angular and UI router. I'm trying to get a link shown on the page that the user can copy and share. This thread has shown me that $state.href is the function I'm looking for, however it isn't generating the correct link.
An important detail here is that the root of my application is not the root of the domain. In this case, the domain is localhost, but the root of the angular app is in localhost/dev/app/.
Here's the command I'm using inside my controller.
$scope.url = $state.href('survey', { survey: "asd" }, {absolute: true});
In my app.js, the following route is declared:
.state('survey', {
url: "/:survey/survey?ao",
templateUrl: "views/survey/survey.html",
controller: "surveyController",
},
data: {
requireLogin: false,
requireAdmin: false
}})
This should return http://localhost/dev/app/#/asd/survey, instead it returns http://localhost/#/asd/survey.
(The remarkable thing is that ui-sref="survey({survey: "asd"}) does translate to the correct link.)
Is there a way I can fix this so I get the full url?
Adding a base tag to my app page solved this issue for me. It defines the base URL for the page with the router references. For legacy support reasons, I'm on version 0.2.15 of Angular UI Router. I don't know if this is still necessary for more current versions.
<base href="http://localhost/dev/app/" />
.state('survey', {
url: "/:survey/survey?ao",
templateUrl: "views/survey/survey.html",
controller: "surveyController",
data: {
requireLogin: false,
requireAdmin: false
}
})
You had an extra '},' in after controller, maybe that is messing things up? Also if you're passing parameters you might want to include that as a params line:
params: {
survey: null
}
Also if you want the url http://localhost/dev/app/#/asd/survey your url should be:
url: "dev/app/:survey/asd/survey"
I want to modify the templateUrl of a route definition, and make it dependant on the locale of the user.
E.g. '/views/en/faq.html' for English and '/views/fr/faq.html' for French users.
I have the locale stored in the cookie LOCALE, but how can I access that cookie value in the templateUrl function, as $cookies is not available yet while running the config function?
U can use angular translate service. This does this automatically.
Link https://github.com/angular-translate/angular-translate
In your case make two state, and put in tamplateurl '/views/fr/faq.html' for frach and for '/views/en/faq.html' for English
$stateProvider
.state('enFaq', {
url: "/Faq",
templateUrl: "/views/en/faq.html"
})
.state('frFaq', {
url: "/Faq",
templateUrl: "/views/fr/faq.html"
})
});
Acccording your condition you can hide one state
like
<a ui-sref="frFaq" ng-if="location=='fr'">Faq</a>
<a ui-sref="enFaq" ng-if="location='en'">Faq</a>
I am writing a CRUD app with AngularJS + UI Router.
I want to be able to parse the current location in the browser URL and determine if a ui-router state should be applicable for the current url.
In these sample routes, is there some way to do the if and unless clauses?
(url in browser address bar is http://example.com/notes/1/edit_me)
$stateProvider.state("root", {
url: "",
unless: $location.matches(/\edit_me/)
})
$stateProvider.state("edit", {
url: "/edit",
if: $location.matches(/\edit_me/)
//
})
UPDATE 1
The reason I want to do the above:
Say I am at http://example.com/notes. The routes is
$stateProvider.state("root", {
url: "",
})
However, with the same above ui.route state, when I am at url http://example.com/notes/edit, the root is now "/notes/edit" instead of "/notes"
UPDATE 2
#adam, more explanation of what I am trying to accomplish:
I will try to explain: in your code, for your home state, the (ui.router's) url is / (aka hash syntax #!/)
However, the URL in browser address bar looks like http://example.com/notes/ in one case and http://example.com/notes/edit in another case. (note that the URLs do not contain any #! portion since we have just navigated to the page)
Now the home's / is going to match in both cases of above URL.
But since the second URL ends in notes/edit, I want that the home for this URL should be #!/edit, and not #!/.
Basically I am trying to mix server-side rendered pages (/notes and /notes/edit are rendered by server, not AngularJS)
and client side routing so that no matter which URL we are at, the client can figure out which (ui.router) route applies to the current URL.
Make sense?
Sorry i don't really understand your needs but here's an example of use of ui-router:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/index.html',
controller: 'MainCtrl'
})
$stateProvider
.state('edit', {
url: '/edit',
templateUrl: 'app/edit/edit.html',
controller: 'EditCtrl'
})
$stateProvider
.state('edit.note', {
url: '/note',
templateUrl: 'app/edit/note.html',
controller: 'NoteCtrl'
});
$urlRouterProvider.otherwise('/');
i'm not sure if a copy paste will work, but try to adapt it with your case. Hope it will help.
Edit:
I'm afraid that i can't help you more than that. The design of your app with rendered page without angular sounds really special.
Have you tried the example i provide you? If yes, hav you simply format the url by addind
" #!/ " where you need it.
For example:
$stateProvider
.state('edit', {
url: '#!/edit', //or something like, url:'/#!/edit'
templateUrl: 'app/edit/edit.html',
controller: 'EditCtrl'
});
Check this link also may be it will help you:https://github.com/angular-ui/ui-router/issues/372
ui-sref may help you
But the place to see usefull example for ui-router it's his own doc.
https://github.com/angular-ui/ui-router
and here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router