Ionic 2 / Angular 2 Routing - Progressive Web App - ionic-framework

I'm searching the web to find a solution to implement url routing in Ionic2, I can't seem to find a way to access a page using a URL.
Has it been implemented in Ionic 2?
Should the Angular 2 router be used? Does it work with Ionic 2?
I need to be able to get the physical url of a page within the web app; in order to be able to share it outside the web app.
Thank you,

I think you are looking for the Ionic service DeepLinker. That does not replace the FILO/NavController but provide a way to define and display specific views based on URLs.
In your main module add:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: DetailPage, name: 'Detail', segment: 'detail/:userId' }
]
})
]
The full documentation here.
Also, if you also release your PWA on the AppStore/Play Store, you can use the native plugin Ionic Deeplinks.

Ionic 2 uses a pile FILO schema for routing with his NavController methods ( like push, pop, setRoot). And you don't need to use a sequence for it like you would do with a Routing system, like to access page 2 i need to go through page 0 and 1, you can just push(NewPage) and it will work, so it gives you a much better control over your application pages and how they interact.
I've never seen anyone talking about using it. If the NavController uses the Angular 2 routing in its background i don't know, will search for this, but the Ionic NavController is easy to use and works very good on most cases, the only case it doesn't support yet is passing parameters back within his pop() method, for this i use a modal and style it totally like a normal page. You can also use setRoot instead of pop to pass data like so.
this.navCtrl.setRoot(MyPage, this.Data);
For more information please see the ionic 2 documentation on navigation

Related

API Controller Routing in .NET 6 Doesn't Work Any More

I'm trying to create a standard WebAPI project in .NET 6. I notice that the standard ApiController route doesn't have the leading api route that I like to have. When I add it, the controller breaks. It doesn't give me a 404 (not found), it just gives me that index page that says that I have to enable javascript. I'm really at a loss at what I have to do to make my app work where I can put api at the start of my routes:
[Route("api/[controller]")]
I've tried adding it to the default controller route map in different combinations. I've tried adding the UseEndpoints method in the Program class. I'm just not sure what to differently in 6.
For those who want to "see my code", I'm just using the standard WebAPI project w/ React (NO Redux!).
Check the new setupProxy.js file image description inside the ClientApp folder, you need to configure the backend routes in the proxy config, I had a similar issue with the ASP.NET Core 6.0 with Angular project template, you can find more information here link 1 link 2

Changing Jitsi UI and removing 3 dots button on hosted server

I am new to server side of coding. Somehow looking at tutorials I was able to host Jitsi server on my hosting.
I am using jitsi_meet plugin with flutter. Till now Jitsi works as expected in app. What I need is remove text
You are the only one in meeting
and also remove 3 dots menu icon. Instead of menu icon I would love to have camera swap icon there.
What I have done is in /etc/jitsi/meet/my-domain.com-config.js is below
// - if `toolbarButtons` is undefined, we fallback to enabling all buttons on the UI
toolbarButtons: [
'camera',
//'chat',
//'closedcaptions',
//'desktop',
//'download',
//'embedmeeting',
//'etherpad',
//'feedback',
//'filmstrip',
//'fullscreen',
'hangup',
//'help',
//'invite',
//'livestreaming',
'microphone',
//'mute-everyone',
//'mute-video-everyone',
//'participants-pane',
//'profile',
//'raisehand',
//'recording',
//'security',
//'select-background',
//'settings',
//'shareaudio',
//'sharedvideo',
//'shortcuts',
//'stats',
//'tileview',
'toggle-camera',
//'videoquality',
//'__end'
],
But it only made changes to website version not on mobile app (I am using flutter pluging jitsi_meet).
Is there anything else I need to do as well? Please help, how to go about it.
As far as I remember there should be separate code for web and mobile apps. So you should look more into the codes and understand the separation and you will definitely be able to tweak the UI you are wanting. You can also follow threads like this.
For more responses, you can post in jitsi community where there are lots of jitsi enthusiasts who can guide/help you along your journey related to jitsi. Thanks.

Using `history.replace` with Angular 1.x

I need help using history.replaceState on an Angular 1.x app.
My Chrome extension interacts with someone else’s app, and I want to load a Url in that app with an extra query parameter that my extension can read, and then use history.replaceState to remove from the url.
Step 1: open www.otherapp.com?extensionToken=MhtkWGUyS#/settings
Step 2: read xtensionToken=MhtkWGUyS
Step 3: replace/remove token with replaceState to www.otherapp.com#/settings
The trouble is that Angular 1.x doesn’t like history.replaceState to be used on its own: https://github.com/angular/angular.js/issues/3789
Angular seems to revert my update back to the original Url, or scramble the Url altogether. Does anyone have experience using history.replaceState with an Angular app?
One solution I thought of was to use Angular’s $location to make the state-change, but I’m don’t know how to access $location outside of the Angular scope. Does anyone know how I might access that?
The tricky part of generating a reference to $location is that my code will run with many different apps, with their own unique angular ng- elements, and I don’t know what those elements are on the page. I can assume that most have Angular at window.angular, but I can’t easily assume what the Angular app element will be for each page.

protractor : Best way to use in protractor ? driver.get("URL") or browser.get("URL")

Which is best way to use in protractor ?
var driver = browser.driver;
driver.get("URL")
or
browser.get("URL")
browser.manage().timeouts().implicitlyWait(browser.params.implicitWaitTime);
Currently I have used second approach to open URL and perform any browser action. Should I change everything like first approach or my approach is nice to go ahead ?
My two cents
If its a non angular application - go For browser.driver.get()
If not go for browser.get('')
browser.get understands the angular cycle and waits for the angular activity to finish
from documentation - API Documentation
Navigate to the given destination and loads mock modules before
Angular. Assumes that the page being loaded uses Angular. If you need
to access a page which does not have Angular on load, use the wrapped
webdriver directly.
If you are using browser.get() then you dont need a implicit wait and ideally you should avoid using it

How to implement cross app navigation and navigating back to the Fiori launchpad home?

In our company, we've set up the Fiori launchpad. In it, we have configured a tile that is linked to a custom developed SAPUI5 app, which is deployed as a BSP on the server. It took us a long while, yet using the router pattern within that application, we managed to make the navigation from the launchpad tile to the custom UI5 application work.
The thing we are struggling with, however, are these 2 other navigation paths:
From the application back to the Fiori launchpad (back home)
From the application to another application (tile to tile)
Ideally, this out of application navigation is in the UI5 way, including a transition, so not just a window.replace in JS. After a long search, the only hint I've found in support for this scenario is in this class:
https://ui5.sap.com/#/api/sap.ushell.services.CrossApplicationNavigation
However, I don't understand how to use it. The example isn't even correct and has syntax errors. I've found two forum posts elsewhere asking about how to use it, but they lack any meaningful answer.
Assuming you are using Semantic Objects for in-place navigation configured in your Launchpad to navigate to UI5 Applications you can navigate from one Application to another using the CrossApplicationNavigation service you already mentioned. However, the documentation about it is slightly confusing. This is how it works for me:
// Step 1: Get Service for app to app navigation
var navigationService = sap.ushell.Container.getService("CrossApplicationNavigation");
// Step 2: Navigate using your semantic object
navigationService.toExternal({
target : { semanticObject : "<YourObject>", action: "<YourAction>" },
params : { A : "B" } // optionally
})
If you want to go back to your launchpad after in-place navigation you simply need to call
window.history.go(-1)
This still triggers the correct transition.