Creating an Off Canvas menu

Off Canvas menus are very common in web applications. In the age of mobiles, this is a flexible and useful component.

In the following recipe, we will see how to implement an Off Canvas directive.

You can find more information about the Off Canvas menu at https://github.com/dbtek/angular-aside.

Using Directives to Develop Interface Components

Getting ready

Let's create a folder to hold the entire project and name it interface-components. Inside the folder, open your terminal window and type:

yo angm

With the previous command, the application will be generated with all the baseline code that we will need to start.

At the time of writing this chapter, the currently stable AngularJS version was v1.4.2. So, the generator-angm uses this version to create our application.

Now, let's implement the following recipes using the home module that is already installed.

How to do it…

1. The first step is to install a new directive. Open your terminal window and type the following command:

bower install angular-aside --save

Due to some version issues, we need to perform some options before we proceed.

The following screenshot shows the options we need to choose:

Another very important point is the word --save at the end of the command. If we forget to include this, the next step will fail.

Chapter 6

2. On the terminal window, type the following command:

grunt injector

The following screenshot shows the result of the previous command:

In this step, skip the manual installation process covered in the previous chapter.

The Gruntfile has the task of taking care of it for us. As you can see in the previous screenshot, the generator already includes the CSS and JS files from the Angular-Aside directive to the index.htm file in the root of the application.

3. At this point, we have the directive ready to start, just check the index.html file to check if everything goes well.

href="/src/bower_components/angular-aside/dist/css/angular- aside.css">

4. Add the ngAside directive to the app.js file, like the following highlighted code:

angular.module('interfacecomponents', [ 'ngResource',

'ui.bootstrap', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ngAside' ])

Using Directives to Develop Interface Components

5. Let's replace the original code on home.html inside the home module with the following code:

<h1>{{ title }}</h1>

<button class="btn btn-default" ng-

click="openAside('left')">View Cart</button>

<hr>

Chapter 6

6. Replace the homeCtrl.js code with the following code:

'use strict';

/**

* @ngdoc function

* @name app.controller:HomeCtrl * @description

* # HomeCtrl

* Controller of the app */

angular.module('interfacecomponents')

.controller('HomeCtrl', ['$scope', '$aside', function ($scope, $aside) {

$scope.title = "Interface Components";

// Set default state of modal to close $scope.asideState = {

open: false };

// Activate the aside menu using the modal

$scope.openAside = function(position, backdrop) { // Change the default close state

Using Directives to Develop Interface Components

100

var modalInstance = $aside.open({

templateUrl:

'app/modules/shared/directives/offcanvas/aside.html', placement: position,

size: 'sm',

backdrop: backdrop, controller: 'AsideCtrl'

}).result.then(postClose, postClose);

} }]);

Now we need to create two files, one to hold the offcanvas HTML template and another for the aside controller. Let's do it.

7. Create a folder called directives inside the shared folder of the modules folder.

Create a folder called offcanvas inside the directives folder. Create a file called aside.html inside the offcanvas folder and place the following code:

<h3 class="modal-title">Shopping Cart</h3>

</div>

<p>

<button class="btn btn-primary">Checkout</button>

<button class="btn btn-warning" ng- click="cancel()">Cancel</button>

</div>

8. Create a file called asideCtrl.js inside the offcanvas folder and place the following code in it:

'use strict';

/**

* @ngdoc function

* @name app.controller:AsideCtrl * @description

* # AsideCtrl

* Controller of the app */

Chapter 6

101 angular.module('interfacecomponents')

.controller('AsideCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {

// Close modal

$scope.cancel = function () { $modalInstance.dismiss('cancel');

};

}]);

9. After all these steps, we have the following layout:

10. A pretty simple product layout. The offcanvas menu can be activated by pressing the View Cart button, as we can see on the following image:

11. Just open your terminal window and type grunt dev, and your default browser will open.

Using Directives to Develop Interface Components

102

How it works…

We used a lot of code to create this layout page, which is similar to an e-commerce page.

We used a combination of various directives, so let's understand what happened.

The installation process is very similar to the one we used in the previous chapters, except for the first step, where we need to choose some versions from AngularJS and other dependencies. This is because some versions are not 100 percent compatible with others.

This is common in large-scale applications, where we need to install different directives. As you know, AngularJS is growing fast and some packages don't stay up-to-date with the latest AngularJS version, so minor issues may occur.

The ngAside extends the Angular ui boostrap modal component and also depends on ui.bootstrap.modal. As we have already included ui.bootstrap in our project by default, this is not a problem.

The ngAside extends the modal with some new attribute position and uses all modal attributes available, as shown in the following block of code:

$scope.openAside = function(position, backdrop) { $scope.asideState = {

open: true,

position: position };

}

When modal is activated, we pass also the position inside the ng-click modal function:

ng-click="openAside('left')"

In the previous code, we can pass an optional backdrop as a second parameter:

ng-click="openAside('left', true)"

This way, we have a dark background under the aside menu, very similar to modal components, where we have a dark transparent background.

The home controller receives the $aside instance as a dependency:

.controller('HomeCtrl', ['$scope', '$aside', function ($scope,

$aside) {}

The instantiate method is the same for modal, except we use $aside.open instead of

$modal.open:

var modalInstance = $aside.open({

})

Chapter 6

103

In this example, we have set up an external template and controller for better customized options:

var modalInstance = $aside.open({

templateUrl:

'app/modules/shared/directives/offcanvas/aside.html', placement: position,

size: 'sm',

backdrop: backdrop, controller: 'AsideCtrl' })

Getting ready

How to do it…

How it works…

See also