How to implement Angular features?

Asked

Viewed 462 times

0

A little while ago I have studied Angularjs through materials like this;

Online Course on YOUTUBE about Angurlajs >>>>> CLICK HERE.

So what he teaches shows that we should link the angular.js file according to the video lessons;

ANGLED DOWN

And then I started taking classes and it started working, so I found this demo from Angular;

DEMOSTRATIVE

And with that I tried to implement, but I was not as successful as you can see in this link that I posted on Stackoverflow;

Angular Material Datepicker does not work

I have a colleague of mine who helped me solve and mounted this page as you can see in the code below, and it’s working perfectly;

<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>

But I was able to notice that he not only included the links from Angularjs but also inserted other links that I don’t imagine he had. You see, I’m a Back-End programmer and by the amazing I understand very little of Frameworks working with Frond-End, and I’m starting to learn Bootstrap now, so bear with me!

The comment I made refers to those parts of the code;

 <!-- 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>

I understood that the Appctrl is the controller, I understood that the myapp is the module, but I also did not understand what it is and what the ngMaterial

angularjs angularjs-directives angular-module
  • 1

    I don’t know why you’re learning angular. But if it is out of curiosity or some reason that is not a need of your company, dev team, etc. recome than STOP studying angular and start studying angular 2. besides having many improvements it is much easier and organized.

2 answers

2

Short answer:

ngMaterial is a library similar to bootstrap, but focused on Angular and design based on Material Design.

Long answer (pull the chair):

Not always include all these links are required. In other words, "Not always include all these modules are required.

Each link that is being included refers to a module that, later, must be started in its main module, ie:

  • angular-Animate -> ngAnimate | css animations module
  • angular-Aria -> ngAria | adds aria-* (similar to attributes data-*)
  • angular-messages -> ngMessages | better control of error messages in forms (for example)
  • angular-material | a GIANT Framework of css and functions to create a project with Material Design

The whole point of all this is to ask yourself: Why I need to include all of them?

They are not always necessary, sometimes they are prerequisites for another module to work. For example (I never used Angular Material, so it’s just an assumption), assuming DatePicker work you need the module ngAria, then you need to include the module as it did. To know if it is necessary or not, just reading the documentation provided by them.

How to include a module?

The inclusion of the module is done in 2 steps:

  • Link reference | or include the code in your files;
  • Call the module inside its main module;

The link reference is what was done by adding the <script src="....">

Initialization of the module is done this way:

//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
])

The module Angular is the only one that does not need to be defined, as the same is already called when making the creation of a module.

If you use the second example of module creation without inserting the <script src="...">, you will have an injection error as it did not find that module called.

If you just insert the src but do not call it as dependency on your main module, it may be that no errors are displayed and the module will never be initialized.

Remembering that you have total freedom to also create modules that are indexed in your main module. For example, assuming you have a module that is focused only on news, you could have the following:

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

And in its main module, just start the news module to have access to the controllers, services, etc created in it, so:

angular.module('myApp', [
    'minhasNoticias' //Agora você possui acesso a este módulo
]);

  • all two explanations were very good, thank you very much.

2


ngMaterial is a library developed for Angular to work with Material Design, it offers you the basic behaviors and components for creating interface with the concept of Material Design applied (Learn more about Material Design Concept).

On imports are as follows::

Angularjs Framework

is our famous Angularjs.

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

Angular Material

Angularjs-based library that provides Material Design-based Components, this library has the following dependencies:

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

Angular Animate

Angular Framework for Animations.

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

Angular Aria

Framework for supporting ARIA (Accessible Rich Internet Applications)

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

Angular Message

Directive to display messages.

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

Note that each import proves some functionality to the project, either directly, as is the case of Angularjs or Angular Material and indirectly as are the other libraries (which the Angular Material needs to work).

Going to the code I sent you and you demonstrated above, we can see the following statement:

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

angular.module is the declaration of a new module for the angular and its two parameters 'myapp' and ['ngMaterial'] are respectfully:

'myapp' : name of the new module,will be used in the declaration of the ngApp.

['ngMaterial'] : Module dependency array. That is, we declare that our new module 'myapp' has dependency with the module 'ngMaterial' that we import.

Whenever we declare a dependency on the module we must offer for our application all the files and imports necessary for its operation. These files are usually listed on the respective frameworks websites.

At the beginning, even more so for those who are starting and coming from the back-end everything seems very confusing (and sometimes it really is), but with dedication and effort and a few hours of head breaking things start to make sense.

Any questions, we are available!

Browser other questions tagged angularjs angularjs-directives angular-module

You are not signed in. Login or sign up in order to post.