1

I'm doing AngularJS research for a Proof of Concept presentation in a few weeks to show the benefits of AngularJS.

Edit Here's my plunk as I work through this challenge

The company I work for has a fantastic Theme site that answers a lot of our UI design questions. Everything from the header to the footer and all the form elements, tabs, buttons, etc...is answered for us.

What I've been doing is "Angularizing" the theme with directives. So, instead of the developer copying and pasting 10 lines for the company header, I've put the company header in a directive so now the developer can just include a one line element such as <companyHeader />.

Now I'd like to do the same thing for our jQuery tabs. We have different types of tabs for different reasons. Instead of having the developer worry about that, I'd like to simply put those tabs in directives.

So, instead of this:

<div id="example-subTabs">
  <nav class="module-sub-nav">
    <section class="subNavigation clearfix">
      <ul>
        <li><a href="#sub-1">Subtab 01</a></li>
        <li><a href="#sub-2">Subtab 02</a></li>
      </ul>
    </section>
  </nav>
  <div class="app-wrapper" style="border-top: 0;">
    <div id="sub-1">
      <div class="content">
        <p>Subtab Content 01</p>
      </div>
    </div>
    <div id="sub-2">
      <div class="content">
        <p>Subtab Content 02</p>
      </div>
    </div>
  </div><!-- // end content -->
</div><!-- // end subTabs -->

$("#example-subTabs").tabs();

I'd like for the developer to simply do this:

<company-sub-tabs>
  <tab title='Subtab 01'>
    Subtab Content 01
  </tab>
  <tab title='Subtab 02'>
    Subtab Content 02
  </tab>
</company-sub-tabs>

And the AngularJS would handle the theme and the jQueryUI tabs() initialization

Is that a reasonable expectation of Angular?

If so, would I capture the contents of <company-sub-tabs> and loop through each <tab> and put the contents in a new "app-wrapper" element that I would create in my "companySubTabs" directive??

Thanks, Duane

Duane Haworth
  • 79
  • 1
  • 11
  • One general advice: don't try to use Angular as a layer on top of a jQuery plugin. It works the other way round: Angular should take care of everything in your app (including the full tab functionality) and resolving to JS/jQ plugins should be only done if there's absolutely no other way. – Shomz Jun 13 '14 at 18:02
  • Thank you for your response. If I read your response correctly, I should abandon my current idea of leveraging our jQueryUI solutions and use AngularJS based UI solutions and apply our theme to that instead. – Duane Haworth Jun 13 '14 at 19:50
  • Well, that's how I would do it, which doesn't mean you should as well. :) You might find this question and its answers useful, it's about "thinking in Angular", I think it might partly explain why I said all that in the first comment: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 – Shomz Jun 13 '14 at 19:54
  • 1
    Thank you for your advice and the link. I'll step outside my comfort zone and wrap my head around the "Thinking in Angular" concept and go down the right path instead of the easier (so far) path. – Duane Haworth Jun 13 '14 at 20:02

0 Answers0