A pouco tempo atras tenho estudado AngularJS através de materiais como esse;
Curso Online no YOUTUBE sobre AngurlaJS >>>>> CLIQUE AQUI.
Então pelo que ele ensina mostra que devemos colocar o link do arquivo angular.js de acordo com as vídeo aulas;
Com comecei a seguir as aulas e começou a dá certo, então encontrei esse demostrativo do Angular;
E com isso tentei implementar, mas não tive sucesso como você podem ver nesse link que eu mesmo postei no StackOverFlow;
O Datepicker do Angular Material não funciona
Tenho um colega meu que me ajudou a resolver e montou essa pagina como você podem ver no código abaixo, e está funcionando perfeitamente;
<html>
<head>
<title>Lista Telefonica</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<style>
.datepickerdemoBasicUsage {
/** Demo styles for mdCalendar. */
}
.datepickerdemoBasicUsage md-content {
padding-bottom: 200px;
}
.datepickerdemoBasicUsage .validation-messages {
font-size: 12px;
color: #dd2c00;
margin: 10px 0 0 25px;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl" style='padding: 40px;' ng-cloak>
<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
<h4>Disabled date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>
<h4>Date-picker with min date and max date</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
<h4>Only weekends are selectable</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<h4>Only weekends within given range are selectable</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<h4>With ngMessages</h4>
<form name="myForm">
<md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required md-min-date="minDate" md-max-date="maxDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<div class="validation-messages" ng-messages="myForm.dateField.$error">
<div ng-message="valid">The entered value is not a date!</div>
<div ng-message="required">This date is required!</div>
<div ng-message="mindate">Date is too early!</div>
<div ng-message="maxdate">Date is too late!</div>
<div ng-message="filtered">Only weekends are allowed!</div>
</div>
</form>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script>
angular.module('myApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() - 2,
$scope.myDate.getDate());
$scope.maxDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() + 2,
$scope.myDate.getDate());
$scope.onlyWeekendsPredicate = function(date) {
var day = date.getDay();
return day === 0 || day === 6;
}
});
</script>
</body>
</html>
Mas pude perceber que ele não somente incluiu os links do angularJS mas também inseriu outros links que eu não imagina que tivesse. Veja bem, eu sou programador Back-End e pelo incrível eu entendo muito pouco de FrameWorks que trabalham com Frond-ENd, e estou começando a aprender agora Bootstrap, então tenham paciência comigo!
O comentário que fiz me refiro a essas parte do código;
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
Eu entendi que o AppCtrl é o controller, eu entendi que o myApp é o modulo, mas eu não entendi também o que é e para que serve o ngMaterial