migrate web application application to angular.js [closed] - angularjs

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am working on an online html presentation editor that is currently in production.
Eventually, I would like to re-write it using angular, preferably by gradually replacing components of the app rather than rebuilding it from the ground up.
To Start, I would like to implement new features using angular.
In summary, the question is how to handle the case of an application where only certain sections are using the framework?
It seems that the angular app would need to interface with the rest of the app through an api, as if its an external entity.
EDIT for clarification:
the application resembles power-point with a stack of slide thumbnails. The selected slide contents are loaded into an editable work-space, where changes are applied via a menu to the selected element.
I would like to add an audio feature to the menu. It's a form that edits data attributes on the selected element. These data attributes are used to generate an html5 audio element elsewhere.
If I were to build the audio module using angular:
1.The ng-app attribute would have to be on a parent element of both the workspace and the menu.
input controls in the add/edit/remove audio form have to be bound to the same model as the selected element's data attributes.
example:
<input value="{{loop}}">
<div class="element selected" data-audio-loop="{{loop}}">
3.when opening the audio form the angular app needs to be aware of what the selected element is.
4.only this element needs to be bound to the same data as the form.
steps 3 and 4 are where I am not sure about the implementation.
If the entire app was modeled in angular, then step 3 would be easy, because there would be a model that tracks the selected element.
How should the angular module be made aware of what the selected element is, So that it can apply its bindings?
EDIT: (further clarification)
assume I have these elements, only one of which is selected:
<div class="element selected" data-loop="{{loop}}">
<div class="element" data-loop="{{loop}}">
<div class="element" data-loop="{{loop}}">
<div class="element" data-loop="{{loop}}">
and this input:
<input ng-binding="loop">
how can I make the binding only affect the selected element, and not all the elements?

Answer 1

There's no reason not to gradually introduce Angular in your app. If you're currently using JQuery, Angular will use it as well. In not, it will fall back on internal alternative jqlite.
As dabee says, only the code inside the directive ng-app is under control of angular, and you can put that tag on any compatible element (div, ul, etc.) it doesn't have to go on the body tag and control the whole page.
You could encapsulate the interaction with the rest of the app by wrapping data access in a service (a recommend practice in any case) - or through reading & writing to the DOM. In the event that you need to respond to changes in the DOM through actions outside of angular's control, you might want to check the ng-ScrollSpy directive's code for a potential method: An AngularJS module for navigation highlighting
Further reading: http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html
Responding to the most recent update:
To make the directive apply only when the class is selected, test for selected in the directive itself. See: How do I apply an AngularJS directive based on a class set by ng-class? In particular, you'll want to extend the function that adds the selected class - it should update a variable that's accessible to angularjs code whenever the element has been updated (or fire an event that you'll handle in the directive code). Create a $watch on that variable (or add an event handler), and apply the dom transformation to add or remove the feature as applicable.

Answer 2

Only the code inside the tag with directive ng-app is under control of angularJS. Thus the remaining code can be control by any other tool.
http://docs.angularjs.org/api/ng.directive:ngApp