Including ionic to an existing project


#1

Hi,
We have a project with both native Android and iOS clients and we want to add some screens to these. Is it possible to develope these screens with ionic and add them to these existing projects? So the clients will be half ionic and half native.

If it is possible, is there anyone can help me about how this can be done?

Thanks in advance…


#2

I don’t know any specifics since I’ve never done this myself… But I’ve seen it work before, so you might get an idea of how to go about this and maybe figure it out or search on the web how to do it. Just hoping this helps :smile:

You can create a webview within your native application. In this native application you should be able to load your ionic application from local files (this is basically what cordova does as well). Your only problem is, you won’t have any acces to cordova specific features, you have to use the plain ionicframework since you are not using cordova in fact.

You should be able to use ionic in your webview like you would use ionic in your native browser though.

Not sure how to do this since I’m not really a native expert (yet?) and have never worked with custom webviews in native apps. Might be that you got an idea though :wink:


#3

Thank you for your reply… But the problem is how to display the ionic content in a web view. I mean how can i include compiled html output to my project.

Anyone have an idea about this?


#4

This post seems to be a nice answer… Take a look here:

I think that if you would include the index.html generated by ionic, it will load all other files (like js scripts and css etc) like it would with any html page, so you just have to open your index.html i think.

As for how to open a webview in android, you could maybe try following this:

http://www.mkyong.com/android/android-webview-example/


#5

I’m doing just this for an existing IOS project.

For me the steps have been:

  • I’ve created the ionic project as a stand alone project - this means that I can rapidly code the ionic content.
  • In the IOS project folder, I’ve created symlinks to both the config.xml and the www folder in the ionic project folder
  • I’ve added both of these to the Xcode project - adding the folder using using the option to create a folder rather than a group. The part of my xocde project then looks like:

  • I use cocoapods for dependency management, and added cordova support to the app using the cordova pod.

Finally, in the screenshot you’ll see I’ve a file called ‘ReferenceViewController’. That simply extends the cordova CDVViewController - and is the view controller holding the web view. For me it gave a place where I could modify the status bar color, and put the UIWebView delegate code which is necessary for providing a link back to the rest of the app.

I hope this helps you,

James


#6

Thank you so much! I will try and write back my feedbacks…