Adding Ionic CSS/JS components to an existing PhoneGap/AngularJS project?

ionic-v1
1

Hi, I’m in the mid-to-late stages of developing an app using: PhoneGap, AngularJS 1.2 & SQLite3 with FTS3. In the process of looking for a way to add some beautiful interface touches, I’ve come across Ionic. It looks like a truly gorgeous solution, but after the hassle I’ve already gone to to set up the database plug-ins etc, I’m not sure I want to to try to migrate my existing code into a new Ionic app.

Since I’m already using Angular, is there a chance I could use the Ionic JS & CSS within my existing app? Has anyone done this successfully? I’m currently using $routeProvider for navigation, and the Ionic components I am most interested in using for my app are the sliding animations on navigation, and the side-menu component. Is it possible to use these just in a modular way by adding some pieces of the Ionic code to my project?

I will be experimenting with this topic this afternoon, but am also very interested to hear other people’s experiences.

2

I have limited experience with Ionic, but I will try to help the best I can. This is what I did first and worked,

  1. start fresh a ionic app with same name as your app in another folder (leaving the original intact for if something goes wrong)
  2. go to “www” folder and find index.html, note the ionic dependencies to css and js.
  3. remove the example files (angular custom app)
  4. copy the example index.html in “www” directory to another folder in your machine or rename it, so you can check any references if needed.
  5. move the content of your app’s release folder into “www” ionic folder. (any sass, js, etc)
  6. Add ionic (css & js) dependencies to your index.html
  7. Modify your sass files to import ionic.scss, override any styles you want to modify
  8. Add any ionic components you need to your views

For my case that did the trick, but my app was not very complex at that point, I hope it works for you.

1 Like