From the UI-router Doc, it says that for each state, you can set up multiple view and provide a different template and controller for each. So for my example, say I have a state provided that looks like this
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent':{templateUrl:"home.html"},
'menulist' :{templateUrl: "list.html" }
}})
So for the views, how would I be able to split off from there and set up a separate nested state for each one. This way my menulist can have multiple views, and my menuContent can as well, but both independent of each other.
I have a codepen set up with a basic boilerplate that has the content and menu views created, I'm just stuck on this next part. Any ideas? Any help is appreciated.
Sorry, this may not be an answer but I am new in this forum with low reputation that I cannot comment yet.
Think about if you really need states to do this. Maybe you are better off with using directives to split your menuContent and menuList. Using states to divide sections of a page is a bit confusing and cluttered. If you use directives, you can still have your own controllers embedded in the html via ng-controller="".
Related
I have an ember engine, and within that I have defined a route. It works as expected. It's called my-route. It was defined like this:
this.route('my-route', {path: '/my-route/:myparams'}); in the routes.js file.
As you can see, it has a dynamic segment, and shows different values based on myparams.
I want to add a nested route to this route. Let's say .../my-route/1 shows a list of items. When the user clicks on any of the items listed on the page, the route should be: my-route/display but instead its my-route/1/display. I don't want the 1 here as it could be misleading.
Also, the link-to doesn't open anything either, the click does nothing.
This is how I changed my routes.jsfile:
this.route('my-route', {path: '/my-route/:myparams'}, function() {
this.route('display');
});
In display.hbs file I added dummy data, and display.js is also empty, just extending from Ember.route.
The my-route.hbs links like this:
{{#link-to 'my-route.display'}} Open me {{/link-to}}'
I am new to EmberJS, and would appreciate if someone could please tell me how to:
Remove the dynamic segment information
Make the link-to work
Thank you!
1) I can think of no easy way to remove dynamic segment from the url -- if you must, you can probably just not use dynamic segment and send the information to the transitioning route via other ways - you can probably set the controller directly
"newRoute.controller.set('someProperty', my_param);"
or use needs api (http://emberjs.com/guides/controllers/dependencies-between-controllers/)
but note that both these methods would be making use of controllers. If you need to load data in the route depending on the query params, what comes to mind is using a service
But these methods are not very sophisticated and I'd say only go for it if dynamic segment is an absolute no.
2) this one is easier -- you need to pass in the dynamic part along with the route name when using link to -- as given in ember guide
https://guides.emberjs.com/v2.0.0/templates/links/
Based on the discussions with #Lux and #Chhirag Kataria, I ended up making two separate routes. I used the my-route as a dummy route, and nested the display and the list routes in it.
I picked up a project that used Handlebars and Mustache in its views.
I want to transform and re-use most of it to AngularJS. However I'm having a problem with a simple thing: With Mustache if, for example, I have an index.html file like this:
<div class = "blah">
{{>sidebar}}
</div>
Having a sidebar.html with the elements I want to appear. It's basically using the same partial sidebar in all the other views aswell. However, I don't know what I can use as an alternative to this.
Any suggestions using AngularJS or generic HTML are very much appreciated.
Thank you.
Take a look at creating your own Angular Directive, name it something like 'sidebar', which you can then call in your html ex.
<div class = "blah">
<sidebar></sidebar>
</div>
Edit: I made a quick JSFiddle to show you the basic principle, you can use the link I provided for more intricate details. (ex. instead of defining the template in a string, you can use the templateURL property and provide an html file as a template.
I would also recommend you passing in the state of the sidebar you want to render, rather than it sharing your parent controller state, but that is just a personal preference ( makes it easier to re-use ).
I am trying to learn and understand the capabilities of UI-router with Angular 1.3.15.
I am trying to set up an application which has many views that have a header and footer directive. It also has a smaller number of views that do not need this setup, with the loaded view taking up the entire page.
Therefore, it seems I should handle this divergence "one level down", as in my diagram below. In the past, I have worked on ui-router apps with the index.html coded with the header/footer directives and a single ui-view for the other pages to load into. This time I am trying to get it correct form the start. Opinions and advice welcome.
I'm not sure what you want to know.
Yeah, you should handle the difference in templates the way you suggested: the root template should contain only the elements which appear on all states. Elements which appear on some states should go on those states templates, in the template of a parent state (if it makes sense), or in directives that you reuse in the various templates.
Instead of directives, you might want to use named views if your templates have some peatures in common, but the differences between them are not inside a single DOM element. For example, maybe all your pages have a small toolbar on top that always has some buttons, but other buttons depend on the state you are in. You can place that constant part of the toolbar in the root template, together with a <div ui-view="toolbar"></div>. The states would then define a view named toolbar with a template with the buttons they want to add.
You could make a directive for that toolbar with all the global buttons in its template and use <ng-transclude> to add the custom buttons at each state's template, but using named views seems cleaner.
Our SPA has 2 distinctive top level views. To compare it is like windows file explorer showing tree view on one side and content details on other side. For these top level views, we are considering to have 2 partial views. Other alternative is to pack these views as directives. Our initial thoughts are going toward partial views, because these are quite larger blocks of functionalties and each view can have multiple controllers. Any experience/thoughts on similar lines would help us decide. Just a note we communicate between these views using eventing mechanism.
We do not intend to reuses these views. Specifically, are there any issues going partial views? Like performance, maintainability, etc.
I'm not sure I'm understanding the problem here, so sorry if I say something wrong (also sorry for my english).
What you need are 2 views; if 'inside' those views you use a directive or not, it's another thing.
The only thing I'm pretty sure is that those 2 views need to have they're own scope.
To me it seems a lot like a 'navigation menu' vs. 'view' kind of problem (only that the navigation part is gonna be some sort of tree-view), so the solution should be similar:
the 'normal' ngView (your 'details' side);
a div with it's own controller (and it's own scope).
Something like:
<nav ng-controller="treeViewController()">
<!-- here we use a directive, for example -->
<tree-view ng-model="tree"></tree-view>
</nav>
<div ng-view></div>
Then the best way to make them communicate is probably a custom service.
In case I misunderstood your problem, sorry in advance.
Just trying to understand the exact difference in approaches of using ngView and ngInclude in AngularJS. When would is it correct to use one over the other? Thanks.
ngView works together with routing, and is mostly essential to an angular SPA. It's normally used to include the main content of your site, the bit in between the header and footer that changes every time a user clicks a link. Its integration with routing means changing the ngView content changes the controller too (depending on your configuration).
ngInclude is a general purpose include, you may not even need it. You'd sometimes use it inside a view to avoid repeating yourself, in the cases where several views need the same code included.