How to use AngularJS / Ionic within a Backbone / Cordova project?

I'm new to AngularJS / Ionic, so I ask you to help us explain how to add AngularJS / Ionic to the Backbone project part .

We have a project at hand that is built on the Backbone framework in Cordoba. We are now looking for some of our work in AngularJS. We are thinking about creating new pages in Backbone using requireJS and implementing what AngularJS needs to show.


For example, we create a new page using init and render it in Backbone and in the returned html, it has Angular things like:

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

      

We install Ionic on top of Cordova and import them into 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 Chrome debug mode, Angular is ready to use, but the html is still processed as plain text as

My first expression: {{ 5 + 5 }}

      


One Angular thought is imported, but it is on the main view, the new page we created is another view by clicking a button on the main screen. Cordova will replace the main view, placing it on top of the current view, which still displays the "one" page for the client. So in this case AngularJS doesn't know what it should work with. I tried calling Angular after the html is displayed in chrome debug mode, it shows $ scope as undefined.


Any ideas from an architecture point of view, from coding, from a demo, from anything are very welcome. Even if you think it's impossible based on two different frameworks, leave your reasons below. Many thanks!

+3


source to share


1 answer


I found the answer myself.

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



The idea is to still use Backbone to create the page, but internally that page uses AngularJS for it. Ionic 1.0 can be installed directly in a Cordova project.

Hope this helps. If you have any questions or any information please do not hesitate to answer. Thank.

0


source







All Articles