Angular + Angular Material even without error looks nothing

Asked

Viewed 313 times

0

When startar my application no error occurs but nothing appears on the screen.

<!DOCTYPE html>
<html>
   <base href="/">
   </base>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- Angular Material style sheet -->
      <link rel="stylesheet" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> 
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
      <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
      <style>
         .menuBardemoBasicUsage .page-container {
         padding: 32px; }
         .menuBardemoBasicUsage .page {
         margin: 0 auto;
         padding: 24px;
         max-width: 680px;
         box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25); }
         .menuBardemoBasicUsage .page h1 {
         text-align: center;
         font-size: 1.8rem;
         margin-top: 0;
         font-weight: normal; }
         .menuBardemoBasicUsage .page p {
         line-height: 1.6rem; }
      </style>
      <!-- Configurações ANGULAR -->
      <script src="../js/app.js"></script>
      <script src="../js/controller/cliente-controller.js"></script>
      <script src="../js/controller/produto-controller.js"></script>
      <script src="../js/controller/produto-detalhe-controller.js"></script>
      <script src="../js/controller/main-controller.js"></script>
      <title>Principal</title>
   </head>
   <body>
      <div ng-controller="mainController as ctrl " layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage">
         <md-toolbar class="md-menu-toolbar">
            <div layout="row">
               <md-toolbar-filler layout="" layout-align="center center">
                  <md-icon md-svg-icon="call:chat"></md-icon>
               </md-toolbar-filler>
               <div>
                  <h2 class="md-toolbar-tools">Untitled document</h2>
                  <md-menu-bar>
                     <md-menu>
                        <button ng-click="$mdMenu.open()">
                        File
                        </button>
                        <md-menu-content>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('share', $event)">
                                 Share...
                              </md-button>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item>
                              <md-menu>
                                 <md-button ng-click="$mdMenu.open()">New</md-button>
                                 <md-menu-content>
                                    <md-menu-item>
                                       <md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button>
                                    </md-menu-item>
                                 </md-menu-content>
                              </md-menu>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('Open', $event)">
                                 Open...
                                 <span class="md-alt-text"> {{ 'M-O' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button disabled="disabled" ng-click="ctrl.sampleAction('Rename', $event)">
                                 Rename
                              </md-button>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('Print', $event)">
                                 Print
                                 <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                        </md-menu-content>
                     </md-menu>
                     <md-menu>
                        <button ng-click="$mdMenu.open()">
                        Edit
                        </button>
                        <md-menu-content>
                           <md-menu-item class="md-indent">
                              <md-icon md-svg-icon="undo"></md-icon>
                              <md-button ng-click="ctrl.sampleAction('undo', $event)">
                                 Undo
                                 <span class="md-alt-text">{{ 'M-Z' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item class="md-indent">
                              <md-icon md-svg-icon="redo"></md-icon>
                              <md-button ng-click="ctrl.sampleAction('redo', $event)">
                                 Redo
                                 <span class="md-alt-text">{{ 'M-Y' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item class="md-indent">
                              <md-icon md-svg-icon="content-cut"></md-icon>
                              <md-button ng-click="ctrl.sampleAction('cut', $event)">
                                 Cut
                                 <span class="md-alt-text">{{ 'M-X' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item class="md-indent">
                              <md-icon md-svg-icon="content-copy"></md-icon>
                              <md-button ng-click="ctrl.sampleAction('copy', $event)">
                                 Copy
                                 <span class="md-alt-text">{{ 'M-C' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item class="md-indent">
                              <md-icon md-svg-icon="content-paste"></md-icon>
                              <md-button ng-click="ctrl.sampleAction('paste', $event)">
                                 Paste
                                 <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item class="md-indent">
                              <md-button ng-click="ctrl.sampleAction('Find and replace', $event)">
                                 Find and replace...
                                 <span class="md-alt-text">{{ 'M-S-H' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                        </md-menu-content>
                     </md-menu>
                     <md-menu>
                        <button ng-click="$mdMenu.open()">
                        View
                        </button>
                        <md-menu-content>
                           <md-menu-item type="checkbox" ng-model="ctrl.settings.printLayout">Print layout</md-menu-item>
                           <md-menu-item class="md-indent">
                              <md-menu>
                                 <md-button ng-click="$mdMenu.open()">Mode</md-button>
                                 <md-menu-content width="3">
                                    <md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'presentation'">Presentation</md-menu-item>
                                    <md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'edit'">Edit</md-menu-item>
                                    <md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'modifiable'">Modifiable</md-menu-item>
                                 </md-menu-content>
                              </md-menu>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item type="checkbox" ng-model="ctrl.settings.showRuler">Show ruler</md-menu-item>
                           <md-menu-item type="checkbox" ng-model="ctrl.settings.showEquationToolbar">Show equation toolbar</md-menu-item>
                           <md-menu-item type="checkbox" ng-model="ctrl.settings.showSpellingSuggestions">Show spelling suggestions</md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item type="checkbox" ng-model="ctrl.settings.compactControls">Compact controls</md-menu-item>
                           <md-menu-item type="checkbox" ng-model="ctrl.settings.fullScreen">Full screen</md-menu-item>
                        </md-menu-content>
                     </md-menu>
                     <md-menu>
                        <button ng-click="$mdMenu.open()">
                        Format
                        </button>
                        <md-menu-content>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('bold', $event)">
                                 Bold
                                 <span class="md-alt-text"> {{ 'M-B' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('italic', $event)">
                                 Italic
                                 <span class="md-alt-text">{{ 'M-I' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('underline', $event)">
                                 Underline
                                 <span class="md-alt-text">{{ 'M-U' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('strikethrough', $event)">
                                 Strikethrough
                                 <span class="md-alt-text">{{ 'A-S-5' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('superscript', $event)">
                                 Superscript
                                 <span class="md-alt-text">{{ 'M-.' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-item>
                              <md-button ng-click="ctrl.sampleAction('subscript', $event)">
                                 Subscript
                                 <span class="md-alt-text">{{ 'M-,' | keyboardShortcut }}</span>
                              </md-button>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item>
                              <md-button ng-click="ctrl.toggleSetting('clearFormatting')">Clear Formatting</md-button>
                           </md-menu-item>
                        </md-menu-content>
                     </md-menu>
                  </md-menu-bar>
               </div>
            </div>
         </md-toolbar>
      </div>
   </body>
</html>

//Creation of the main application module

//cria um módulo java script 
//colchetes vazio significa que este módulo não depende de nenhum outro
var appPedidos = angular.module('appPedidos',['ngRoute','ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

//$routeProvider está injetado através da dependencia informada 'ngRoute'
appPedidos.config(function($routeProvider,$locationProvider,$sceDelegateProvider,$mdIconProvider,){ 
    $routeProvider
    //Seguindo a documentação, o primeiro parametro  significa que quando a rota é "/clientes" solicitada, entra em ação o segundo parametro
    //que é um objeto em json com 2 propriedades - que acessara o endereço "view/cliente.html"} e a segunda propriedade é informado quem será o controlador
    //desta rota que será uma página - oque é informado é o nome da chave do controller que sente caso é  "clienteController"
    .when("/clientes-pesquisa",{
        templateUrl: 'view/cliente/cliente-pesquisa.html', 
        controller: 'clienteController'

    }).when("/clientes-cadastro",{
        templateUrl: 'view/cliente/cliente-cadastro.html', 
        controller: 'clienteController'         


    }).when("/clientes/:clienteId",{
        templateUrl: 'view/cliente-detalhe.html', 
        controller: 'clienteDetalheController'
    }).when("/cidades",{
        templateUrl: 'view/cidade.html', 
        controller: 'cidadeController'


    }).when("/estados",{
        templateUrl: 'view/estado.html', 
        controller: 'estadoController'

    }).when("/produtos-cadastro",{
        templateUrl: 'view/produto/produto-cadastro.html', 
        controller: 'produtoController'

    }).when("/produtos-pesquisa",{
        templateUrl: '/view/produto/produto-pesquisa.html', 
        controller: 'produtoController'

    }).when("/produtos-edit/:pro_id",{
        templateUrl: 'view/produto/produto-cadastro.html', 
        controller: 'produtoController'         


    }).when("",{
        templateUrl: '/login.html', 
        controller: 'loginController'


            /*
    }).when("",{
        templateUrl: '/view/main-menu.html', 
        controller: 'maincontroller'
        */  

    }).when("/main-menu",{
        templateUrl: 'view/main-menu.html', 
        controller: 'maincontroller'

    }).otherwise({rediretTo:'/'});
    $locationProvider.html5Mode(true);  




    $mdIconProvider
    .defaultIconSet('img/icons/sets/core-icons.svg', 24);

})

    .filter('keyboardShortcut', function($window) {
        return function(str) {
          if (!str) return;
          var keys = str.split('-');
          var isOSX = /Mac OS X/.test($window.navigator.userAgent);

          var seperator = (!isOSX || keys.length > 2) ? '+' : '';

          var abbreviations = {
            M: isOSX ? '' : 'Ctrl',
            A: isOSX ? 'Option' : 'Alt',
            S: 'Shift'
          };

          return keys.map(function(key, index) {
            var last = index == keys.length - 1;
            return last ? key : abbreviations[key];
          }).join(seperator);
        };
      });


appPedidos.factory('ipServerApplication', function($http, $q) { 
    return{
        IpServidor: function(){ 
            var promessa = $q.defer();
            $http.get("/js/config_system/configserver.json").then(                  
                      function(response) {
                         var ips = [];

                         angular.forEach(response.data, function(ip,id){
                             ip.id = id;    
                             ips.push(ip);                           
                         });                         
                         promessa.resolve(ips);
                      },
                        function(){
                            console.log("Erro: ipServerApplication.IpServidor"+ips);
                        }
                      );// fim          
            return promessa.promise;                    
        }

    }/*,
    {
        inserir: function (ip){
            var id =  ip.id;

            http.put("/js/config_system/configserver.json", ip);
        }*/
    //};
});











/*
appPedidos.value("ipServerApplication", {ip: function(text){
    $http.get("js/config_system/configserver.json").then(
              function(response) {
                  var ipserver={};
                  ipserver = response.data;
                console.log("deu certo:  " + response.data
                        + "===========" + ipserver.ip); 

                return ipserver.ip;          
            },
            // fim function successCallback
            function(response) {
                console.log(response.status, response.data);
                console.log("erro");
            });

}// fim da função



}//fim do json
);//fim appPedidos.value 

    */





appPedidos.controller("mainController",function($scope, $route, $routeParams, $location, $interval, dateFilter){
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;

    $scope.currentTime = dateFilter(new Date(), 'dd-MM-yyyy - HH:mm:ss a');

    var updateTime = $interval(function() {
      $scope.currentTime = dateFilter(new Date(), 'dd-MM-yyyy - HH:mm:ss a');
    }, 1000);

},


function DemoCtrl($mdDialog) {
    this.settings = {
      printLayout: true,
      showRuler: true,
      showSpellingSuggestions: true,
      presentationMode: 'edit'
    };

    this.sampleAction = function(name, ev) {
      $mdDialog.show($mdDialog.alert()
        .title(name)
        .textContent('You triggered the "' + name + '" action')
        .ok('Great')
        .targetEvent(ev)
      );
    };
});
  • Angular material shoots errors as far as it doesn’t have, so I think your problem lies elsewhere, perhaps on the routes

1 answer

0

I found that putting the . css and the . js(controllers) to the end of the body worked perfectly

Browser other questions tagged

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