I understand how to create and use multiple pages(or apps) within a workspace and build them. I am kind of confused about how do you make these multiple apps talk to each other ?
lets say I have two apps in my workspace - App1 and App2.
I can use routing and make apps talk to each other if the value is simple enough(like a user id).
What If i have to send multiple id's or data from App1 to App2 ?
I think you have a few options available.
URL Parameters that you parse when instantiating the second application:
http://example.com/app2.html?one=1
Anchor in the location:
http://example.com/app2.html#one:1
If the applications are hosted on the same domain, you can use something like SessionStorage or LocalStorage (provided they are available to the client)
Set a cookie
You can add and remove cards panels dynamically in one page without providing 2 or more pages.The sencha app is designed for single page app.
Related
I'm trying to create a ReactJS web app that I can use on multiple websites (clone ?), while it fetches data from a centralized API.
The goal is to develop one app, which I can improve and update, of which I automatically deploy to each website.
What's the best approach to do that?
maybe the simplest way is to have one repositroy all your website use the same repo for your react js app. And you can add and .env file for each website that contain a specifique configuration for each app.
this way you will share the same app , you update one repo and update is shared cross your websites.
One way to solve this I discovered to create environment variables that get passed to the backend through a custom header for example. It's a way of creating a SaaS website.
I am new to PWA, i am curious to know that is it possible to create a PWA in angularjs?
please provide steps to make PWA using angularjs if it is possible to create PWA using angularjs.
There's nothing framework-specific about PWAs - your site just has to meet a certain set of criteria:
Everything is served over HTTPS
The design must be responsive
Your app must be available offline (i.e. it needs a Service Worker)
You need to provide a manifest file containing metadata about your application
Your app must work in all modern browsers
Page transitions shouldn't block the app (i.e. you need to show loading screens/spinners if things are taking a while to load)
Each page in the app needs a unique URL
All of that is achievable with Angular 1 - it'll probably be easier with a modern framework, but there's nothing stopping you sticking with what you've got, for now at least.
look at this github project https://github.com/addyosmani/angular1-dribbble-pwa
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I've developed two angular applications:
Contacts
MailClient
Both need to be deployed on their own endpoints. However: MailClient has a tab that needs to load Contacts and communication should be possible between the Contacts tab and the MailClient.
What is the best way to achieve this?
I first thought of using an iFrame and use angular.bootstrap to load a second angular application, but I've read that "AngularJS applications cannot be nested within each other."
So my second thought was to somehow convert the the Contacts-app to a module/component (bower?) which can be loaded in the MailClient. But how to achieve this? Or are there other (better) alternatives (like configuring the MailClient project to use symbolic links to the Contact project and just use them in the project - I don't now how we would configure the build-server in that case though)?
I have an existing webapp built on Laravel. I am moving to an Ionic build to create the native version.
How would you suggest I separate my views, and how do I call the routes? Has anyone any example.
Here is what I am about to do:
1. move all my views to the public folder
2. install Ionic in the public folder,
3. Using UI-route & Angular make $http calls to the backend.
Thanks for your input :-)
You can't simply do that.
If you have a "classic" Laravel app with blade templates, what you need to do is to expose an API from it.
Then you create an ionic app in a different directory (they are not related, so you don't have to mix them). You just need to develop your ionic app like any other ionic app. Then in your factories where you do the request to your API, you do something like:
$http.get('https://example.com/api/foo')
Where example.com is the domain of your Laravel application (You are going to need to activate CORS in it).
You just can't simply create an ionic app inside laravel, because that application will be built into an .apk to be installed on the phone and you can't add Laravel inside the package.
So the TL;DR is having your normal Laravel app where it lives, add it some public API so your ionic app can access it and then build an Ionic app from zero that will use that API.
It depends on you, but I prefer to keep the ionic project nested in /public, since I want a single-project app, the sources are clearly separated by being or not in the subfolder, but it helps your productivity, benefits are:
Single source control: Single source set for source version control (GIT, SVN, ...), so when I work I can do a single pull/checkout and push/checkin
Single app to deploy: Single domain, no cross-domain problems, single deploy via FTP is available, any standard php server can handle it with a single and standard account to handle
Coherent project without interdipendencies: I do not want to split logic dependencies of the same model between many projects, when I change something in backend or frontend that involve the other side, I want to have in the same project all the sources to update. It make not sense to have to go to a different project to adjust compatibility, it would be uselessy messy