Wijmo UI for the Web
AngularJS and wijaccordion
Wijmo User Guide > AngularJS Directives > AngularJS and wijaccordion
Show All
Hide All

In this Angular getting started guide, you'll learn how to use the wijaccordion in an HTML project using HTML markup, jQuery script, and AngularJS directives.

For more complex samples that have the controller and model in separate files, see Wijmo Charts in the AngularJS Directive Gallery on our web site.

  1. To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension. Notice that the <HTML> and <body> tags are different from our usual tags.
    • The <HTML> tag is marked as an Angular app with the ng-app directive, in our script, we will specify that it uses Wijmo.
    • The <body> tag is used to define the scope of the Angular controller that we create. You can use another tag such as a <div> for the scope, but for our purposes, we will use the entire body. The ng-controller directive specifies the controller to use within this scope.

    Drop down and copy markup

    Paste in your favorite text editor.
    Copy Code 
    <!DOCTYPE HTML>
<HTML ng-app="MyApp">
<head>
</head>
<body ng-controller="MyController">
</body>
</HTML>
  2. Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn. Along with our usual references, we add two script references for Angular that must come after the jQuery references, so they are the last two lines:
    • One is for AngularJS itself.
    • The other is for Wijmo's Angular javascript integration library.

    Drop down and copy references to paste inside the head tags

    References
    Copy Code 
    <!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmo Scripts -->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>

<!-- Angular -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20161.90.min.js"></script>
  3. Within the <head> tags, below the references, add the following script to set the app to use Wijmo, and to create a simple controller with a $scope parameter to control data context.
    Script
    Copy Code 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {}
</script>
  4. Add the following markup within the <body> tags to create the widget. To see how this is done in jQuery without Angular, see Accordion Quick Start.
    • We use a <wij-wijaccordion> directive to create the widget, and set several options as attributes within the element:
      • We set the expandDirection option (expand-direction directive) to "right" so that the items expand to the right instead of downward.
      • We set the event option to "mouseover" so that the items expand when you mouse over them instead of requiring a click.
    • We use nested elements in the markup to set the headers and contents of the accordion items.
      • We use <h2> elements for the headers.
      • We use <div> elements for the contents of each item.
    Markup
    Copy Code 
    <wij-accordion expand-direction="right" event="mouseover">
        <h2>P<br>a<br>g<br>e<br> <br>1</h2>
        <div><img src="Images\wijmo_logo.png">
Sloptingle zung.</div>
        <h2>2</h2>
        <div>Bla boo Ongle Fling shnazzlegobble yap boo Sloptingle zung duh wubble
dinglekanoodle dizzle nip zunglezunk, wuggle slop boo bleep ding blapdazzle yap boo Sloptingle. Ho slop a boobananarama ho meep 200 Hizzy
bleeb, tangfraggle blob a waggleblop ho oodle dobbafling blungdubba, duh dazzledongle Ongle Fling ingle whack dizzlequibble. Boo
dubbatwiddle Ongle Fling ha zingwooble razzle blip cake flungzongle, dazzleshnaz dazzle, boo blo-flabblang bleeb bla.</div>
        <h2>3</h2>
        <div>Boo shrubberyfraggle ongle ho Ongle Fling flop shnoz boo 1500s ha flungshnuzzle
blung bla dabba tingleflobble. Bleeblo 1.10.32 bla 1.10.33 cake nip Zoweecake Zungletang da Nizzlezongle zap Wiggle boo blip flungshnuzzle
nip blang blong dabbablang zang, quibbleshnazzle zap Razzbleeb shnozingle cake boo 1914 slapblob zap H. Shnazbleeb.</div>
        <h2>4</h2>
        <div>Dee zung... tang a blippity onglezunk. Ho oodely blopping zuppity bam blong dee
blingity blupboo. Nip blobbity dobbawheezer! Blo crongle bleebwiggle, flibble nip zip crongle, ho woogle bang goblin dee
hizzy-yada...goblin roo yap! Bam da bananarama hizzy flibbity zongity tizzle izzlezungle? Wooble twaddle dee flong ha flup? Flee loo razz
flee? Flibbity weeblequibble.</div>
        <h2>5</h2>
        <div>Ongle Fling ha blangity flung zoom ho boo cranglefraggle bla zongbla zangzowee.
Ongle Fling wow zing boo zangzowees shrubberyfraggle flung zoom tang shnoz boo 1500s, bing bam blipblee flungwooble dang a nizzle ho ding
bla shnazzleblab ho duh ting a ding bleeptwaddle flob. Ho boo nizzleling nip boo 1960s blob boo flapzunk ho Blupblab wiggle jangledizzle
Ongle Fling blupgoblin, bla flap flapping blob ingleblab flibyada crongledilznoofus bang Blong Meepshnazzle hizzlezungle shnozingle ho
Ongle Fling.</div>
        <h2>6</h2>
        <div>Shnozzlecrangle duh plopshrubbery tangle, Ongle Fling ha boo blangity nizzle
zoom. Ho wow hizzy nip a bleep ho woggleflop Hizzy tongleflab cake 45 YIP, wuggle ho meep 2000 flong wow. <br><img
src="http://wijmo.com/files/img/icons/widget/Accordion.png"></div>
        <h2>7</h2>
        <div>Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo
flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle
funkzonk ho blatwiddle, nip dinglezoom duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack Razzbleeb.
Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo
bang). <a href="http://bff.orangehairedboy.com/">Blippity Fling-Flang by orangehairedboy</a></div>
 </wij-accordion>
  5. Save your HTML file and open it in a browser. The widget appears like the following live widget.
    MISSING WIDGET TYPE: The "Live Widget" Widget Type could not be found. The "Live Widget" Widget Type may have been deleted since this Widget was created.
See Also
Getting Started with AngularJS

Reference

wijaccordion API
expandDirection Option
event Option

Widgets

Accordion Quick Start

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page