When loading the url at first, I need to display the initial template. But after clicking a link, I need to
Get it's href value (It's the current template url with some extra params)
Send the new url with params to the server
Get the new template (The server will send a new template with new data)
Change the view accordingly (Update the whole page)
I have managed to complete the first task. The 4th task is the real problem. Changing the route's template using the function which gets called when clicking the link (With ng-click). How can I do it?
All you need to do in order to replace current template with the new one is basically two lines of code. Namely:
update current $templateCache for the currently used template;
reload current route.
It could look something like this:
var content = '<h2>New content loaded previously</h2>';
var templateName = $route.current.templateUrl;
$templateCache.put(templateName, content);
$route.reload();
Check the simple demo: http://plnkr.co/edit/V5AG0UXS3b8wBwxrz7qO?p=preview
To get the URL of your current template :
$route.current.templateUrl
You can try to set template value directly (never test)
$route.current.templateUrl = "http://myrul.tld";
You can see the doc at https://docs.angularjs.org/api/ngRoute/service/$route
Related
I have a page for editing existing pages by populating input forms and creating a JSON file for the page template/partial.
Essentially, it consists of: <input ng-model="model.page_title" /> and $http.post('edit_json_file.php', JSON.stringify(model))
However, to edit a page I need to load its (existing) JSON first, so that I can populate those models for input forms. I'm doing that with another input:
<input ng-model="url_of_page_to_edit" />
This clearly requires the user to manually type the URL of existing page (to load corresponding JSON file) for its modification. I want to change that.
It would be better to have an Edit button on each page that I want to edit. After clicking the button it should redirect me to my page editor, which will load the required JSON and fill in the inputs as usual. For that I need to know which JSON to load (if the page is /page.html, JSON will be page.json). That's why I'm thinking of passing URL as a parameter to my page editor, for example as:
website.com/edit_pages?url=page_to_edit
or as
website.com/edit_pages/page_to_edit
Assuming I have these links, what is the best practice to retrieve those URLs?
I am using ui.router and so my config has something like this:
$stateProvider.
state("editPages", {
title: "Edit",
url: "/edit_pages",
templateUrl: "/partials/edit_pages.html",
controller: "editPagesCtrl"
})
I still want to edit pages by manually typing their URLs
If I need to use $stateParams with a link in form of /edit_pages/page_to_edit then how do I handle an empty case /edit_pages/?
If I need to pass URLs as parameters (like in PHP) in a form /edit_pages?url=page_to_edit/ then what do I need to change in my config for this to work?
Getting the Page Link
var url = $state.href($state.current.name, $state.params, {absolute: true})
This will give the absolute url of the current page. Then you can do a $location("edit_pages?url="+url).
Passing URL as Query String
For passing in query string format (PHP format) you cause something like this:
.state('editPages', {
url: "/edit_pages?url",
...
})
Then /edit_pages?url=page_to_edit will work as expected.
After clicking a button make use of $state.go();
put a mapping(if required) and depends on the input entered change the state.
$state.go('editPages')
I would like somebody's help on how to change the view within a transition.
My problem is that I need to load a view dynamically. So I create a new view (this seems to be working):
var viewname = 'view-'+Date.now();
var element = angular.element(document.querySelector('#view-container'));
var scope = element.scope();
var elementString = '<div id="'+viewname+'" ui-view="'+viewname+'" class="viewunique"></div>';
$compile(element.append(elementString))(scope);
This will add the view to the $view variable and seems to be working.
My question is: How can I use this new view in a statechange. I tried using the $transition$.$to() like:
$transitions.onStart( {}, function($transition$) {
$transition$.$to().views = {
templateUrl : templateUrl
};
});
where viewname is the name of the created view, and templateUrl is the correct template. The template will have it's own controller and stuff. This will overwrite the view for this state, but doesn't really work or do anything.
Somehow I would like to change the views for the state within the transition to this state so that the dynamically created view will be used. Is this possible?
Does someone know how this can be done?
Okay, I did some research on what you exactly wanted. If I understand correctly you want to change views during a state change, with each view having it's own scope and controller.
This seems to me like you want multiple states running besides each other. Perhaps you could take a look at ui-router-extras:
https://github.com/christopherthielen/ui-router-extras
This package will allow you to use parallel states and nested states, which I believe is what you want/need.
Take a loot at https://christopherthielen.github.io/ui-router-extras/#/home for more info and working examples.
My application when starts can automatically navigate to a specified state like this:
localhost://start.html#/case
When a user navigates to this state some parameters are prepared internally to get specific data for templates shown in case state. I need to be able to have an URL with querystring added to the URL in order for the user to copy and paste it into his email or somewhere else. Something like this:
localhost://start.html?project=1234#/case
I have spent a considerable time trying to make it work. I tried
$location.search('project', '1234');
But could not get an URL that would actually work.
Please help me with this task.
Thanks
Hi you can add the parameters at the end of the url
localhost://start.html#/case?project=1234
then you can get the parameters in angular using $location
var projectId = $location.search().project;
// or
var projectId = $location.search('project');
// clear url
$location.search('project', null);
I am using $location.search(params) to store an array in my url. This array has determines how the page will load. It works well only problem is that I have a set of tabs on my page, when ever I click the the tab a new template is loaded with a new controller and the url variables disappear.
I dont understand this behavior $location.search() is not being called again in the new controller. How can I get the Url to stay static?
In the $routeProvider set reloadOnSearch: false so you don't reload when $location.search() changes.
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Change the path using
$location.path('/differentRoute').search(params);
Doing so would change the route and set the search parameters again.
I have an angular app with a number of links. Clicking each link displays a particular set of data. I would like each link to set a hash in the URL, like http://foo.com/bar#item1, and I'd also like to show the page with the particular set of data displaying when that URL with the hash is accessed directly.
I was hoping to do it by reading / manipulating the $location.hash(), but as soon as I inject $location into my controller, the #item1 in the URL changes to #/item1. Is there a way to prevent Angular from doing this, and what's the best way of setting up what I described?
You could pass parameters in the routes /bar/item1, catch it with $routeParams and if exist make $location.hash().
"controller"
var anchor = $routeParams.anchorBottom;
if(anchor){
$location.hash(anchor);
$anchorScroll();
}
"link to section"
$location.path('/heart/bottom');
"route"
.when('/heart/:anchorBottom',{
You could see this running here.