Use Widgets in an AngularJS Mobile App

DevExtreme comes with several AngularJS-based application templates utilizing DevExtreme UI widgets. These templates allow you to start developing a mobile single-page application quickly. In this tutorial, you will learn how to use the AngularJS SlideOut Application template. In this template, the SlideOut widget is used as a global navigation control. You will modify this template and get an application that allows end users to see a schedule for each week day.

See Also
  • To learn widget concepts and feature overviews, refer to the Widget Categories section within the UI Widgets guides.
  • To find a full list of DevExtreme UI widgets, refer to the Reference section.
Download Code

Application Map

Before implementing an application, draw an application map to better understand which views you need and what functionality you wish to include.

New Project Dialog

Create an Application Project

Use an SlideOut AngularJS Application project template to create a DevExtreme application. You can find this application template in the Application Templates | AngularJS | SlideOut folder of the DevExtreme Mobile zip archive.

Run the application in a browser. Use any web server (Apache HTTP Server, IIS or any other). As you can see, the application has two views accessible from the slide-out menu that serves as the application's global navigation control.

Return to the application code. Investigate it to be aware of how the application is built. Read the Application Templates | AngularJS Approach topic where this application template is described.

Main Application Page

The main application page (implemented in the index.html file) - contains the SlideOut widget. This widget serves as a global navigation control in the application. Items in the slide-out menu provide access to the root application views. When clicking a menu item, a corresponding view is displayed. In this application template, the "home" and "about" views are displayed from the slide-out menu.

The only thing that you should do in the application page code is to change the application's title to "Week Schedule".

HTML
<head>
    <title>Week Schedule</title>
</head>

Week View

The "Week" view is the root application view. So it should be accessible from the slide-out menu. Use the "Home" view as a template for the "Week" view. Rename the "Home" view to "Week" in the following places.

  • Rename the partials/home.html file to partials/week.html.

  • In the js/controllers.js file, rename the "HomeCtrl" controller to "WeekCtrl".

    JavaScript
    angular.module('Application1.controllers', [])
        //...
        .controller('WeekCtrl', function() {
        })
        //...
  • In the js/services.js file, modify a configuration of the "Home" navigation item - set the title option to 'Week', text - to 'Week' and uri - to '/week'.

    JavaScript
    angular.module('Application1.services', [])
        .value('navigationItems', [
            {
                title: 'Week',
                text: 'Week',
                uri: '/week'
            },
            {
                title: 'About',
                text: 'About',
                uri: '/about'
            }
        ])
        //...
  • In the js/app.js file, modify a configuration of the route to the "Home" view - set the templateUrl option to 'partials/week.html', controller - to 'WeekCtrl' and controllerAs - to 'week'.

    JavaScript
    angular.module('Application1', [
            'ngRoute',
            'Application1.services',
            'Application1.controllers',
            'dx'
        ])
        .config(['$routeProvider', function($routeProvider) {
            $routeProvider
                .when('/week', {
                    templateUrl: 'partials/week.html',
                    controller: 'WeekCtrl',
                    controllerAs: 'week'
                })
                .when('/about', {
                    templateUrl: 'partials/about.html',
                    controller: 'AboutCtrl',
                    controllerAs: 'about'
                })
                .otherwise({ redirectTo: '/week' });
        }]);

Open the partials/week.html file. Implement the "Week" view markup. Leave the Toolbar widget in this view, but replace the remaining content with the List widget. Use the dx-list directive to add this widget.

HTML
<div ng-include="'partials/toolbar.html'"></div>
<div class="view-content" dx-list="week.listOptions"></div>

Define the widget's configuration object within the "Week" controller in the following manner.

  • List Data Source
    To make this example simple, define data for the "Week" view's list widget locally. Add the "scheduleData" service to the application module.

    JavaScript
    angular.module('Application1.services', [])
        //...
          .value('scheduleData', [
            {
                dayOfWeek: 'Monday',
                classes: [
                    {
                        startTime: '8:30',
                        endTime: '9:45',
                        classTitle: 'Tech Lab'
                    },
                    {
                        startTime: '10:00',
                        endTime: '11:15',
                        classTitle: 'Exploratory'
                    },
                    {
                        startTime: '11:20',
                        endTime: '12:25',
                        classTitle: 'Motor'
                    },
                    {
                        startTime: '12:30',
                        endTime: '1:25',
                        classTitle: 'Lunch & Recess'
                    },
                    {
                        startTime: '1:30',
                        endTime: '2:55',
                        classTitle: 'Language Arts / Social Studies'
                    }
                ]
            },
            //...
        ]);

    Then, add the "scheduleData" service to the "Week" controller's dependencies and specify the list's dataSource option using this service.

    JavaScript
    angular.module('Application1.controllers', [])
        //...
        .controller('WeekCtrl', ['$location', 'scheduleData', function($location, scheduleData) {
            var items = $.map(scheduleData, function(item, index) {
                return {
                    index: index,
                    text: item.dayOfWeek
                }
            });
            this.listOptions = {
                items: items
            };  
        }])
        //...
  • List Item Click
    Use the onItemClick configuration option to specify a function that navigates to the "Day" view (it will be added further). Add the AngularJS $location service to the "Week" controller's dependencies and use it within the function to navigate to the "Day" view. Pass the index of the chosen day as a navigation parameter so that data on the chosen day is available within the "Day" view's controller.

    JavaScript
    angular.module('Application1.controllers', [])
        //...
        .controller('WeekCtrl', ['$location', 'scheduleData', function($location, scheduleData) {
            var items = $.map(scheduleData, function(item, index) {
                return {
                    index: index,
                    text: item.dayOfWeek
                }
            });
            this.listOptions = {
                items: items,
                    onItemClick: function(e) {
                    $location.path('/day/' + e.itemData.index);
                }
            };  
        }])
        //...

Day View

Add the "Day" controller to the controllers.js file. This controller will provide a schedule on the currently displayed day for the "Day" view. The index of the currently displayed day is passed as a navigation parameter in the uri navigating to the "Day" view. Get this index by using the AngularJS $routeParams service within the "Day" controller.

JavaScript
angular.module('Application1.controllers', [])
//...
.controller('DayCtrl', ['$routeParams', 'scheduleData', function($routeParams, scheduleData) {
    this.schedule = scheduleData[$routeParams.dayId];
}]);

Add the day.html file to the partials folder to define the "Day" view's HTML template. Add a toolbar and a field set to the view.

  • Toolbar
    Use the dx-toolbar directive to add the Toolbar widget. To define toolbar items, use the dataSource configuration option. Assign an array of two items. One of these items is a configuration object for displaying a toolbar button, the other - for displaying a view title on the toolbar.

    HTML
    <div dx-toolbar="{ items: [ {
            location: 'before',
            widget: 'dxButton',
            options: {
                text: 'Week',
                type: 'back',
                onClick: day.getBackToWeek
            },
        },
        {
            location: 'center',
            text: day.schedule.dayOfWeek
        } ] }">
    </div>
  • Field Set
    Use the field-set DevExtreme CSS class to display the schedule of the currently displayed day.

    HTML
    <div class="dx-fieldset">
        <table class="schedule">
            <tr>
                <td></td>
                <td>Times</td>
                <td>Classes</td>
            </tr>
            <tr ng-repeat="class in day.schedule.classes">
                <td>{{$index + 1}}.</td>
                <td class="time-field">{{class.startTime}} - {{class.endTime}}</td>
                <td>{{class.classTitle}}</td>
            </tr>
        </table>
    </div>

    In addition, you will need to define a pare of CSS classes within the css/app.css file.

    CSS
    .schedule td { 
        padding: 10px;
    }
    .time-field {
        width: 40%;
    }
    .about-text {
        padding: 5px 10px;
    }

Configure the /day/:dayId route within the application module configuration (in the js/app.js file) to navigate by the 'partials/day.html' URL and display the "Day" view managed by the "Day" controller.

JavaScript
angular.module('Application1', [
        'ngRoute',
        'Application1.services',
        'Application1.controllers',
        'dx'
    ])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/week', {
                templateUrl: 'partials/week.html',
                controller: 'WeekCtrl',
                controllerAs: 'week'
            })
            .when('/about', {
                templateUrl: 'partials/about.html',
                controller: 'AboutCtrl',
                controllerAs: 'about'
            })
            .when('/day/:dayId', {
                templateUrl: 'partials/day.html',
                controller: 'DayCtrl',
                controllerAs: 'day'
            })      
            .otherwise({ redirectTo: '/week' });
    }]);