0

Estou com um problema ao utilizar o Angular Material JS. Tenho a minha index com as referências para o projeto Angular-Material.

<head>

    <!-- AngularJS Material CSS using GitCDN to load directly from `bower-material/master` -->
    <link rel="stylesheet" href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css">

  </head>
  <body>

    <!-- AngularJS Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.js"></script>

    <!-- AngularJS Material Javascript using GitCDN to load directly from `bower-material/master` -->
    <script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>

  </body>

E no meu module estou chamando a referência do ngMaterial.

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

Aparentemente, não deveria dar nenhum erro, porém quando tento rodar minha aplicação está me retornando:

Uncaught Error: [$injector:modulerr] Failed to instantiate module simulador due to: Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to: Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to: Error: [$injector:nomod] Module 'ngAnimate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Algum help?

Segue o código da minha view _layout

<!DOCTYPE html>

<html lang="pt-br" >
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body ng-app="simulador" ng-cloak>

    <!--Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--Angular-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.js"></script>
    <script scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>


    <!-- Angular Material requires Angular.js Libraries -->
    @*<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>*@

    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
    @*<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>*@

    <!--Aplicação | Controller-->
    <script src="~/Scripts/Controllers/simulador-controller.js"></script>

    <!--Aplicação | Serviços-->
    <script src="~/Scripts/Regras/ServicoFipe.js"></script>

    <div>
        @RenderBody()
    </div>
</body>
</html>

Segue o código da minha view:

<div ng-controller="SimuladorController" ng-cloak>
    <div>
        <h1>{{model.titulo}}</h1>
    </div>
    <form ng-submit="$event.preventDefault()">
        <div id="veiculo" class="col-xs-12">
            <section data-role="content">
                <div class="col-xs-12">
                    <h1>Seu veículo:</h1>
                    <div>
                        <label>
                            Tipo:
                            <select ng-model="model.veiculo.tipoSelect" ng-change="changeTipo()">
                                <option ng-repeat="tipo in tipos" value="{{tipo.id}}">{{tipo.nome}}</option>
                            </select>
                        </label>
                    </div>
                </div>
            </section>
        </div>
    </form>
</div>

Segue o código do meu controller:

angular.module('simulador', []);

angular.module('simulador', ['ngMaterial'])
    .controller('SimuladorController',
    function ($scope) {

        $scope.model.titulo = 'Simulador';


        initController();


        function initController() {

                ...

        }

});
5
  • Poste o código completo, quando chama seu módulo? quando importa ele? todas as bibliotecas estão com status 200? aparentemente está tudo certo... 6/08/2017 às 20:40
  • Felipe, o que eu consegui evoluir foi sobre as dependências. Com a versão do Angular (todas as referências) em 1.5.11 dá este erro. Quando eu troco para 1.4.8 o erro não ocorre. Agora preciso entender o motivo ou se vou ter que usar bibliotecas antigas do Angular :( 6/08/2017 às 20:46
  • Vish cara :/, realmente não sei o motivo, talvez você encontre issues no git do angular material que expliquem essa incompatibilidade, a propósito, trabalho com angular v1.5.3 e angular material v1.1.3, então até essa versão do angular não dará problemas. 6/08/2017 às 20:57
  • Obrigado. Postei meus códigos completos. Se quiser dar uma olhada 6/08/2017 às 21:03
  • Você está instanciando sua aplicação duas vezes. Utilize a sintaxe do angular.module("simulador", ['ngMaterial']); apenas na primeira vez e na segunda (na hora de instanciar o controller) utilize angular.module("simulador").controller...
    – Sorack
    7/08/2017 às 6:37

1 Resposta 1

2

A versão do seu angular-material importado estava muito desatualizada (0.11). Realizei a importação correta para que seu código funcione como abaixo.

A utilização do módulo na criação do seu controller estava incorreta, já que utilizava o segundo parâmetro (array) que identifica os módulos de dependência, recriando sua aplicação principal. A correção ficou como abaixo:

angular
  .module('simulador', ['ngMaterial']);

angular.module('simulador')
  .controller('SimuladorController', SimuladorController);

SimuladorController.$inject = ['$scope'];

function SimuladorController($scope) {
  initController();

  function initController() {
    $scope.tipos = [];
    
    $scope.tipos.push({id: 1, nome: 'Carro'});
    $scope.tipos.push({id: 2, nome: 'Moto'});
    
    $scope.model = {};
    $scope.model.titulo = 'Simulador';
    $scope.model.veiculo = {};
    $scope.model.veiculo.tipoSelect = $scope.tipos[0].id;
  }
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>

<div ng-app="simulador">
  <div ng-controller="SimuladorController" ng-cloak>
    <div>
      <h1>{{model.titulo}}</h1>
    </div>
    <form ng-submit="$event.preventDefault()">
      <div id="veiculo" class="col-xs-12">
        <section data-role="content">
          <div class="col-xs-12">
            <h1>Seu veículo:</h1>
            <div>
              <label>Tipo:
                <select ng-model="model.veiculo.tipoSelect" ng-options="tipo.id as tipo.nome for tipo in tipos">
                </select>
              </label>
            </div>
          </div>
        </section>
      </div>
    </form>
  </div>
</div>

Note também que mudei a declaração do seu select para uma forma simplificada.

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .