I have an AngualarJS app that has an index page and some partial pages, displayed in ui-view. The app is using ui-routing. I have a button on the header (located on the index page) and on click of that button I want a small pop up open - a page displaying some data from the database, based on currently logged in user. I am trying to decide between opening a windows with window.open and sizing it to about 400x400 but that seems very un-elegant plus I see some issues with opening it. Another option I am entertaining is bootstrap ui modal but that would involve including bootstrap in my project on top of all the angular and routing includes.
Not sure if there is a better way to go, would appreciate any leads.
If you don't want to include bootstrap in your project You may use this one
--> http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/
Related
Because 2sxc Accordion App have in settings "Initially open/close" switch for each section, I wonder is it possible to tweak this in some way to get Accordion initially open for desktop page view and initially closed for mobile page view?
It would save space / scrolling time and look more appealing in mobile page view.
Or just take this as idea for some next version of this App.
This would be fairly easy to do. I suggest you do the following:
The toggle for open/close could be replaced with the boolean-tristate, so you have a true (open), false (closed) and null (automatic).
Then adjust the razor code a bit to make this happen.
If you got it to work, it would be awesome if you could contribute your code to the app in github: https://github.com/2sic/app-accordion
I wrote an ExtJS application like this:
the sub menu is dynamic added by clicking the button on the left.
The question is :
as the sub panel is created dynamically, so if I refresh the whole page, the panel will go away.
What I expected is it could still display the same content before refresh pages.
So, my question is how to handle this in ExtJS?
Do I need to record the current panel information into Ext.App?
ExtJS is a framework to build Web Applications that run inside the browser.
With Web Applications, just like normal applications, you don't close the program and start it anew (like a browser refresh does) just because someone wants to switch to a different toolbar or look at different data. You work with multiple panels, switch between them, and/or open windows.
You could for instance generate multiple panels inside a container with card layout, and bring to front the panel that you want to show right now.
If you have a license that allows you to use Sencha Architect, there is a nice "navigation" sample available in Architect from where you can start and look at how it's done.
We are building an application with complicated UI.
This is the sample view of a page in the application:
Left menu will contain the list of links for the corresponding pages in the right side.
We are using ng-router for building the application.
We took the whole page as one ng-view and include the left menu as single html template.
When clicking on the links, we will replace the right side tab content by ng-include.
Inside each right side content, we have sub tabs. When clicking on sub tab, we will replace the content of sub tab.
In Left menu template controller we have few ajax calls. When loading the content of the sub tab in right side, templates are not reloaded by the angular and is cached by the angular. But the ajax calls are reloaded again.
It should not reload the ajax calls inside the left menu when changing the content of sub tab in the right content.
Somebody might have faced this issue. Please suggest me to proceed further.
You definitely should check the ui-router project from the angular-ui team.
You will find their routing and the possibility to have nested views, named views and parameters super helpful with a complex design like yours.
https://github.com/angular-ui/ui-router
Alternatives to ui-router:
http://dotjem.github.io/angular-routing/
http://angular-route-segment.com/
Without diving into pros and cons.
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)
I'm running a dotnetnuke project (v7.0) with 2 portals.
I need to remove the default DDR menu from one page only.
The menu works great now with multiple pages and sub-pages, however on 1 specific page , ie landing page, I don't want to show the menu.
Right now I can think of 2 methods for achieving this:
Create a new skin template, remove menu, apply template to that one page
Use jquery to detect URL, for that page hide menu.
I'd rather just code the logic inside the template file, but I'm not strong in .net/c# and I'm new to DNN.
It's just one page today.
However, if you are using it for a landing page design I would recommend you just create another skin and exclude it from that and tailor that skin for that need.
That way when your non-technical editors need to work on the site and make a page that might only be used when linking from Google Adwords or whatever they can pick a template without that navigation and you as the developer/designer don't need to edit the skin to put in another exception based on the URL.