Search code examples
javascriptangularjscordovabackbone.jsionic-framework

How to use AngularJS/Ionic as part of Backbone/Cordova project?

I am new to AngularJS/Ionic so I am asking for your helps to give us some ideas about how to add AngularJS/Ionic to part of Backbone project.

We have a project on hand which is built based on Backbone framework in Cordova. Now we are looking for doing part of our jobs in AngularJS. What we are thinking is to create new pages in Backbone with requireJS and implement what to show by AngularJS.

For example, we create a new page by init and render it in Backbone and in the html returned, it has Angular stuff such as:

<div >
    <p>My first expression: {{ 5 + 5 }}</p>
</div>

We installs Ionic on top of Cordova and import them in index.html with:

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/main.js"></script>

In the Chrome debug mode, angular is ready to use but the html is still parsed as plain text as 

My first expression: {{ 5 + 5 }}

One thought is angular is imported but it is on the main view, the new page we created is another view by clicking a button on main view. Cordova replace the main view by put it on top of current view which is still show the 'same' page to client. So in this case, AngularJS does not know where should it work on. I tried to trigger angular after html is rendered in Chrome debug mode, it shows $scope as undefined.

Any ideas from architecture point of views, from coding side, from demo, from anything are very welcomed. Even if you believe it is impossible based on two different frameworks, please leave your reasons below. Great appreciates!

Solution

  • I found the answer by myself.

    Yes. It can add AngularJS/Ionic to an existed Backbone/Cordova project. I found a good example for it, https://gist.github.com/geddski/5571990.

    The idea is to still using Backbone to create a page, but inside the page, it is AngularJS on top of it to implement views. Ionic 1.0 can install in Cordova project directly.

    Hope this could help. If you have any questions or any updated information, please feel free to reply. Thank you.