AngularJS and wijrating

In this Angular getting started guide, you'll learn how to use the Rating 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.

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>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

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.

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>

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>

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. We also add values for myTooltip in the scope to use for the content attribute in the second example of how to create a Rating widget in the markup.

Script	Copy Code
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) { $scope.myTooltip = ["Below Average", "Average", "Above Average", "Awesome", "Epic"]; } </script>

Script

Copy Code

<script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.myTooltip = ["Below Average", "Average", "Above Average", "Awesome", "Epic"];
    }
</script>

Add the following markup within the <body> tags to create the widgets. To see how this is done in jQuery without Angular, see Rating Quick Start.

We use a <wij-rating> directive to create the first widget, and nest <input> radio button elements for the stars and <label> elements for tooltips.
- We set the input element's id attribute to identify it and call it in the for attribute of the corresponding label element.
- We set the type attribute of each input element to radio.
- We set the checked attribute of the second input element to checked to set the rating to 2.
- We add the text to show in tooltiptext to each label element.
We use a <wij-rating> directive to create the second widget, and nest a <hint> element and set its content option to specify myTooltip from our controller.
- We set the value attribute to 3 to set the rating.
- We nest a hint element and set its content to use the text from the controller.

Markup	Copy Code
<p>This rating widget uses label elements for tooltip text on each star.</p> <wij-rating id="ratingRadio"> <label for="input1a">Below Average</label> <input type="radio" id="input1a" value="1" /> <label for="input2a">Average</label> <input type="radio" checked="checked" id="input2a" value="2" name="rating" /> <label for="input3a">Above Average</label> <input type="radio" id="input3a" value="3" name="rating" /> <label for="input4a">Awesome</label> <input type="radio" id="input4a" value="4" name="rating" /> <label for="input5a">Epic</label> <input type="radio" id="input5a" value="5" name="rating" /> </wij-rating> <p>This rating widget uses tooltips from the controller for tooltip text on each star.</p> <wij-rating value="3"> <hint content="myTooltip"></hint> </wij-rating>

Markup

Copy Code

<p>This rating widget uses label elements for tooltip text on each star.</p>
<wij-rating id="ratingRadio">
    <label for="input1a">Below Average</label>
    <input type="radio" id="input1a" value="1" />
    <label for="input2a">Average</label>
    <input type="radio" checked="checked" id="input2a" value="2" name="rating" />
    <label for="input3a">Above Average</label>
    <input type="radio" id="input3a" value="3" name="rating" />
    <label for="input4a">Awesome</label>
    <input type="radio" id="input4a" value="4" name="rating" />
    <label for="input5a">Epic</label>
    <input type="radio" id="input5a" value="5" name="rating" />
</wij-rating>
<p>This rating widget uses tooltips from the controller for tooltip text on each star.</p>
<wij-rating value="3">
    <hint content="myTooltip"></hint>
</wij-rating>

Save your HTML file and open it in a browser. The widget appears like the following live widget. Mouse over the stars to see the tooltip text.

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.

Reference

wijrating API

hint Option

Widgets

Rating Quick Start