Menu
So i have installed angular, angular-material, angular-aria, angular-animate dependencies to my system. I just want to test out this up and coming styling method. It seems I'm stuck at the beginning. Can you tell me whats wrong with the code?
These are my 3 files.
My output is {{title1}} at the centre-top of the webpage.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>
745
This is really just a matter of referencing the files to the correct places in your project.
Replacing all your local references to CDN's, your code is working flawlessly: http://codepen.io/qvazzler/pen/vOaqXW
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="CSS.css">-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<!-- <script src="MyApp.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
</body>
</html>
A helpful thing to do in these cases is to open the Chrome developer tools (CTRL + SHIFT + I), get to the Console section and look at the error messages.
Link to guide on using DevTools: https://developer.chrome.com/devtools
If I were to actually answer your question on why it's not working, we'd have to see your file structure, but as it is common that js files are located in a folder separate from your html files, you'd have to add "../" to the beginning of your href's to access a parent folder.
Example:
[My Project]
jsfolder
- angular.js
- angular-material.js
cssfolder
- angular-material.css
- styles.css
html
- index.html
To access angular.js from your index.html, you'd have to write href="../jsfolder/angular.js"
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
