Getting Started

28 Jun 20176 minutes to read

The AngularJS directives are usually included within the ej.widget.angular.min.js file and all these directives are usually packed together in a common module known as ejangular. For basic details on how to configure Syncfusion widgets in AngularJS framework, refer here.

To get start with the SpellCheck control in AngularJS framework, the following list of external dependencies are mandatory,

jQuery - 1.7.1 and later versions

Angular

The external AngularJS script file angular.min.js can also be accessed from the following installed location -

  • (installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\external

An another mandatory script is ej.widget.angular.min.js, which can be accessed from the specified location -

  • (installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\scripts\common
File

 Description/Usage
ej.core.min.js

 Must be referred always first before using all the JS controls.
ej.data.min.js

 Used to handle data operation and should be used while binding data to JS controls.
ej.spellcheck.min.js

 SpellCheck core script file.
ej.scroller.js

ej.button.js

ej.dialog.js

ej.menu.js

ej.listbox.js

ej.draggable.js

ej.globalize.js

 These files are referred for proper working of the sub-controls used within SpellCheck.

NOTE

SpellCheck uses one or more sub-controls, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the SpellChecker, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Script/CSS Reference

Create a new HTML file and include the below initial code.

  • HTML
    • <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title> </title>
    </head>
    <body>
    </body>
</html>

    Refer the CSS file from the specific theme folder to your HTML file within the head section. Refer the built-in available themes from here.

  • HTML
    • <head>
    <meta charset="utf-8" />
    <title>Getting Started - SpellCheck</title>
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
</head>

    Add links to the CDN Script files with other required external dependencies.

  • HTML
    • <head>
    <meta charset="utf-8" />
    <title>Getting Started - SpellCheck</title>
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>    
    <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/common/ej.widget.angular.min.js" type="text/javascript"></script>
</head>

    NOTE

    Uncompressed version of library files are also available which is used for development or debugging purpose and can be generated from the custom script here.

    Control Initialization

    The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you have to define your directives, services,filters and configurations.

    A controller is defined using ng-controller directive. Each controller accepts an object $scope which we pass as a parameter. This object is used to bind the controller with view.

    Properties can be bind to ejSpellCheck component using the prefix e- and particular property name.

    Add div element to create SpellCheck.

  • HTML
    • <div ng-controller="spellcheckCtrl">
    <div id="SpellCheck" contenteditable="true" ej-spellcheck e-dictionarysettings="dictionarySettings">
        Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum,Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.
    </div>
</div>

    Service Reference

    Assign the service method (CheckWords) path reference to the property dictionaryUrl, which is mandatory to check the spelling of the word.

    The CheckWords method will perform the splitting of target sentence into separate words and check each word is that an erroneous or not. If the word is erroneous fetching the possible suggestions for it and returns those details as a result.

  • HTML
    • <div ng-controller="spellcheckCtrl">
    <div id="SpellCheck" contenteditable="true" ej-spellcheck e-dictionarysettings="dictionarySettings">
        Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum,Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.
    </div>
</div>

    Add the following script to create the pass the dictionary settings values.

  • JAVASCRIPT
    • syncApp.controller('spellcheckCtrl', function ($scope) {
    $scope.dictionarySettings = {
		dictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords",
        customDictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary"
	};
});

    Spell Checking

    To spell check the content of the target element, you need to add one button and calling any one of the SpellCheck method showInDialog or validate by clicking the button to highlight the error words.

    The following code example depicts that checking the spelling of the target element through the “validate” method.

  • HTML
    • <div ng-controller="spellcheckCtrl">
    <div id="SpellCheck" contenteditable="true" ej-spellcheck e-dictionarysettings="dictionarySettings">
        Facebook is a social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo, Andrew McCollum,Dustin and Chris Hughes. The fouders had initially limited the websites membrship to Harvard students, but later expanded it to collges in the Boston area, the Ivy League, and Stanford Univrsity. It graually added support for students at various other universities and later to high-school students.
    </div>
    <button id="CheckSpell" ej-button e-text="Spell Check" e-click="checkErrors"></button>
</div>

    Add the following script to create the pass the dictionary settings values.

  • JAVASCRIPT
    • syncApp.controller('spellcheckCtrl', function ($scope) {
    $scope.dictionarySettings = {
		dictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/CheckWords",
        customDictionaryUrl: "http://js.syncfusion.com/ejServices/api/SpellCheck/AddToDictionary"
	};
    $scope.checkErrors = function (e) {
        var spellObj = $("#SpellCheck").data("ejSpellCheck");
        spellObj.showInDialog();
    }
});