ember app within another ember app - ember.js

We are writing Ember app which provides basic infrastructure for app building. Users can use this app and build there own Ember app by utilizing infrastructure provided by this app. This app provides basic utility services like Authorization, Authentication, layout, templates, reusable UI components, consistent look and feel, scaffolding, dependency stack etc. My question is,
How can users build there own Ember app utilizing these services and include it within this parent app, something like nested app, where parent app provides common services. Is it possible to include one Ember app within another Ember app? child app content should be shown in parent content window retaining all navigation links and layout.
There can also be a situation where multiple apps are included under parent app and each of these child app can be accessed using a router in parent app, example, if child1 and child2 apps are included under parent app, then navigating to "/childRoute1" of parent should open child1 in parent content window and navigating to "childRoute2" should open child2 in content window. Is this possible using Ember? if not how this can be achieved?
Thank in advance

This question is a bit vague, but I think what you want:
window.App = Ember.Application.create({
rootElement: '#ember-app'
});
Include that within the Ember.js Application definition to assign an Ember app to a specific div (in this case ember-app). This div can be within the jsp of another existing Ember.js application.

Related

Using two different ember builds

I am having two different ember builds.
Lets say one is one is parent build and one is child.
Can I have a setup where I can use components from one app inside another app?
Example:
I have added the js,css and vendor js from both the projects in index.html.
<script src="../adap/emberapp-parent.js"></script>
<script src="../adap/emberapp-independent.js"></script>
...
My main usecase is, I have an parent ember app and I need to use components from another app, which is by itself an independent app.
Is this possible?

Ionic2 web app routing configuration

I am working on ionic2 project, which is web project (i.e. runs as a website on browsers not a mobile app). Here I am facing difficulty to give specific URL for pages. How do I implement routing in my project ?
I also worked with angular2. Where we can give URL to components. But here that thing is not working.
Take a look at this website: https://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/
and read up on the nav controller here: https://ionicframework.com/docs/api/navigation/NavController/
Some Context: While Ionic2 does use the native browser for each platform, it uses a special controller to change routes
NavController is the base class for navigation controller components like Nav and Tab. You use navigation controllers to navigate to pages in your app. At a basic level, a navigation controller is an array of pages representing a particular history (of a Tab for example). This array can be manipulated to navigate throughout an app by pushing and popping pages or inserting and removing them at arbitrary locations in history.
Before diving deeper into Ionic I suggest obtaining an understanding of this controller.
This sample ionic project will also help with the understanding of navController:
https://github.com/ionic-team/ionic2-starter-sidemenu

Using Ember.js in Existing Application

I've done some example apps in Ember, and now I'm ready for using it in existing application. Its traditional web application (request-response, full reload and some ajax loaded content, no rest/api things)
So lets assume I've few page (urls) like
1 abc.com/home.php
2. abc.com/support.php ,
3. abc.com/support.php?call=meeting
and so on..
so is it possible to use just one url with ember app and rest leave as such untill its ready?
PS: I did try for support.php as this.route("support",{path:"/support.php"}) and have SupportController and support.hbs template but its not working. I'm not sure how to put it in jsfiddle.
Thanks
Include your ember app only on the page that needs it, so only on abc.com/support.php
As far as ember can see, when you go to abc.com/support.php you are on the index page (of the ember app), and you will need to use the index.hbs tempate.

Ember App Kit and ember-oauth2

I am new to Ember and am trying to use https://github.com/amkirwan/ember-oauth2 library with my Ember App Kit based Ember App.
I have searched a lot but I cannot find the following answer:
ember-oauth2 creates a App.oauth global that is needed elsewhere
App.oauth = Ember.OAuth2.create({providerId: 'google'});
App.oauth.authorize();
then I want to access it in my controllers. However, the "App" object is not available in controllers. How do I access global objects defined at the App level in my controllers?
It also uses window.App.oauth variable in callback HTML so post compilation I need the oauth global to be available.

ember.js - common functionality shared across controllers - popups, notifications

i've red quite a of lot tuts and articles on ember.js and made some basic stuffs - some sanbox and test things, complete login screen with many outlets, actions, ajax and so on... but I am now facing one problem.
Ember.js is for "Single Page Application" and I did not found a way (yet?) how can I make and share basic functionality across more "ember apps"/parts?
I have some backend and then some modules (users, files, news,...) and each is made by classic:
App = Ember.Application.Create()
But I need to have some shared functionality and I dont want to repeat in at each app - I want to be able to show some notification - once from user app then from files app and so on. Or to have unified modal window, or function that check some things in background on server and push updates to notifications area that is running on each of those app parts...
How should I solve it? Is there any way of extending base App? or have to separates App on one page that communicates to each other? I've also read something about Ember namespaces but I am not sure if it is the right thing and how to user it :(
note: Each module (dashboard, users, files,...) is loaded as new page (complete html, new scripts,...), but module itself work as a SPA and on AJAX.
Ember.js has awesome documentation but real word example articles on how to use it are showing slowly and I had no lucky finding some tut/article on solving this problem in real world.
You can set another module and run it as another ember app in the same page, define the root element of the apps
var AppNotification = Ember.Application.create({
rootElement: '#notifications'
});
var AppUsers = Ember.Application.create({
rootElement: '#users'
});
So you need to associate the main apps to a div (#dashboard,#users,#files) and another div for the notifications.
I don't know if it it possible to communicate from one app to another, this is very advanced, but you can investigate ember instrumentation...http://emberjs.com/api/classes/Ember.Instrumentation.html
Good Luck
I just remembered (beer enligthment) other different way I've read months ago... load async code from the router JSBin example
You can have your notification js stuff and take the templates using this SO answer