Clever Geek Handbook

Angular Material + Telephony / Cordova

im trying to use google's Material Design (Angular Material) to develop an app using phonegap (so i pretend it works on iOS or other os)

why this code doesn't work:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="cordova.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
</head>
<body>

    <!-- Angular Material Dependencies -->
    <script src="http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<md-button>
  Button
</md-button>
<md-button href="http://google.com" class="md-button-colored">
  I'm a link
</md-button>
<md-button ng-disabled="true" class="md-colored">
  I'm a disabled button
</md-button>
  </body>
</html>

PLANKER

for both, cell phone / computer, it just displays as plkr = plain text = |

what i am doing wrong since ctrl c + ctrl v from the tutorial:

Any solution or fix?

nobody has worked with telephony + angular yet?

+3


source to share


3 answers


decision:

1) Moving all src / imports to <HEAD>

and

2) I forgot to add:



<script>
angular.module('myApp', [ 'ngMaterial' ]);
</script>

and what:

 <div ng-app="myApp" layout="vertical">
</div>

everything works now;)

+1


source


Don't use online sources to download Angular-stuff, upload files inside the project.

You can get it from Bower or Npm.



Also you can use seed:   https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed

0


source


Define Angular Material Dependencies BEFORE creating your Angular module:

  <html>
  <head>
   <script type="text/javascript" src="cordova.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">

        <!-- Angular Material Dependencies -->
        <script src="http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

        <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
    <script>
       angular.module('myApp', [ 'ngMaterial' ]);
    </script>
    </head>
    <body ng-app="myApp">


        <div layout="vertical">

    <md-button>
      Button
    </md-button>
    <md-button href="http://google.com" class="md-button-colored">
      I'm a link
    </md-button>
    <md-button ng-disabled="true" class="md-colored">
      I'm a disabled button
    </md-button>
    </div>
      </body>
    </html>
0


source






More articles:


All Articles