I want to create a tab control, which supports both static and dynamic tabs.
The dynamic tabs are of N different types, and display their contents according to some id.
I would like to do all that using routing (ui-router probably), since I would like deep linking and all the other benefits that come with it.
I've been trying to find an example on the web, but couldn't find any (I did find some questions resembling this one on other sites though, alas, they were not answered).
The closest thing I found was ui-router-extras which offer functionality that seem to be a good starting place, however, I'm still not sure if what I would like to achieve would be possible using it.
Any ideas if this is possible, any guidelines or suggestions on how to get started ?
I think the best way to create this if you have a lot of tabs would be using a controller for the tabs which has the scope for all sections you want to have, and then a view which ng-repeats through all the tabs, populating your view.
I recommend for the style that you try bootstrap's nav-tabs if they fit your design (http://getbootstrap.com/components/#nav-tabs)
If you have few sections, you could just hardcode the tabs into the view, each with it's ui-sref.
Related
I have an app using AngularJS and Bootstrap.
The way I have arranged my different views is using ng-show. That is, views change according to button presses, etc. and enabling/disabling ng-show values.
I have a single HTML file with a lot of DIVs. All these DIVs show/dissapear.
My questions are:
Is this the usual way of doing a single page web app? I.e. have all the views in different DIV's and show/hide them as needed?
Is there a more efficient way to arrange all different views in to a more structured way than having all of them in a single HTML file?
Thank you.
If your application is quite big and you have more than two or three views, you have to use a router like ngRouter, UI Router is more powerful but more complex. This is the best solution.
If your application is rather small (two or three views), and doesn't evolve, you can use ng-switch.
Ng-if may be an option but it is less convenient.
But you should avoid ng-show, because DOM elements are always in the page and just hide.
You should really use a routing service, such as ngRouter or ui.router, because if the app becomes more complex it will become increasingly hard to maintain.
Here's one article I googled on routing and using templates in Angular.
It is very easy to show multiple pages on the single page applications on according to their menu's using Routing in angularjs.
AngularJS Single Page Template and ng.Net Template, Both are based on mvc pattern, and easy to understand. So in below have some references. Check it.
https://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83
https://github.com/BBird40/ng.NET
https://visualstudiogallery.msdn.microsoft.com/48d928e3-9b5c-4faf-b46f-d6baa7d9886c
Im using Bootstrap and AngularJS with .Net Web API for my backend services. Im still a bit new to AngularJS. When considering the different sections of the layout, my app directive is currently at the container level named "Bottom". However, my individual views will be in the area named "main-content" (these are div boundaries).
The layout also contains an area named "sidebar" which will only be used on one page, the rest of my pages will expand "content-wrapper" from 10 to the full 12 column width of the page.
So Im trying to decide on how to use either use one layout (in terms of our MVC _layout.cshtml typically used for the template) for both types of pages, or use two separate layouts. The latter seems "cleaner", since trying to use a single layout for all scenarios seems more trouble. I think Ive used separate master pages with ASP.Net web forms in the past in these cases. Same idea here? I think this would make things cleaner also with regards to setting up the AngularJS code, as I can separate the two page types with different modules with their own controllers. Does this seem like a good approach, considering not just the mvc layout, but any impact on Angular/Javascript code?
TL;DR: Use one layout CSHTML page.
It's hard to give a confident recommendation without having a deeper knowledge of your application. Ultimately, it's your decision to make based on the information you have.
That being said, if indeed that sidebar is only used on one page, it should be considered part of that page. With that in mind, Container in the image you attached would serve as the host element for the router's view directive and the page with the sidebar will have that sidebar in its template.
If, however, the sidebar may appear on other pages in the future, I would simply hide it based on the current page with the view directive on the content-wrapper in your example. I have a similar situation in an app I'm working in which the sidebar behaves as a sort of internal navigation. If the current page does not have any sensible links to put in that sidebar, we hide it. Something like that may work for you in this case.
In either case, I would recommend against using multiple CSHTML layout pages because of the potential strangeness in the user's experience with some pages using a nice, AJAX-driven navigation and others using an old-school, "white-flash" kind of navigation.
Take a look at ui-router, which is an alternative to the default routing that Angular comes with. It allows you to have multiple views, the content of which can change based on the route. If you are used to using a templating system to layout applications pages and your pages have a generalized sort of layout (ie all pages have a top nav, a main body, and a footer, or something similar) then ui-router goes a long way towards making this much easier in Angular.
I'm very new to AngularJS and so far I'm loving it.
I read that wrapping external libraries into directories is the kosher thing to do, and I understand why that makes sense.
In my efforts to create a 'slickgrid' directive, I found very little info on the web. This question over here provides an example of slickgrid as a directive: Slick Grid wrapped in directive (angular), some options not work (resize and drag&drop columns)
But is that the correct way of doing it? The way that person did it, every <div slickgrid> will initialize with the same settings and data.
In my app, I'll need many instances of slickgrid, and columns will differ from instance to instance, as well as the data, of course.
So how should I link a particular <div slickgrid> to the data that is supposed to display then?
thank you very much for your time
as SlickGrid has way too much options - there's no really big sense in writing a directive, that fully incapsulates it. You should better initiate different grids in different controllers. And maybe move column and formatter definitions to a separate service
So the code will be something like that:
angular.module('app').controller('grid1controller', function(){
...
$scope.grid = new Slick.Grid("#grid1", $scope.data, grid1columns, grid1options);
...
})
I've being working with a lot of WPF, and I used a lot of listviews to convey information. I wanted to create something like a detailed listview.
An example of what I'm looking for is the "listview" type interface on Facebook's newsfeed, or even Stack Overflow's question browsing list.
The data will come from an XML document. So far my solution was to use divs within divs, but unfortunately it ended up being very messy. I also tried making them with tables and then hiding the table borders (which worked to an extent) but I'm sure there must be a better way! I also heard using tables is not a very good way to do it.
I'm not even sure if the word "Listview" is the right term to describe what I'm trying to talk about. If there's a different term can you please also answer that so that I can search for that on Google too (because I've only been searching for Listview's in HTML/Javascript).
Thanks.
You can try listview plugins with ExtJs or Jquery.
Here's the listView example / doc from Jquery mobile
http://jquerymobile.com/test/docs/lists/docs-lists.html
Listview would be the term to identify the structure. The best possible way to implement it would be to use an un-ordered list ex: and style it with CSS. Its simple and not too messy.
I have 3 sets of tabular data I want to display with a JavaScript framework in ASP.NET MVC. I know I can embed a separate grid in a tab, but this seems inefficient especially when large datasets are involved since I imagine 3 separate grids would be created. I haven't found a JavaScript datagrid which emulates what a spreadsheet does with multiple tabs. This example from YUI might come close though:
http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html
I'm a little familiar with jQuery, but would be willing to switch to any framework which makes this easy. I don't really need to edit the data. Any suggestions?
EDIT: I didn't mean this to be about jQuery. Maybe some details about my scenario would help, as suggested in one of the comments. I want to display tabular data from an ordering system containing thousands of records. I'd like 3 tabs:
All orders entered in the system which haven't been paid for yet.
All orders from a specific vendor.
All orders which have been paid for.
Since each category has thousands of rows, I only want to load data if the user starts paging.
I thought having 3 tabs with 3 separate grids (one within each tab) wouldn't be performant. I haven't actually tried though, so I'm probably guilty of prematurely optimizing. I'm looking for a grid with tab support built-in. I don't think there's one for jQuery. Perhaps ExtJS?
Since you tagged this with Ext JS, I'll mention that it's quite simple to render grids into tabs using Ext JS. It also supports deferred load/render, so that only the first tab/grid would load initially, then the others would be loaded on first access. Without knowing your specific requirements it's hard to comment further.
EDIT (based on edited question): Ext grids don't directly support tabbing, but they can be embedded within a TabPanel as I mentioned for the same effect. However, based on your description, it sounds more like a filtering scenario to me. I don't see the point in having the overhead of multiple grids when only one will ever be visible, and each one's purpose is to show a specific view (i.e. filter) of the same data. I would just have a single grid with a toolbar or some other method of providing your toggle between filters, and use Ext's built-in store filtering/querying to create your views on demand. The Ext grid supports paging out of the box (client or server, in your case it would be server for thousands of records). There is also a very popular plugin called LiveGrid that provides for virtual scroll-paging of large data sets.
I'm not necessarily advocating Ext over any other framework -- I just happen to be most familiar with it and I think it could solve your problem quite nicely. I would suggest trying it out for yourself to be sure.
jQuery Grid is kinda what people use a lot. I use it and it's pretty good.
jqGrid Link
I wouldn't draw a grid with three tabs. I'd use a single grid with a tab control and then load data via jQuery as required.
Or maybe have three PartialViews that you can load dynamically when you hit a tab.
You could also use dhtmlx grid.
You could use JS tab object to create tabs.
And use javascript grid framework to create grids and populate data into grids.