Angular Material funktioniert nicht

Ich fange an, Angular Material zu verwenden und ein Problem auftreten: Ich habe diese einfache Seite, mit Angular Material gebaut, mit einer NavBar, aber es erscheint nicht, und ich weiß nicht warum . Dies ist meine Seite:Angular Material funktioniert nicht

<html lang="it"> 
<head> 
    <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"> 
</head> 
<body ng-app="MyApp" ng-cloak> 
    <!-- NavBar --> 
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp"> 
     <md-content class="md-padding"> 
      <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> 
       <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item> 
       <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item> 
       <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item> 
      </md-nav-bar> 
     <span>{{currentNavItem}}</span> 
     </md-content> 
    </div> 
    <!-- End NavBar --> 


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

    <!-- Your application bootstrap --> 
    <script type="text/javascript">  
     (function() { 
      'use strict'; 

      angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
       .controller('AppCtrl', AppCtrl); 

      function AppCtrl($scope) { 
       $scope.currentNavItem = 'page1'; 
      } 
     })(); 

     angular.module('MyApp', ['ngMaterial']); 
    </script> 
</body>

Das Ergebnis ist eine leere Seite. Danke für Hilfe!

Quelle

2016-06-19 L. Bedin

Es gibt viele Dinge, die Sie in diesem Code falsch gemacht haben. Verwenden Sie zuerst ng-app bei nur in body Tag. Sie haben auch versucht, es in div Element zu verwenden, also entfernen Sie das.

Sie definierten MyApp zwei Mal in Ihrem Javascript so entfernen Sie die letzte Definition.

Entfernen Sie material.svgAssetsCache importieren, da es nicht verfügbar ist. und versuchen Sie den folgenden Code für Ihre eckige Javascript-Datei zu verwenden.

angular.module('MyApp',['ngMaterial', 'ngMessages']) 
      .controller('AppCtrl', function($scope) { 
      $scope.currentNavItem = 'page1'; 
});

Quelle

2016-06-19 10:41:51 nextt1

Danke Mann, du hast mich gerettet! Kann ich Ihnen eine Adresse wie E-Mail oder etwas anderes fragen, um Hilfe zu fragen, wenn ein Problem auftritt? Danke nochmal! –

Kein Problem. Sie können hier jede Art von Fragen stellen. – nextt1

Okay, vielen Dank! –

Antwort

Verwandte Themen