0

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;

BAIXAR ANGULAR

Com comecei a seguir as aulas e começou a dá certo, então encontrei esse demostrativo do Angular;

DEMOSTRATIVOS

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

1
  • 1
    nao sei qual o motivo de você estar aprendendo angular. Mas se for por curiosidade ou algum motivo que não seja uma necessidade da sua empresa, time de dev, etc. recome do que PARE de estudar angular e comece a estudar angular 2. alem de ter muitas melhorias ele é muito mais fácil e organizado. Commented 20/05/2016 às 16:00

2 Respostas 2

1

ngMaterial é uma biblioteca desenvolvida para o Angular trabalhar com Material Design, ela lhe oferece os comportamentos e componentes básicos para criação de interface com o conceito do Material Design aplicado (Saiba mais sobre o Material Design Concept).

Sobre as importações são as seguintes:

AngularJS Framework

é o nosso famoso AngularJS.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

Angular Material

Biblioteca baseada em AngularJS que provê components baseados em Material Design, esta Biblioteca possui as Seguintes dependências:

<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

Angular Animate

Framework do Angular para Animações.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>

Angular Aria

Framework para suporte a ARIA (Accessible Rich Internet Applications)

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>

Angular Message

Diretiva para exibição de mensagens.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

Nota-se que cada importação prove alguma funcionalidade para o projeto, seja diretamente, como é o caso do AngularJS ou Angular Material e indiretamente como são as outras bibliotecas (que o Angular Material precisa para funcionar).


Indo para o código que lhe mandei e você demonstrou acima, podemos ver a seguinte declaração:

...
angular.module('myApp', ['ngMaterial'])
...

angular.module é a declaração de um novo módulo para o angular e seus dois parâmetros 'myApp' e ['ngMaterial'] são respectivamentes:

'myApp' : nome do novo módulo,será usado na declaração do ngApp.

['ngMaterial'] : Array de dependências do módulo. Ou seja, declaramos que nosso novo módulo 'myApp' tem dependência com o módulo 'ngMaterial' que importamos.

Sempre que declaramos uma dependência no módulo devemos oferecer para nossa aplicação todos os arquivos e importações necessárias para o funcionamento do mesmo. Estes arquivos geralmente estão listados nos sites dos respectivos frameworks.

No começo, ainda mais pra quem está começando e vem do back-end tudo parece bem confuso (e as vezes realmente é), mas com dedicação e esforço e algumas horas quebrando a cabeça as coisas passam a começar a fazer sentido.

Qualquer dúvida, estamos a disposição!

1

Resposta curta:

ngMaterial é uma biblioteca semelhante ao bootstrap, porém focada em Angular e com design baseado em Material Design.

Resposta longa (puxe a cadeira):

Nem sempre incluir todos esses links são necessários. Em outras palavras, "Nem sempre incluir todos esses módulos são necessários.

Cada link que está sendo incluso se refere à um módulo que, posteriormente, deve ser iniciado no seu módulo principal, ou seja:

  • angular-animate -> ngAnimate | módulo para animações css
  • angular-aria -> ngAria | adiciona aria-* (semelhante aos atributos data-*)
  • angular-messages -> ngMessages | melhor controle de mensagens de erro em formulários (por exemplo)
  • angular-material | um Framework GIGANTE de css e funções para criar um projeto com Material Design

A grande sacada nisso tudo é se perguntar: Por que eu preciso incluir todos eles?

Nem sempre eles são necessários, algumas vezes são pré-requisitos para que um outro módulo funcione. Por exemplo (nunca usei o Angular Material, então é só uma suposição), supondo que para o DatePicker funcionar você precise do módulo ngAria, então você precisa incluir o módulo como ele fez. Para saber se é necessário ou não, somente lendo a documentação fornecida por eles.

Como incluir um módulo?

A inclusão do módulo é feita em 2 etapas:

  • Referência do link | ou incluir o código no seus arquivos;
  • Chamada do módulo dentro do seu módulo principal;

A referência do link é o que foi feito ao adicionar o <script src="....">

A inicialização do módulo é feita deste modo:

//Módulo sem chamar outros módulos
angular.module('myApp', []); //Para criar um módulo é importante ter `[]` mesmo que sem nada dentro - Isso caracteriza a criação de um módulo

//Módulo chamando outros módulos como dependências
angular.module('myApp', [
    'ngMessages',
    'ngAria',
    //... Outros módulos
])

O módulo Angular é o único que não precisa ser definido, pois o mesmo já é chamado ao efetuar a criação de um módulo.

Se você usar o segundo exemplo de criação de módulo sem inserir o <script src="...">, você terá um erro de injeção, pois ele não encontrou aquele módulo chamado.

Se você apenas inserir o src mas não chamar ele como dependência no seu módulo principal, pode ser que nenhum erro seja exibido e o módulo nunca será inicializado.


Lembrando que você tem total liberdade de também criar módulos que sejam indexados em seu módulo principal. Por exemplo, supondo que você tenha um módulo que seja focado somente em notícias, você poderia ter o seguinte:

angular.module('minhasNoticias', []);
//Aqui iriam os controllers, services, directives, etc.. Desse módulo

E em seu módulo principal, bastaria iniciar o módulo de notícias para ter acesso aos controllers, services, etc criados nele, assim:

angular.module('myApp', [
    'minhasNoticias' //Agora você possui acesso a este módulo
]);
1
  • todas as duas explicações foram muito boas, muito obrigado.
    – user10264
    Commented 20/05/2016 às 13:13

Você deve fazer log-in para responder a esta pergunta.