I'm taking my first steps with angular, looks promising but i have some issues, hope someone can help.
i have a long html page divided to sections
each section is an anchor tag, you can navigate to it from top menu.
the content in each section changes according to some parameters the user selects.
so the 3rd section's content for instance can be different(template) each time.
my problem:
i would like to dynamically load views into the section.
as i understand it i have only one ng-view that corresponds to specific rout.
how can i load a view (template+controller) dynamically as the user slides to the anchor tag?
thanks
Related
In my angular apps "/" url load 40 items, and i use pagination for load more 40 items when scroll down to bottom. And when I go any items detail page like "/detail/XXXXXXXX", its working well.
My problem is, when i return to "/" from detail page, my previously loaded data gone.Since, I back to "/", angular load root template and load again first 40 items.
How can I prevent reloading previously loaded data?
First Solution
You can use ui-router to control multiple views in your app
Second Solution
Use absolute popup div with ng-include to load item details template and you can define custom route location for show detail box (I use)
These are the premises I'm trying to implement with ui-router:
The root page has a ui-view; on click it is populated with the main page (main.html).
The main page has two named ui-view's: view1 and view2.
The main page also has four links to populate (1) page11 or page12 in view1, (2) page21 or page22 in view2 (in any combination).
I use abstract states to be able to select which page goes to its respective named view.
I posted my attempt on plunker, any ideas if this is achievable?
UPDATE
I think this plunk explains more clearly what I'm trying to achieve. Click on page11 and then on page21; each will display their template and clear the other. I need both templates to be shown simultaneously.
This is how I solved this problem: I created a directive that compiles markup (using $compile) and used two directives in my html page, each with a different markup.
I've been handed a design spec which requires a news listing in a specific format - e.g. image floating to the left, with the main title and content on its right.
I've created the articles listing using the views module and embedded the view as a block on the front page. However, I need to change the layout of the resulting list of items at an html level, as the items are not provided in the order or within the html tags that I need in order to deliver the design.
In order to style the output, I really need the views module to give me fine-grained control over the html tags being wrapped around each field for each article.
Is this possible in Drupal?
(edit: please note, this is not a css question - I know how to float and position things in css. I need to be able to modify the html tags applied to fields in a view - thanks!)
When you go to your view, you will see FORMAT. You can change the Format to HTML list with corresponding settings. Under Show, you will say Fields. In the FIELDS area, choose which content you want enabled. Let me know if this helps, or if you want more of an explanation. Go back into your view and click on your field. The next window that pops up should be to configure that field. You'll see style settings where you can define the HTML tags, classes, wrappers, etc.
I have a content type called Realisation.
Realisation
Title
Body
Thumb Image
I create a Block View and a Page View
Page View
I display only Title, and the Body.
I setup the path url parameter as "/MyRealisation"
In the block view
I only show a list of Thumb Image.
I link my Thumb Image with the content.
When I click on my image, it's not using my custom Page View.
I Notice that the path is wrong. It show node/62 instead of /MyRealisation/node/62
Is there any reason ?.
Thanks a lot.
If you want have url each nodes like so site.com/MyRealisation/node/62
You need install module pathauto
Next you need go to admin/config/search/path/patterns and from this page write your templates for any node types
Need to create nested tabs.
In a page there will be multiple Person id tabs as outer tabs and on clicking each tab it will open inner tabs like Home,Office etc., and on clicking inner tab - Home, the tab content will display.
Outertab: Person 1 Person2
Innertab: Home Office
Refering the site - http://angular-ui.github.io/bootstrap/ , created outer tabs with content. created 2 separate tabset but not able to give link between the two tabset.
Can someone help me how to write directive for nested tabs? Any reference links?
I believe that AngularUI Router is what you are looking for. The majority of UI-Router's power is in its ability to nest states & views. Follow the link I've provided and take a look at the section Nested States & Views.
This Plunker example incorporates AngularUI Router to achieve a similar functionality you are looking for.
[EDIT]
This layout composed of nested views is exactly what for the AngularUI Router is used for:
So TabsTemplate will dynamically render the first level of tabs (any number).
TabTemplate could be a template without any dynamic content as Home and Office tabs are always there.
OfficeTemplate and HomeTemplate are again templates that are populated dynamically based on the selection of the current person.
You can refer to how angular bootstrap tabset directive is written.
Reading the tab code helped me understand how directive work. Now I can build many components from the ground up.
I build myself a simpler version of the tabset directive, it doesn't render the content, just the tab-heading element. So I can decide what inside the content via a tab selected callback. And for nested tabs, I just need to put in another tabset directive.