Shared Utilities / AngularJS Directives

New to Kendo UI for jQuery? Download free 30-day trial

Hybrid UI Integration

Starting with R2 2022, the Kendo UI team officially drops the support for AngularJS 1.x through Kendo UI for jQuery. The AngularJS related files and functionality are removed from the bundles and distribution in R3 SP1 2023. The last version that contains the files is R3 2023. This does not impact Kendo UI for Angular (2+) suite. If you still need to use AngularJS in your project, check this article that explains how to get the legacy files. For information regarding extended support for AngularJS, please visit Extended Long Term Support

As of the Kendo UI Q3 2014 release, the suite includes AngularJS directives for some of its Hybrid UI components such as the Application, View, SplitView, and ModalView.

In this context, the mobile views support AngularJS controllers, directives, and two-way data binding expressions.

Getting Started

The following example demonstrates how to use the Hybrid UI Application directive. By default, the kendo-mobile-application directive is set to the body element with ng-app.

<body kendo-mobile-application ng-app="foo">
    <kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
        <kendo-mobile-header>
            <kendo-mobile-nav-bar>
                <kendo-view-title></kendo-view-title>
            </kendo-mobile-nav-bar>
        </kendo-mobile-header>

         {{hello}} 
    </kendo-mobile-view>

    <script>
        angular.module("foo", [ "kendo.directives" ])
            .controller("MyCtrl", function($scope) {
                $scope.hello = "Hello World!";
            });
    </script>
</body>

Routing

The mobile application instantiates and maintains its own routing mechanism based on the router component which automatically matches and instantiates views when navigating. Unlike the ng-route, ng-view, and the ui-router implementations, the mobile application does not unload the previous view when navigating to the new one. Also, AngularJS routing mechanisms are not supported.

Controllers

If an ng-controller directive is set to the view element, the controller definition is executed each time the view is shown, matching the view show event.

Widgets

All directives may be used as elements or as attributes. If a directive is used as an element name, it is replaced with a standard HTML element once the directive is compiled. Each mobile widget features AngularJS on the Kendo UI demos website.

  • ActionSheet—The widget is instantiated from the kendo-mobile-action-sheet directive. The item actions are assigned with the k-action attribute and are resolved from the widget scope.
  • Button—The widget is instantiated from the kendo-mobile-button directive.
  • BackButton—The widget is instantiated from the kendo-mobile-back-button directive.
  • DetailButton—The widget is instantiated from the kendo-mobile-detail-button directive.
  • ButtonGroup—The widget is instantiated from the kendo-mobile-button-group directive.
  • Collapsible—The widget is instantiated from the kendo-mobile-collapsible directive. The inner markup follows the same convention as the non-Angular widget.
  • Drawer—The widget is instantiated from the kendo-mobile-drawer directive. Like the view, it calls the controller (if present) each time it is displayed.
  • MobileListView—The widget is instantiated from the kendo-mobile-list-view directive.
  • ModalView—The widget is instantiated from the kendo-mobile-modal-view directive. Like the view, it calls the controller (if present) each time it is displayed.
  • NavBar—The widget is instantiated from the kendo-mobile-nav-bar directive. The element displaying the view title is instantiated from the kendo-view-title directive.
  • PopOver—The widget is instantiated from the kendo-mobile-pop-over directive. The ng-controller directives may be set to the popover views.
  • Scroller—The widget is instantiated from the kendo-mobile-scroller directive.
  • ScrollView—The widget is instantiated from the kendo-mobile-scroll-view directive.
  • Switch—The widget is instantiated from the kendo-mobile-switch directive. The directive should be used as an attribute of an input element if the value should be submitted with a form.
  • TabStrip—The widget is instantiated from the kendo-mobile-tab-strip directive.
  • Application—The widget is instantiated from the kendo-mobile-application directive.
  • Touch—The widget is instantiated from the kendo-touch directive.
  • View—The widget is instantiated from the kendo-view directive. The header and footer elements may be instantiated from the kendo-mobile-header and kendo-mobile-footer directives, respectively.
  • SplitView—The widget is instantiated from the kendo-mobile-split-view directive. The panes are instantiated with the kendo-mobile-pane directive.
  • Layout—The widget is instantiated from the kendo-mobile-layout directive. The header and footer elements may be instantiated from the kendo-mobile-header and kendo-mobile-footer directives, respectively.

Attributes

To configure the hybrid widgets, you can use the k- prefixed attributes. For more information on the parsing of attributes, refer to the introductory article on AngularJS.

See Also

In this article
Related articles
Not finding the help you need? Improve this article