i am trying to load the template according to the parameters pass in the route.
eg.
.state('menue.courses-detail',{
url:'/courses/:id',
templateUrl:'templates/courses.html'
})
now in this case for url "#courses/1" its loading my courses template.
now how may i proceed when i need to proceed with its child url.
eg with
"courses/1/1" or "courses/1/2" ...
is called in url then i need to load lectures.html
This how i tried to
.state('menue.courses-detail.lectures-detail',{
url:'/courses/:id/:lid',
templateUrl:'templates/lectures-detail.html'
})
but its not working
My suggestion ,you could call init method inside that controller make an one more AJAX call and initialized child url .
Related
Good Morning. I have a question how to pass multiple params from one controller to another contorller without using location.path and also the id values won't show on url.when i using service setter and getter , id values were gone when refreshed the page.can you please some idea how to stop showing the param values on url and pass to next controller in Angular js 1.x
Consider a certain route let's say myapp\profile
which has two modes (buyer/seller)
What i would like to achieve is:
keep the same route url for both modes
Alternate the view with different HTML files (lets say buyer.html, seller.html), of course each view has it's view model.
Sharing some logic between the two modes.
I would like to have a controller/logic to each mode
What i already considered:
Thought about using ui-router's sub states, but I dont want to change the url.
Thought about creating this 'profile' route and while navigating to it, figure the mode (buyer/seller), and then $state.go to a new state (but again, i would like to keep same route name at the end so it's not ok)
Ideally thought i could navigate to my shared controller and then render the correct view and controller, but this idea kinda messed up me.
Could you share what is a clean way of doing this?
most use cases
Normally, in order to dynamically select a template for a state, you can use a function:
state = {
.....
templateUrl: function($stateParams){
if ($stateParams.isThis === true)
return 'this.html'
else
return 'that.html'
}
}
but...
Unfortunately you can't pass other injectables to the templateUrl function. UI.Router only passes $stateParams. You don't want to alter the URL in anyway so you can't use this.
when you need to inject more than $stateParams
But you can leverage templateProvider instead. With this feature, you can pass a service to your templateProvider function to determine if your user is a buyer or seller. You'll also want to use UI.Router's $templateFactory service to easily pull and cache your template.
state = {
....
templateProvider: function($templateFactory, profileService){
var url = profileService.isBuyer ? 'buyer.html' : 'seller.html';
return $templateFactory.fromUrl(url);
}
}
Here it is working in your plunkr - http://plnkr.co/edit/0gLBJlQrNPUNtkqWNrZm?p=preview
Docs:
https://github.com/angular-ui/ui-router/wiki#templates
http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$templateFactory
I am wondering why if i use jquery $.load function or some pluging such as fancybox to load content dynamically on the site, the layoug is not loaded but only the view as if it were an element.
My $.load() calls a controller action as if it was a normal link, like:
$('#demo').load("http://"+ document.domain +"/tables/users/edit/", {input : data}, function(dat){
//whatever
});
This is not something I personally dislike, like this I avoid creating elements and calling them using $this->render('/Elements/xxxx', false); from my controllers.
I want to know if this is the proper way to work with or if it is some kind of cheat or bug of cakephp.
How should we treat this type of content which is not a proper "view" (as won't have a layout, headers...etc), but an "element" loaded dynamically? As a view? As an element?
Thanks.
Check /Layouts/ajax.ctp this is the layout that is rendered for ajax calls. Usually you don't want to have all the header and footer around the element you request when doing an ajax call.
Burzum is on the right track.
Your controller will load the default layout unless you tell it to use /Layouts/ajax.ctp. So in your edit function you'd want to switch layouts depending on how the function is being called. For example:
if($this->request->is('ajax')){
$this->layout = 'ajax';
}// else use controller default...or specify another layout to use here.
I want to use routes, but I always want to use same template & controller. I have routes like this:
**a/:albumid**
and
**i/:imageid**
In the first case I want to load an array of images and add them to a list. In the second case I want to load a single image and add it to a list.
So the difference is only in data loading. What is the most efficient way to do this?
Also is it possible to animate ng-show? Something like jQuery's slideDown?
Check out this article, it describes a way to do exactly what you want:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
I've used the technique, it works well.
In a nutshell, something like this for routing:
$routeProvider
.when("/a/:album_id", {
action: "album.list"
}).when("/i/:imgid", {
action: "images.load"
})
Then in your controller you can access $route.current.action and do the appropriate thing. The trick is to create a function in you controller that does all the work (the article calls it render()) and then call that function when $routeChangeSuccess fires:
$scope.$on(
"$routeChangeSuccess",
function( $currentRoute, $previousRoute ){
// Update the rendering.
render();
}
);
I created a super simple directive to handle this that allows routes to be have more like Rails or Codeigniter routes where the controller method is in the route definition. The method name is set in the routeProvider.when options and the directive is set in the template for the route.
See: https://stackoverflow.com/a/22714634/250991
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.