Where does the ionic code go in the MEAN stack?

ionic-v1
1

Problem : I want to be able to use the same back-end and same UI service/controller logic for my web-app and ionicly built app.

Questions :

  1. Is it possible to do this in the same project scaffolded out using any [MEAN stack generator][1]?
  2. Where does the client code written for ionic go? Can it be done by having only separate templates for the ‘ionicly’ built app? If so, where goes the configuration that decides which templates to serve based on whether the app is being used or the web application?
  3. Has anyone built a web-app + ionic-app in the same project and how do they go about the ‘structure’? Any references? Examples?

P.S. : Couldn’t find any sample structure out there for the above. Also, this will be my first app with ionic - hence the silly questions. Thanks : -)
[1]: https://github.com/DaftMonk/generator-angular-fullstack

1 Like
2

Web app and ionic app have to be 2 different projects because they have different build processes. Also you won’t build same user experience, as such the HTML templates will be different which means the controllers will be also different, the only thing that you may potentially re-use are the data services.

3

Thanks!
So my data-services/APIs will have to be outside any of these projects separately? Am I correct?

Eg:
api.myapp.com served by Server X (The back-end)
2 different deployments on Server Y (or Server X itself) for web-app and ionic code (The front-end)

Which also means I have to spend 2x time in the Front-end development. Any other way in which I could re-use stuff on the front-end side?

4

Yes don’t use Ionic which is really targeted to mobile only and use an all-purpose framework that could work better for desktop like Bootstrap for layout combined with Apache Cordova to access device features. Of course this will come at the price of a less polished user experience on mobile and adding some logic to work around device feature missing in desktop browser.

This is really a strategic point, what are the device features you’re going to use that could justify building a mobile app rather than just a responsive web site.

5

Of course you could also say that you don’t care too much about user experience on desktop, in such case you could probably have one single code base using Ionic.

6

Thanks! It really clears up things.

7

Hi gmarziou,

I have attempted the same use case you have discussed here. I use a mean stack application, in which a portion of the template is ionic. I expect the template to display in web app also. I dont mind the device (for now…)

For eg: my page route is localhost:3000/user -> now from the server side , I load a page userHome.jade

In userHome.jade, I call a angular module ‘common.user.core’ which will load the controller,services,and templates of that module.

Now, in the same userHome.jade, I also include the below files.
script(type=‘text/javascript’, src=’/lib/ionic/js/ionic.bundle.js’)
script(type=‘text/javascript’, src=’/lib/ionic/js/ionic-angular.js’)
link(href="/lib/ionic/css/ionic.css" rel=“stylesheet”)

So , I got the definitions of ionic tags and attributes into picture now.

Then, I go ahead with calling a template base.html in which I have the below code.

From base.html








The problem I face is …I am not getting any error for using ionic attributes. But I dont get the ionic tag portion. I only get ‘From base.html’ text.

What is your opinion about my approach? Is it really achievable, provided I make some more library inclusions (hopefully)… or is it totally a wrong approach?