![Desired sample page][1]
http://i.stack.imgur.com/FpLxg.png
I'm writing my first angular application and I have a best practices question.
This is a desktop application where the user
1. A user filters for requested data
2. The system populates the data grid
3. When a row is selected the tabs are populated based on selected row.
That's the best approach to splitting this into multiple view, directives, controllers etc?
Thank you
A few links you may find helpful:
https://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html
https://github.com/angular/angular.js/wiki/Best-Practices
Related
I am using Angular with Node to create a Web-APP. The back-end will be building a standard JSON RESTful API, and that is going normally. As for the front end, I am running into a little bit of problems. So my website is designed in a way where there are essentially TWO main displays. Eg. Two windows inside the website that can change frequently. I have NO IDEA how I should implement this! So far I have split my website into directives, eg each "display window" is its own directive, and I was thinking maybe use $localStorage and just have a bunch of ng-ifs inside each HTML file for each directive, switching the view depending on some value in $localStorage. Eg. Person clicks a button, some value in local storage changes to 10, an ng-if inside the directive displays the correct "view" inside the display because the value 10 represents some view. The problem is that I will have to put ALL my HTML in one file, and Im not even sure if this will work! Any suggestions? Any help appreciated!
PS. The two "main displays" can change without the other one changing, hence why I didnt want to group them into 1 view. They are separate entities, and programatically it makes more sense to split them up! They are also physically seperated on the screen (bottom right and top right, seperated by a bar)
For displaying two separates views in the same page, you have to use AngularUI Router because the native ngView directive only supports one.
I want to implement grid hierarchy (parent row has many child rows). Please refer to the link for reference - http://demos.telerik.com/kendo-ui/grid/hierarchy. How can it be implemented using Angularjs, ngGrid in asp.net web api project?
If you use ui-grid (the 3.0 version of ngGrid), then this is the expandable feature: http://ui-grid.info/docs/#/tutorial/306_expandable_grid
Expandable still has some gremlins in it, so you'll get some compromises and work arounds (or alternatively maybe need to submit some fixes), but it is the same concept.
You could use Angular Grid. The interface is similar to ng-grid. There is a 'test drive' section to see it demonstrated, where you can group by a column, giving a parent / child rows layout.
I have a page with 3 containers, the top will be used for search form, two the left side will have the adf form and the right a table view. One thing to note is that all the 3 sections will be using the same View Object or inturn the same table. When the page is loaded I want my form to come in the createInsert view. I tried using the invoke criteria for the creatInsertaction but this is messing up my search, since the form is empty and if i do a search in the search form the validators in the ADF form will fire and every thing goes for a toes.
Please suggest any solutions for this.
Use different view instances. Probably 1 for the search and 1 for both the form and the table.
Some basic info about view instances: http://andrejusb.blogspot.be/2011/06/understanding-adf-bc-view-object.html
You can use the same viewObject but add some viewCriteria for the search part, and use a CreateInsert in your taskflow before show the view.
use mange-Bean and do create insert pragmatically inside the constructor .
I've been learning backbone.js over the past couple of weeks and am about to start using it in anger in an app I'm writing. My question to you is about a use case for models and collections in a Bootstrap 3 navbar.
On my server side I authenticate the user and, based on their profile, assign them a role (author, editor, administrator etc.). I then construct an object that contains the appropriate menu structure for the user's role and pass that to the client using Handlebars. The intent is for the browser to construct the HTML to render the menus according to the properties (key/values) in the object using backbone.
My thoughts are that the navbar itself is a collection of models (navbar); each dropdown menu or link on the navbar is a single model (navbarItem); each of these contains a collection of menu items (navbarItemMembers), these collections being of models of each individual menu item (navbarItemMember). I can then set event listeners against each navbarItemMember to trigger an appropriate route or render action as appropriate.
So, getting to the point... am I over-complicating things? A collection containing models each containing a collection of other models, each of those mapping to a view that renders a on the main page. Seems convoluted to me, but from my (albeit limited) understanding of backbone.js it does seem the right way to do this...?
Advice much appreciated from those more experienced (battle scarred?!) than I. Thank you.
Use a collection when it's going to provide some benefit to you over a plain model. The benefits could be either
Interacting with a RESTful service where you'll want to not just get a list of data but then separately fetch/modify/add/delete individual items is that list
Defining separate Views for each item in the list rather than a having a single View that iterates over the list.
I don't think a basic navbar benefits from either of those. If your navbar has some super fancy elements beyond just links then maybe #2 applies but otherwise keep it simple, use a single model with a single view/template
I have a page generated by Views which lists 5 Articles at a time. This view is paginated so that page 2 of this View will list the second batch of 5 Articles, page 3 will list the third batch of Articles, so on and so forth.
My question: is it somehow possible to extract fields from Articles listed on the page you're currently on, perhaps via the url? And I only want to them on the Articles being displayed by the page the viewer is currently on and not all the Articles.
My intent is to have a Views Block that would ...
determine what page of the paginated View above you're looking at
determine what Articles are listed on that specific page
aggregate and display the Taxonomy Terms of those listed Articles (Articles have a Taxonomy Term field) in the block
do all the above automatically as you change what page you're looking at
The way I'm going about this is to list all the the Taxonomy terms in a block which is relatively straightforward. What I can't figure out is how to filter it based on what Articles are being displayed to me in a paginated page.
I was thinking maybe this is possible to use it using the url of the paginated page which goes along this format: ?page=1, ?page=2, etc.
If anyone could just point me to the right direction, I would appreciate it. I'm also open to alternatives.
What if you created another display of the same view as your Article page view?
You could add a Relationship for the Taxonomy Terms and then the Fields in the block view would be the appropriate fields from the taxonomy terms. You'll want to setup the same Filters, Sort and Pager options for the two displays are the same. That way the results should match.
Then you might just want to hide the pager from the block view. You could do that through a custom template for that view display, or maybe a preprocess function that hides the pager for just your view, or maybe via CSS.