Material Design and AngularJS
It's no secret that Google everywhere in their products introduces the so-called material design. Like any other style, he has supporters and opponents. I will not deal with these disputes. If you like this approach, Google has prepared a full specification and description of features: Material Design .
For fans of angularjs, 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 goes.
I will try to briefly show some features and disadvantages, as well as show a small application for demonstration.
')
1. Finished components:
Many ready-made angularjs directives for various components: buttons, switches, tabs. I will not list all; 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 directive, i.e. write:
If you need to add a tooltip, everything is also provided:
Need switches?
All this is conveniently associated with the data:
Conveniently? Of course! .. But only when you have enough standard options, which are not so much. Come to make some kind of feature - and immediately all the advantages are lost.
2. Markup
In order to create adaptive markup, almost everything needed is provided. You can create columns, lines, put these elements into each other. You can specify how to display the element with different screen sizes, all this is implemented quite conveniently. I recommend to get acquainted with examples .
3. Themes
Another feature is the ability to describe topics. Themes can be changed dynamically using directives or in the controller. Initially, the themes are already described for all the primary colors used in Material Design. More details .
The best way to understand the advantages and disadvantages of something is to use it. I made a small demo project. This is a small application, here I did not use the remote REST service [respectively, the changes being made will not be displayed anywhere] to focus directly on angularjs and material-angular capabilities.
I will make a simple editor in which you can, by clicking on the floating button, add a task, selecting which ones you can mark, 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 you here ).
We need the top toolbox:
For these purposes, an appropriate element is provided:
You also need to make a sliding menu on the left, for this, too, everything is provided:
To control the opening, we can use the following code:
So we got the main frame. Now the content is the part that will change when moving between pages. Our view, in which I will display a list of tasks:
You can either immediately mark the task as completed, or when you hover the circle 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 the view, it was decided to simply display another toolbox on top of the one specified in the frame.
Adding new items. It was decided to invoke a dialog box in which parameters can be set.
Here I will explain some feature that allows you to manage windows very flexibly. This framework can create both simple windows and complex ones: for this, a separate html page is created, which is a template for a modal window.
When you create your own window for management, a controller is created that will process and transfer data from the window.
Window controller code:
Then the window itself can be called in the code as follows:
I did not begin to describe in detail how everything is implemented, so as not to pile up a bunch of fairly simple code, just to highlight points regarding material angular. Everything else you can look at github .
Initially, I thought that there was a great opportunity to develop angular applications with material design, but after a little work I can definitely say: it is still too early to use (at the time of writing version 0.6). There are many minor bugs, some elements are displayed differently in different browsers and constantly have to adjust the styles manually.
At the moment, a lot of problems with the display in various browsers. There are a lot of problems (I encountered it while writing a demonstration project), I’ll show only a few (these are examples from the project’s official website, opened in different browsers).
Button icons:
(Google Chrome):
(Internent Exprorer 11):
Dialog boxes:
(Google Chrome):
(Internent Exprorer 11):
I don’t have any sense to show shoals further, they exist, and there are many of them, which means that you have to manually correct everything.
Also, the disadvantages can be attributed to the fact that nothing has been done for supporting various animations. Material Design pays much attention to this issue . But all this will have to do for you.
It is difficult to say how soon the flaws will be corrected, but at this stage the angular material is clearly not ready for use.
For fans of angularjs, 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 goes.
I will try to briefly show some features and disadvantages, as well as show a small application for demonstration.
')
What we have?
1. Finished components:
Many ready-made angularjs directives for various components: buttons, switches, tabs. I will not list all; 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 directive, i.e. write:
<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile"> <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon> </md-button> If you need to add a tooltip, everything is also provided:
<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile"> <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon> <md-tooltip> Photos </md-tooltip> </md-button> Need switches?
<div class="inset" ng-controller="SwitchDemoCtrl"> <md-switch ng-model="data.cb1" aria-label="Switch 1"> Switch 1: {{ data.cb1 }} </md-switch> <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn"> Switch 2 (md-warn): {{ data.cb2 }} </md-switch> <md-switch ng-disabled="true" aria-label="Disabled switch"> Switch (Disabled) </md-switch> <md-switch ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb4"> Switch (Disabled, Active) </md-switch> <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink"> Switch (md-primary): No Ink </md-switch> </div> All this is conveniently associated with the 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 much. Come to make some kind of feature - and immediately all the advantages are lost.
2. Markup
In order to create adaptive markup, almost everything needed is provided. You can create columns, lines, put these elements into each other. You can specify how to display the element with different screen sizes, all this is implemented quite conveniently. I recommend to get acquainted with examples .
3. Themes
Another feature is the ability to describe topics. Themes can be changed dynamically using directives or in the controller. Initially, the themes are already described for all the primary colors used in Material Design. More details .
Sample application
The best way to understand the advantages and disadvantages of something is to use it. I made a small demo project. This is a small application, here I did not use the remote REST service [respectively, the changes being made will not be displayed anywhere] to focus directly on angularjs and material-angular capabilities.
I will make a simple editor in which you can, by clicking on the floating button, add a task, selecting which ones you can mark, 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 you here ).
We need the top toolbox:
For these purposes, an appropriate element is provided:
<md-toolbar md-theme="indigo" class="app-toolbar md-indigo-theme md-whiteframe-z2 fix-top" > <div class="md-toolbar-tools" tabindex="0"> <md-button class="menu-icon nornal-btn" ng-click="toggleRight()" aria-label="Toggle Menu"> <md-tooltip > </md-tooltip> <md-icon icon="img/icons/ic_menu_24px.svg"></md-icon> </md-button> </div> </md-toolbar> You also need to make a sliding menu on the left, for this, too, everything is provided:
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> <div ng-controller="LeftCtrl" ng-click="close()"> <md-toolbar md-theme="indigo"> <h1 class="md-toolbar-tools"></h1> </md-toolbar> <md-content > <a class="menu-item menu-sub-item md-menu-item" ng-click="menu.toggleSelectPage(page)" ng-repeat="page in menu.pages" ng-href="#{{page.url}}" md-highlight="menu.isPageSelected(page)" md-ink-ripple="#bbb"> <span > {{page.discription}} </span> </a> </md-content> </div> </md-sidenav> To control the opening, we can use the following code:
.controller('MainCtrl', function($scope, $timeout, $mdSidenav) { $scope.toggleRight = function() { $mdSidenav('left').toggle(); }; ... }); So we got the main frame. Now the content is the part that will change when moving between pages. Our view, in which I will display a list of tasks:
You can either immediately mark the task as completed, or when you hover the circle 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 the view, it was decided to simply display another toolbox on top of the one specified in the frame.
Adding new items. It was decided to invoke a dialog box in which parameters can be set.
Here I will explain some feature that allows you to manage windows very flexibly. This framework can create both simple windows and complex ones: for this, a separate html page is created, which is a template for a modal window.
When you create your own window for management, a controller is created that will process and transfer data from the window.
<div class="md-actions" layout="row"> <md-button ng-click="cancel()"> </md-button> <!-- --> <md-button ng-click="answer(todo)" class="md-primary"> </md-button> </div> Window 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 in the code as follows:
$mdDialog.show({ controller: DialogController, // templateUrl: 'dialog.tmpl.html', targetEvent: ev, }) .then(function(answer) { // answer // }); I did not begin to describe in detail how everything is implemented, so as not to pile up a bunch of fairly simple code, just to highlight points regarding material angular. Everything else you can look at github .
Impressions and conclusions
Initially, I thought that there was a great opportunity to develop angular applications with material design, but after a little work I can definitely say: it is still too early to use (at the time of writing version 0.6). There are many minor bugs, some elements are displayed differently in different browsers and constantly have to adjust the styles manually.
At the moment, a lot of problems with the display in various browsers. There are a lot of problems (I encountered it while writing a demonstration project), I’ll show only a few (these are examples from the project’s official website, opened in different browsers).
Button icons:
(Google Chrome):
(Internent Exprorer 11):
Dialog boxes:
(Google Chrome):
(Internent Exprorer 11):
I don’t have any sense to show shoals further, they exist, and there are many of them, which means that you have to manually correct everything.
Also, the disadvantages can be attributed to the fact that nothing has been done for supporting various animations. Material Design pays much attention to this issue . But all this will have to do for you.
It is difficult to say how soon the flaws will be corrected, but at this stage the angular material is clearly not ready for use.
Links
Source: https://habr.com/ru/post/247719/
All Articles