javascript - Material Design in Angular won't work -
i have problem angular material including. i've installed angular-material bower in angular project , included scripts , stylesheet. angular v1.4.1 , angular material 0.10.0. there wrong dependency?
var app = angular.module('startapp', ['ngmaterial' ]); app.controller('maincontroller', ['$scope', function($scope) { $scope.title = 'web page'; $scope.array = [{ name: 'data 1', duration: '01:42', creationdate: new date('2014', '03', '08') }, { name: 'data 2', duration: '00:58', creationdate: new date('2014', '03', '08') }, { name: 'data 3', duration: '02:45', creationdate: new date('2014', '03', '08') }]; }]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>web page</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- place favicon.ico , apple-touch-icon.png in root directory --> <link rel="stylesheet" href="bower_components/angular-material/angular-material.css"> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild --> </head> <body ng-app="startapp"> <md-button>asd</md-button> <!--[if lt ie 7]> <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- main content --> <div class="main" ng-controller="maincontroller"> <div class="container"> <h1> {{title}} </h1> <div ng-repeat="data in array" class="col-md-6"> <p class="title">{{data.name}}</p> <p class="title">{{data.duration}}</p> <p class="title">{{data.creationdate | date}}</p> </div> </div> </div><!-- end main content --> <!-- include angular material --> <script src="bower_components/angular-material/angular-material.js"></script> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script> <script src="bower_components/angular-animate/angular-animate.js"></script> <script src="bower_components/angular-cookies/angular-cookies.js"></script> <script src="bower_components/angular-resource/angular-resource.js"></script> <script src="bower_components/angular-route/angular-route.js"></script> <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> <script src="bower_components/angular-touch/angular-touch.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <!-- controllers --> <script src="scripts/controllers/main.js"></script> <script src="scripts/controllers/about.js"></script> <!-- modules --> <script src="scripts/app.js"></script> <!-- endbuild --> </body> </html>
clean javascript libraries, order important!
- jquery.js
- angular.js
- all angular sub modules
- your application scripts
var app = angular.module('startapp', ['ngmaterial' ]); app.controller('maincontroller', ['$scope', function($scope) { $scope.title = 'web page'; $scope.array = [{ name: 'data 1', duration: '01:42', creationdate: new date('2014', '03', '08') }, { name: 'data 2', duration: '00:58', creationdate: new date('2014', '03', '08') }, { name: 'data 3', duration: '02:45', creationdate: new date('2014', '03', '08') }]; }]);<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>web page</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <!-- place favicon.ico , apple-touch-icon.png in root directory --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> </head> <body ng-app="startapp"> <md-button>asd</md-button> <!--[if lt ie 7]> <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- main content --> <div class="main" ng-controller="maincontroller"> <div class="container"> <h1> {{title}} </h1> <div ng-repeat="data in array" class="col-md-6"> <p class="title">{{data.name}}</p> <p class="title">{{data.duration}}</p> <p class="title">{{data.creationdate | date}}</p> </div> </div> </div><!-- end main content --> <!-- include angular material --> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://code.angularjs.org/1.4.1/angular.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> <!-- build:js(.) scripts/vendor.js --> <!-- endbuild --> </body> </html>
Comments
Post a Comment