Using Ionic with Mean.js full stack


#1

Hi i’m a new beginner,
anybody ever using ionic with mean.js boilerplate??. Because mean.js come with bootstrap and i want to change it with ionic and implement side menu and pull to refresh.
Need help for the step by step tutorial. Thanks.


#2

Simple bootstrap in your bower.json

	"bootstrap": "~3",

with

 "ionic": "driftyco/ionic-bower#1.0.0-beta.6"

Then run bower install


#3

Thks mhartington,
Already done that, but still dont know how to change /app/views/index.html and /app/views/layout.html also add ionic.css , ionic.bundle.js to /config/env/all.js.
No idea how to implement side menu, because mean.js boilerplate using header.html and home.html.
Which one html i should put the ion-side-menus?
Any sample or guide for me to follow?
Thks


A simple backend for Ionic app
#4

There is one catch to your request, mean.js assumes you are producing a website not an app. You should be able to essentially replace the /app directory in mean.js with the www/ directory from the ionic setup to have mean.js serve your ionic project. However you would have to also consider how that affects your mobile app, since ionic sets up the entire cordova project but mean.js does not support this.

I think you have two options.

  1. Create a mobile app with Ionic and a service layer with mean.js (or I would just use express and forget mean.js to keep it simple). I believe this is the best option. Mean.js really is just one way to combine these various libraries into a pre-baked project, but it doesn’t really fit for this case.
  2. Move your ionic www/ directory into the app/ directory of your mean.js project. Then you have to create a standalone cordova project, and point the app to use load assets from your mean.js server using . I don’t recommend this, and have heard doing this may cause Apple to reject your app (because you can change the content of the app without going through their approval chain).

#5

Thks Jeremy. You got my point. My target was a mobile app, i’m a beginner and after searching so i choose mean.js with yeoman generator that in my opinion it was a complete package with a scalable app and good structure application.
After ur explanation, i know i’m wrong. So

  1. From ur option 1, still confuse about a service layer with mean.js. Or any suggest if i want to use cordova, ionic, angularjs, mongodb with a good structure and scalable.
  2. Pls give ur comment about this one http://www.frontendmatters.com/getting-started-mobile-app-development-phonegap-yeoman-angularjs-ionic/

#6

Cordova, Ionic, and AngularJS are what you build your mobile app with. MongoDB runs on a server, which is not going to be in your mobile app. You need something that is known as a RESTful service layer, which allows you to load data from a url into the mobile app, but it runs and stores data on a server somewhere else. Consider this tutorial http://scotch.io/tutorials/javascript/build-a-restful-api-using-node-and-express-4


#8

Thks for ur explanation… it’s been a while…
Pls correct me…

  1. Build mobile apps with ionic n angular with backend api server using node express mongodb and the data are store into our own server or we can store the data into cloud service.
  2. Build with ionic angular with backend service such as parse / firebase/ aws amazone/ google cloud endpoints.
    From point 1 and 2, which one is better n easy ?
    From point 2… which one backend service is more suitable with ionic… any suggestion??
    Thks for ur reply

#9

Could you elaborate?


#10

Ionic itself is only really related to the A in the MEAN stack. Ionic is primarily the UI component layer built using Angular, and runs in a browser (or inside of our hybrid app). The rest of the MEAN stack all runs on a server (and cannot be included in your app).

Generally I would recommend that you build your apps (the Ionic/Angular piece) not using MEAN. Use the ME_N (without Angular) stack to create RESTful APIs, or use some existing service (like Firebase) that generates an API for you. Any backend service can work, it depends more on what you find easiest to use and what solves your needs. I don’t want to advocate for any kind of backend, you could write it yourself, hire it done, buy it somewhere, it doesn’t matter as long as it is RESTful it can be easily accessed.


#11

Hiii my question is when I’m making restful api in meanjs for web app how that same api can be used in ionic so that the data and all logic will be at one place. I dont want to rewrite the restful api for ionic.


#12

Good question, I´d like to hear from the more experienced team


#13

Did you ever get more details on this?