Angular Ui-Router Inline-Vorlage nicht Rendering

Ich bin neu in Angular und lernen durch die Tutorials auf Thinkster. Ich bin im Schritt "Angular Routing -> Hinzufügen eines neuen Status".Angular Ui-Router Inline-Vorlage nicht Rendering

Ich versuche, UI-Router zu verwenden, um eine Inline-Vorlage zu rendern, aber die Vorlage wird nicht angezeigt. Hier ist meine index.html (gekürzt):

<html> 
    <head> 
    <!-- My js files are loaded here --> 
    </head> 
    <body ng-app='flapperNews'> 

    <div class ='row'> 
     <div class="col-md-6 col-md-offset-3"> 
     <div ui-view></div> 
     </div> 
    </div> 

    <script type="text/ng-template" id="home.html"> 
     <!-- My template written as plain html> 
    </script> 
    </body> 
</html>

Und das ist, wie mein Routing derzeit in app.js behandelt wird:

angular.module('flapperNews',['ui.router']) 
.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider){ 
    return; 

    $stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: '/home.html', 
      controller: 'MainCtrl' 
     }); 

    $urlRouterProvider.otherwise('home'); 

}]);

Es ist mein Verständnis, dass ui-Router sollte die URL analysieren und machen Sie die entsprechende Vorlage innerhalb der Tags div ui-view. (Thinkster sagt, das Tag sollte 'ui-view' sein, aber die ui-router docs schien etwas anderes zu sagen; ich habe beides versucht).

Meine Seite wird leer angezeigt und es werden keine Fehler in der Konsole protokolliert. Für was es wert ist, mache ich das Tutorial mit nur lokalen Dateien, und da ich den Routing-Code hinzugefügt haben meine URL hat eine # angehängt, d. H. file://blah/blah/FlapperNews/index.html# und ich bin mir nicht sicher warum.

Quelle

2016-07-14 user2888805

versuchen Sie mit ng-include –

warum gibt es eine 'return;' direkt nach der '-Funktion ($ stateProvider, $ urlRouterProvider) {'? Sie haben auf diese Weise keine Konfiguration vorgenommen. – MMhunter

versucht einfach den folgenden Code und scheint zu arbeiten. Es basiert auf dem von Ihnen angegebenen Link.

Was ich aus dem Code festgelegt:

ist

id = "home.html" zu id = "/ home.html"
Kommentar nicht geschlossen: <!-- My template written as plain html>
löschen return; von config-Funktion
entfernt Controller, da es keinen Code dafür

war

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    </head> 
    <body ng-app='flapperNews'> 

     <div class ='row'> 
     <div class="col-md-6 col-md-offset-3"> 
      <div ui-view></div> 
     </div> 
     </div> 

     <script type="text/ng-template" id="/home.html"> 
     test content 
     </script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script> 
     angular.module('flapperNews', ['ui.router']) 
     .config([ 
      '$stateProvider', 
      '$urlRouterProvider', 
      function($stateProvider, $urlRouterProvider) { 

      $stateProvider 
      .state('home', { 
       url: '/home', 
       templateUrl: '/home.html' 
       // controller: 'MainCtrl' 
      }); 

      $urlRouterProvider.otherwise('home'); 
      }]) 
     </script> 

     </body> 
</html>

Quelle

2016-07-14 13:50:18 user1121883

danke - nicht sicher, wie diese Rückkehr da drin war, aber ich habe das "/" in der ID total vermisst! Danke für die zweite Reihe von Augen! – user2888805

Löschen Sie die return in Ihrer Konfigurationsfunktion.

angular.module('flapperNews',['ui.router']) 
.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider){ 

    $stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: '/home.html', 
      controller: 'MainCtrl' 
     }); 

    $urlRouterProvider.otherwise('home'); 

}]);

Quelle

2016-07-14 13:50:11 MMhunter

Angular Ui-Router Inline-Vorlage nicht Rendering

Antwort

Verwandte Themen