How to implement features of the Angular?

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 applied Material Design ( Learn more about Material Design Concept

About 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 components based on Material Design, 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 to support ARIA (Accessible Rich Internet Applications)

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

Angular Message

Policy for displaying messages.

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

Notethateachimportprovessomefunctionalityfortheproject,eitherdirectly,asisthecaseof AngularJS or Angular Material and indirectly as are the other libraries (that the Angular Material needs to work).

Going to the code that 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 respectively:

'myApp' : The name of the new module will be used in the ngApp declaration.

['ngMaterial'] : Array of module dependencies. That is, we declare that our new module 'myApp' is dependent on the 'ngMaterial' module we import.

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

At first, it's all very confusing (and sometimes it really is) for beginners and back-enders, but with dedication and effort and a few hours of head-shuffling, things start to make sense.

Any questions, we are available!

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, "Do not always include all these modules are needed.

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

• angular-animate - > ngAnimate | module for css animations
• 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 big balcony in all this is to ask: Why do I need to include all of them?

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

How to include a module?

The module is included in 2 steps:

• Link reference | or include the code in your files;
• Calling the module within your main module;

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

Initializing the module is done as follows:

//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 Angular module is the only one that does not need to be defined, since it is already called when creating a module.

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

If you just enter src but do not call it as a dependency in your main module, it may be that no error is displayed and the module will never be initialized.

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

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

And in your main module, just start the news module to access the controllers, services, etc. created in it, like this:

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