client-side routing with page.js between two different spa pages - javascript

We are building an application using multiple single-page apps to keep things small, but run into a problem of building links between pages.
Let's say we have to pages equipment.html and maintenance.html
Both are independent SPA apps each with their own client side roting tables
Right now we have client side routing with page.js using #!
On the equipment page we place a link
Show Maintenance
Hovering over the link shows http://localhost/maintenance.html#!/show/350
but when we click on the links it goes to http://localhost/equipment.html#!/maintenance.html#!/show/350 which does not take us anywhere. Now, clicking second time on the link takes us to the right page.
Any way to solve this?
Thanks

Related

Routing and navigation in Office taskpanes

I have a mean-stack site with angular-ui-router, now I want to code an Office add-in with a server and a part of its functionality, and interact with Office.
I have seen add-in commands, which permits of going to certain pages from ribbon buttons. But could anyone tell me what should be the best tool to implement navigation (as well as going back & forward) inside the task pane (like ui-view and ui-router for a web site).
For example, how should we implement the navbar and the navigation in the following taskpane?
Additionally, I have seen some add-ins can launch 2 taskpanes (by 2 ribbon buttons in the same group) at the same time. We can switch between 2 taskpanes, and we can also show them side by side at the same time.
Does anyone know how to achieve this?
For independent taskpanes, you can specify an unique TaskpaneId for each Action defined in your manifest. See the manifest Action documentation for details. Note that this isn't supported by Outlook.
The UX you're referencing is using two different types of control elements. In this case there are several Button controls and a Menu control (the drop-down).
All of the above are defined within your add-in's manifest file. For working examples of add-in commands there is an Office Add-in Commands Sample available on GitHub. There are several add-in samples included in this repo, each with their own manifest (for example, the Word manifest).
For routing/navigation it's good to use angular router, so that the application will behave as a single page application.
Regarding navigation through dialogue windows opened by ribbon buttons or interaction among them is not possible till now in my knowledge. Each button should call different modules.

How to get page.js to work in a single page AND multipage on the same site?

am using page.js for routing in a Grails application using '/' to point /HomeController/index to serve up a single page web application. I just installed Grails Spring Security Core plugin, and I am using the Grails scaffolding to create the User Admin/Permissions views with the goal of serving them in the traditional multi-page way to avoid having to do a lot of UI work on admin pages. The bulk of the application will be served using single page architecture, with just the admin pages being served multi-page.
In their documentation, page.js says, "By default when a route is not matched, page.js will invoke page.stop() to unbind itself, and proceed with redirecting to the location requested. This means you may use page.js with a multi-page application without explicitly binding to certain links." But, I cannot get it to work...
I am using page.js like so:
page('/', SCM.Dashboard.home);
page('/hx', SCM.HX.summary);
page('/hx/vendor', SCM.HX.vendors);
page('/hx/customer', SCM.HX.customers);
page('/customer/list', SCM.Customer.list);
page('/maintenance/activity', SCM.Maintenance.activity);
page();
When I click a link to '/user', based on their documentation, I expect it to forward directly to 'http://domain.com/user'. It adds the correct path to browser location bar (http://domain.com/user), but the browser never forwards to the page. In order to see the page, I have to click the link, and after the location bar has changed, if I refresh the browser window, the correct page appears - obviously unacceptable. Yet, I cannot find in their documentation how to implement this correctly. I have experimented with various settings for hours with no luck. If I comment out the page.js code above, the multi-page admin pages work fine, and I am able to navigate from page to page no problem. Has anyone solved this problem?
I just upgraded from version 1.4.0 to version 1.5.0 and it links between the Single page (Main app) and Multi-page (Admin functionality) portions of the application seamlessly with no configuration needed!! Excellent feature addition!

What is good approach of implementing web widget

I have a dillema of the way web widget apps should be implemented.
Scenario is that website A should present content of website B as a widget. Lets say that the widget content type is webshop, so all that a webshop can offer will be inside a widget. Items, cart, login, checkout, etc, but no redirection to other site. Window stays on Site A.
There is no interaction between websites. No data passed from one to another.
Technologies that will be used are .net Web API as server side, angular as js framework, and all will be implemented as single page app.
I see two scenarios.
Website B will be embeded in website A through iframe
All js, css, and initial html will be somehow embedded into website A and make calls to WebApi services.
I'm not clear how 2 should be done. Giving some bundles of JS, CSS, and HTML to Site A to implement is kind of overhead for both me and site A, and I see a lot of troubles there. Maybe it all should be injected dynamically somehow.
On the other side..iFrame...this seems like a right scenario for use of iframe, but is it?
Any thought is appreciated.

How to include absolute URL for JavaScript, CSS and Menu Items

I'm working on ASP.NET MVC 3 web application. As a part of integration with third party application, we need to provide a master page (template) for our web application which they will use to inject necessary data on the page. The third party will poll our template every few minutes and update if any thing changed.
For this to work, all the JavaScript, CSS and menu links must be absolute URL to our domain name so that if user clicks the link. All JavaScript and CSS will refer to resources living on our domain.
Given that our web application will be hosted in different environments e.g. DEV, UAT, QA and Production (with actual real domain name). Could someone help me how we can provide a absolute URL for CSS, JavaScript and menu links that would work on all environments?

How to navigate back to the Java appliacation from a web page in Browser Session?

We are developing a Java application for BlackBerry. We have the home screen in which we have various links to open the different versions of the news pages. We have links in these news pages to open the various articles. We need to create a href link in the web page which should act like the home button. When the user clicks on this home button, the application should navigate back to the Home screen. The web pages arer being created by us. So, we can embed any code. Thanks in advance.
This took me awhile to figure out and to get working, but once I did, the concept seemed so simple. Look into BrowserContentProvider. If my memory serves, you can find an example of this in the SDK. Essentially, you can register a BrowserContentProvider with your application. Then, you set up your website link with a certain extension. When the BlackBerry browser doesn't know how to handle that extension, it will go around and "ask" if any other applications know how to handle it. Your application can then recognize it and request the foreground (to open on top of the browser).

Categories

Resources