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')
Related
Lets say, there is application, that can be run for different units, with different names. Before, when user select another unit, we just reinstating controller, and load new data for new unit, this changes was not reflected on url. But, now we need to add unit name to the url.
For example we have following state:
$stateProvider.state('management', {
url: '/management',
templateUrl: 'features/management/templates/management.html'
});
And in browser we can see:
http://localhost:84/#/management
Now, when we go to that state, I need browser to show something like this:
http://localhost:84/#/unitName/management
For example we have unit1, unit2, unit3, and when user switch between them, url will be changed to
http://localhost:84/#/unit1/management,
http://localhost:84/#/unit2/management,
http://localhost:84/#/unit3/management
and so on.
I can get unitName from service, for example unitService.js that will return me a unit name as a string. But I have no idea how to add this string to url in browser. This unit name should be added to all routes, but without changing them.
Can I make first function, that will add unit name to browser url after all data was loaded, and second function, that will remove that string when angular starts to searching for state by url, so instead of unit1/management it will look for /management state?
Is it possible? Thank you in advance.
You can use notify: false.
Route declaration
$stateProvider.state('management', {
url: '/:unit/management',
templateUrl: 'features/management/templates/management.html'
});
State go example
$state.go('management', {unit: 'unit1'}, {notify: false})
I am trying to use routeProvider to create a search page. Below I have something like so:
}).when("/search/:value", {
templateUrl: "app/views/search/search.html"
What I want to show in the url is not
/search/searchValue
but more like
/search/value=searchValue
I am setting the location as so:
$location.path('/search/').search({ value: $scope.filterValue }); where $scope.filterValue is the searchValue.
When I use this, I'm not able to view my page due to the :value. How can i change the url to the one I want as in you have the routeParam show in the url link?
Thanks,
All I had to do was use /search/?. The value after the "?" was the parameter.
I am writing something like a registration process containing several steps, and I want to make it a single-page like system so after some studying Backbone.js is my choice.
Every time the user completes the current step they will click on a NEXT button I create and I use the router.navigate method to update the url, as well as loading the content of the next page and doing some fancy transition with javascript.
Result is, URL is updated which the page is not refreshed, giving a smooth user experience. However, when the user clicks on the back button of the browser, the URL gets updated to that of a previous step, but the content stays the same. My question is through what way I can capture such an event and currently load the content of the previous step and present that to the user? Or even better, can I rely on browser cache to load that previously loaded page?
EDIT: in particular, I'm trying something like mentioned in this article.
You should not use route.navigate but let the router decide which form to display based on the current route.
exemple :
a link in your current form of the registration process :
<a href="#form/2" ...
in the router definition :
routes:{
"form/:formNumber" : "gotoForm"
},
gotoForm:function(formNumber){
// the code to display the correct form for the current url based on formNumber
}
and then use Backbone.history.start() to bootstrap routing
I'm currently working on a single-page scrollable website (5 pages displaying as a single page) using CakePHP. I have worked on each controller action and everything runs well. I have one layout for the entire app and a view for each action. My challenge is finding a way to load the view of each action without reloading the page inside the layout. Should I just put all the view content inside the layout (without echoing $content_for_layout) or could there be a better way to do it?
Considering the div you want to update has the id #content:
$.ajax({
url:"http://yourdomain.com/controller/action",
context:document.body,
dataType:"html",
data:{id:123}, // in case you need to pass some params
success:function(data){
$("#content").html(data);
}
})
The action must return the HTML you want to display inside that div. If you want to have each pags loaded in different div's, you will have to create one div for each page and call AJAX for each one.
When the page is loaded for the first time, you can just pull the data for whatever default action you defined. Then, when you want to change the content, just call AJAX.
I have an action called search on a controller called categories. /categories/search
I also have this route in place:
Router::connect(
'/search',
array('controller'=>'categories','action'=>'search')
);
So the URL is /search instead of /categories/search
I have a form set to get for that url:
$form->create(
NULL,
array(
'type'=>'get',
'url'=>array('controller'=>'categories','action'=>'search')
)
);
This form contains 1 input field named q and when you submit it the URL you are taken to looks just like this:
/search?q=your+search+terms
The problem is this would play much nicer with other parts of the application if it were a passedArg instead of a get var. So the URL would look like this:
/search/q:your%20search%20terms
Is there anyway to set the form to post like this?
first, the router:
Router::connect('/search', array('controller'=>'categories','action'=>'search'));
Router::connect('/search/*', array('controller'=>'categories','action'=>'search'));
You can use redirect to have the pretty url:
function search(){
if(!empty($this->params['url']['q'])){
$this->redirect(array('q'=>$this->params['url']['q']));
}else if(!empty($this->params['named']){
// search here
}
}
This will never work without a JS hack because named parameters are part of the URL.
The form's target url is static, and won't be modified by the contents of an input field.
You can do this with a JS hack though, but isn't very nice.