It's no secret that Google is introducing the so-called material design throughout its products. Like any other style, he has supporters and opponents. I will not touch on these disputes. If you like this approach, Google has prepared a complete specification and feature description: Material Design .

For angularjs lovers, a library has appeared with a set of directives that implement graphic components and allow you to create markup in accordance with the principles of material design. About her and the story will go.

I will try to briefly show some features and disadvantages, and also show a small application for demonstration.

What we have?

1. Ready-made components:

A lot of ready-made angularjs directives for various components: buttons, switches, tabs. I will not list everything, all this is well covered in the documentation , I will show only the basic principle:

Do you need a round button?



We use a ready-made directive, i.e. write:

If you need to add a tooltip, everything is also provided:

        Photos
      

Need a switch?

    Switch 1: {{ data.cb1 }}
  
    Switch 2 (md-warn): {{ data.cb2 }}
  
    Switch (Disabled)
  
    Switch (Disabled, Active)
  
    Switch (md-primary): No Ink
  

All this is conveniently associated with data:

.controller('SwitchDemoCtrl', function($scope) {
  $scope.data = {
    cb1: true,
    cb4: true
  };
});

Conveniently? Of course! .. But only when you have enough standard options, which are not so many. Come in to make some kind of feature - and immediately all the pluses are lost.

2. Layout

In order to create adaptive layout , almost everything necessary is provided. You can create columns, rows, nest these elements in each other. You can specify how to display the element with different screen sizes, all this is implemented quite conveniently. I recommend to familiarize with examples .

3. Themes

Another feature is the ability to describe topics. Themes can be changed dynamically using directives or in the controller. Initially, themes have already been described for all the primary colors used in Material Design. More details .

Application example

The best way to understand the advantages and disadvantages of something is to use it. I did a small demo project. This is a small application, here I did not use the remote REST service [accordingly, the changes you make will not be shown anywhere] to focus directly on angularjs and the capabilities of material-angular.

I will make a simple editor in which, by clicking on the floating button, I can add a task, selecting which can be marked, after which they will be transferred to the archive.


live demo
project on github

First, create an angular project based on angular-seed. Here I will not talk about ngRroute and ngView, who worked with angularjs - they know this (if you are not familiar with angularjs, I ask here ).

We will need the top toolbox:



For these purposes, an appropriate element is provided:

          Меню
        
      Список задач 
    

You also need to make a pull-out menu on the left, for this, too, everything is provided:

Меню {{page.discription}} 

To control the opening, we can use the following code:

.controller('MainCtrl', function($scope, $timeout, $mdSidenav) {
  $scope.toggleRight = function() {
    $mdSidenav('left').toggle();
  };
...
});

Thus, we got the main frame. Now the content is the part that will change as you move between pages. Our view, in which I will display the list of tasks:



You can either immediately mark the task as completed, or when you hover over the circle, a checkbox appears and we can mark several records at the same time, after selecting at least one record, the top toolbox changes its appearance. Since the main toolbox is not in view, the decision was made to simply display another toolbox on top of the one specified in the framework.



Adding new items. It was decided to call a dialog box in which you can set parameters.
Here I will explain some feature that allows you to control windows very flexibly. Using this framework, you can create both simple and complex windows: for this, a separate html page is created, which is a template for a modal window.



When creating your own window for control, a controller is created that will process and transmit data from the window.

     Отмена
    
      Добавить
    

Window controller controller code:

function DialogController($scope, $mdDialog) {
 ...
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

Then the window itself can be called up in the code as follows:

$mdDialog.show({
      controller: DialogController,
      // вот здесь указывается путь к странице описывающей вид нашего модального окна
      templateUrl: 'dialog.tmpl.html', 
      targetEvent: ev,
    })
    .then(function(answer) {
    // answer это то что было передано из нашего окна 
    // и здесь происходит вся последующая обработка данных
});

I did not describe in detail how everything is implemented, so as not to pile up a bunch of fairly simple code, I only highlighted points regarding material angular. You can look at everything else on github .

Impressions and Conclusions

Initially, I thought that there was a great opportunity to develop angular applications with material design, but after a bit of work I can definitely say: it's too early to use (at the time of writing version 0.6). It contains many minor bugs, some elements are displayed differently in different browsers and constantly have to adjust the styles manually.

At the moment, there are many display problems in various browsers. There are many problems (I encountered when writing a demo project), I will show only a few (these are examples from the official website of the project, open in different browsers).

Button icons:

(Google Chrome):


(Internent Exprorer 11):


Dialogs:

(Google Chrome):


(Internent Exprorer 11):


It does not make sense to show the jambs further, I think there are, and there are a lot of them, which means that you will have to manually correct everything.

Also, the disadvantages include the fact that nothing has been done of the day to support various animations. Material Design pays a lot of attention to this issue . But all this you have to do.

It is still difficult to say how shortcomings will be fixed soon, but at this stage, angular material is clearly not ready for use.

References

• My demo project
• Project source code
• Material Angular Project Site
• Formal Description of Material Design