Create AngularJS Mobile App in Visual Studio

DevExtreme comes with several AngularJS-based application project 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 dxSlideOut 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
  • If you are not going to use Visual Studio to develop DevExtreme mobile applications, follow the Use Widgets in an AngularJS Mobile App tutorial. It is similar to this one and allows you to get started with the DevExtreme application template based on the AngularJS and DevExtreme UI widgets outside of Visual Studio.
  • 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

From the main menu in Visual Studio, select File | New | Project... to invoke the New Project dialog.

New Project Dialog

In the Projects tree view on the left, select DevExtreme. In the Templates list view, select the DevExtreme XX.X AngularJS SlideOut Application template, specify the new solution's name ("Application1" in this example) and click OK. You will see a project with the specified name in the Solution Explorer. It includes the following.

Solution Structure

The DevExtreme XX.X AngularJS SlideOut Application template provides several features that are common for all DevExtreme project templates. To learn about these features, refer to the DevExtreme App Project Template topic.

Run the application in any browser to test the application template. The application will be shown by the simulator - one of the tools included with the DevExtreme VS extension. The simulator allows you to view an application on different devices using the required landscape and scale.

Run in Simulator

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 | Angular Approach topic where this application template is described.

Main Application Page

The main application page (implemented in the index.html file) - contains the dxSlideOut 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 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 dxToolbar widget in this view, but replace the remaining content with the dxList 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 dxToolbar 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: 'button',
            options: {
                text: 'Week',
                type: 'back',
                onClick: '#_back'
            },
        },
        {
            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' });
    }]);