Polymer is Kick Ass, but only works on bleeding edge latest browsers & very limited in reach. A future adoption is always on the card, but now I think it’s too early to target for a production App
Interesting, but why define angular.module() twice?
It’s not defined twice. When you use angular.module without a second parameter, it will return an instance of an existing module.
Databinding is very easy. I made a demo ionic integrated with ploymer (I call it polyonic). First impression (I am not done yet ) can be seen here http://www.osmanmrzljak.com/polyonic/index2.html#/tab/account . As you can see ploymer buttons with z-shadows , databinding with rootScope and showing paper-toast on button clicks.
When I finish this , I will post article about “how to to this, en pros en cons” and the source code.
This is my first impression about ionicframwork and polymer http://osmanmrzljak.blogspot.com/2014/07/materials-design-in-mobile-apps-with.html (see at least result and conclusion).
I said once Polymer + ionic = polyonic. Not even realizing that Pascal already got same idea. He already made a start https://github.com/Polyonic
According to this post https://plus.google.com/+AngularJS/posts/8LHKCLnm6Ji it looks like Ionic is working with the Angular team.
They site this http://github.com/angular/material/ and offer a demo at http://material.angularjs.org
Has anything new happened with this?
The TOP contributor to the Angular implementation of Material design is Andrew Joslin, who is an Ionic team member.
But I haven’t seen Ionic UI update with Material Design. Keen to know how both align. Is there a new version of Ionic, with Material UI in the pipeline?
I have been using Angular Material along with Ionic, and it works great!
Hi prabhu_108, can you explain us how to use material design with ionic ?
Thanks.
M.
check this post
Here are the scripts to include;
<!-- material design scripts -->
<script src="https://rawgit.com/hammerjs/hammer.js/2.0.4/hammer.min.js"></script>
<script src="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular-aria/v1.3.0/angular-aria.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular-animate/v1.3.0/angular-animate.min.js"></script>
Here is the stylesheet to include:
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.css">
You also need to be on the beta 14 version of ionic, so include these:
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
(of course, you can download and reference your own copies rather than referencing the online versions)
Then you should be able to use the angular material components in your views, for example:
<md-button class="md-raised md-primary ng-click="login()"><i class="icon ion-social-facebook"></i> Login with Facebook</md-button>
Hi prabhu_108, I have tried with your code but I can not see button in Material Design.
For test I have create a clean app with:
$ ionic start md
$ ionic platform add android
$ ionic browser add crosswalk (I want to try this mobile “browser”)
My Index.html is this:
<!-- material design scripts -->
<script src="https://rawgit.com/hammerjs/hammer.js/2.0.4/hammer.min.js"></script>
<script src="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular-aria/v1.3.0/angular-aria.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular-animate/v1.3.0/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.css">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
And this my html with your test code:
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
<br>
<md-button class="md-raised md-primary ng-click="login()"><i class="icon ion-social-facebook"></i> Login with Facebook</md-button>
</div>
</div>
I see the F icon with the “Login with Facebook” written, but no material design button.
I have checked in developer console if all files are loaded and there is no loading error. JS and CSS are all loaded.
Where is my error ?
Thanks.
M.
Could be the order of CSS files
Also, make sure you inject it:
angular.module('myApp', ['ionic', 'ngMaterial'])
check this codepan
Hi @prabhu_108,
Thanks for the post.
Will the Ripple effect work on devices running Android < 4.4 ?
And, Is it necessary to include “hammer.js” and "angular-aria.min.js" also to make it work locally?
yes it is necessary
Have you experienced any issue with ui-sref on on iOS device?
somehow I need to convert all my to for ui-sref to work
Be sure to check out the following ionic forum thread with using the latest ng-material with Ionic. Theres an open issue on ng-material’s github and it’s been noted by the team and added to the 0.9.0 milestone as of yesterday.