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

In this Angular getting started guide, you'll learn how to use the Ribbon widget 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 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.20183.140.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.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.20183.140.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 Ribbon Quick Start. We use a <wij-ribbon> directive to create the widget, and nest a number of elements inside to create the tabs, groups, and buttons.
    • An unordered list <ul> element with two line items <li> creates the tabs.
    • Each line <li> item has a hyperlink to the tab specified in the following <div> elements.
    • A <div> element for each tab contains all of the groups and buttons for the tab.
    • An unordered list <ul> inside each tab contains all of the groupings.
    • Each line item <li> is a group, and a <div> just inside the ending tag for the line item adds the grouping label.
    • A large button is created using a <button> with the bigbutton class specified.
    • Rows of smaller buttons are create using <span> elements with nested <button> elements.
    • Drop-down buttons are created inside a <div> element with the dropdownbutton class specified.
    • Inside the <div>, we nest a <button> and an unordered list <ul> with radio <input> elements and labels for each list item.
    • For the row of formatting buttons, we use a <span> element with the list class specified, and nest checkbox <input> elements for each button so that users can select more than one.
    Markup
    Copy Code 
    <wij-ribbon id="ribbon" style="width: 500px;">
    <ul>
        <li><a href="#FormatTab">Format Tab</a></li>
        <li><a href="#CustomizeTab">Customize Tab</a></li>
    </ul>
    <div id="FormatTab">
        <ul>
            <li id="actiongroup">
                <button title="Save" class="wijmo-wijribbon-bigbutton" name="save">
                    <div class="wijmo-wijribbon-save"></div>
                    <span>Save</span>
                </button>
                <span class="wijmo-wijribbon-list">
                    <button title="Undo" class="wijmo-wijribbon-undo" name="undo"></button>
                    <button title="Redo" class="wijmo-wijribbon-redo" name="redo"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Preview" class="wijmo-wijribbon-preview" name="preview"></button>
                    <button title="Clean up" class="wijmo-wijribbon-cleanup" name="cleanup"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Cut" class="wijmo-wijribbon-cut" name="cut"></button>
                    <button title="Copy" class="wijmo-wijribbon-copy" name="copy"></button>
                    <button title="Paste" class="wijmo-wijribbon-paste" name="paste"></button>
                    <button title="Select All" class="wijmo-wijribbon-selectall" name="selectall"></button>
                </span>
                <div>Actions</div>
            </li>
            <li id="fontgroup">
                <div title="Font Name" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Name" name="fontname">Font Name</button>
                    <ul>
                        <li>
                            <input type="radio" id="fontNameArial" name="fontname"/>
                            <label for="fontNameArial" id="fn1" title="Arial">Arial</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameCourier" name="fontname"/>
                            <label for="fontNameCourier" id="fn2" title="Courier New">Courier New</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameTimes" name="fontname"/>
                            <label for="fontNameTimes" id="fn3" title="Times New Roman">Times New Roman</label>
                        </li>
                    </ul>
                </div>
                <div title="Font Size" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Size" name="fontsize">Font Size</button>
                    <ul>
                        <li>
                            <input type="radio" id="fontSizeSmall" name="fontsize"/>
                            <label for="fontSizeSmall" id="small" title="Small">Small</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeMedium" name="fontsize"/>
                            <label for="fontSizeMedium" id="medium" title="Medium">Medium</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeLarge" name="fontsize"/>
                            <label for="fontSizeLarge" id="large" title="Large">Large</label>
                        </li>
                    </ul>
                </div>
                <span class="wijmo-wijribbon-list">
                    <button title="Background Color" class="wijmo-wijribbon-bgcolor" name="backcolor"></button>
                    <button title="Font Color" class="wijmo-wijribbon-color" name="fontcolor"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                           <input type="checkbox" id="fontStyleBold"/>
                           <label for="fontStyleBold" id="bold" title="Bold" class="wijmo-wijribbon-bold"></label>
                           <input type="checkbox" id="fontStyleItalic"/>
                           <label for="fontStyleItalic" id="italic" title="Italic" class="wijmo-wijribbon-italic"></label>
                           <input type="checkbox" id="fontStyleUnderline"/>
                           <label for="fontStyleUnderline" id="underline" title="Underline" class="wijmo-wijribbon-underline"></label>
                           <input type="checkbox" id="fontStyleStrikeThrough"/>
                           <label for="fontStyleStrikeThrough" id="strike" name="strikethrough"title="Strikethrough" class="wijmo-wijribbon-strike"></label>
                           <input type="checkbox" id="fontStyleSubscript"/>
                           <label for="fontStyleSubscript" id="subscript" title="Subscript" class="wijmo-wijribbon-sub"></label>
                           <input type="checkbox" id="fontStyleSuperscript"/>
                           <label for="fontStyleSuperscript" id="superscript" title="Superscript" class="wijmo-wijribbon-sup"></label>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Template" class="wijmo-wijribbon-template" name="template"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="RemoveFormat" class="wijmo-wijribbon-removeformat" name="removeformat"></button>
                </span>
                <div>Font</div>
            </li>
        </ul>
    </div>
    <div id="CustomizeTab">
        <ul>
            <li>
                <div title="Table" class="wijmo-wijribbon-splitbutton">
                    <button title="customize button" name="customcommand">Click Me</button>
                </div>
                <div>Customize</div>
            </li>
        </ul>
    </div>
</wij-ribbon>
  5. Within the <head> tags, above the script to initialize the widget, set the size of the groups on the Format Tab using CSS.
    Style
    Copy Code 
    <style type="text/css">
    #actiongroup
    {
        width: 200px;
    }
    #fontgroup
    {
        width: 250px;
    }
</style>
  6. 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

Widgets

Ribbon Quick Start

Reference

wijribbon API

Concepts

Main Ribbon Elements
Ribbon Buttons
Button Icons

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page