AngularJS ui-router rendern nicht anzeigen

Ich habe Probleme damit, meine AngularJS-App dazu zu bringen, eine Ansicht basierend auf einer Vorlage anzuzeigen.AngularJS ui-router rendern nicht anzeigen

Das Problem: ui-Router richtig „Routing“ alle Dateien zu sein scheint, weil die Vorlagendatei (landing.html) als Objekt an die Konsole geliefert werden (siehe console.log(result) in main.js unten). Trotzdem wird die Vorlagendatei nicht in der App angezeigt, in der <div ui-view></div> sein soll.

index.html:

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
@@include('partials/head.html') 
<body> 

    @@include('partials/header.html') 

     <div ui-view></div> 

    @@include('partials/footer.html') 
</body> 
</html>

main.js:

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

    $stateProvider 
    .state('landing', { 
     url: '/', 
     controller: 'LandingCtrl as landing', 
     templateUrl: 'templates/landing.html' 
    }); 
     $urlRouterProvider.otherwise('/landing'); 

}]) 
    .run(['$http', '$templateCache', function($http, $templateCache) { 

    $http.get('templates/landing.html', { 
     cache: $templateCache 
    }).then(function(result) { 
     console.log(result); 
    }); 

    }]);

Meine Vorlagendatei zielseite.html:

<main class="content"> 

    @@include('partials/search.html') 
    <h2>Show me the contents of landing.html!</h2> 

</main>

Ich bin uns Grunzen und sorgte dafür, dass es sowohl die /templates in /dist zu sehen und zu kopieren. Insgesamt verhält sich die Angular-App korrekt (keine ng-Fehler in der Konsole).

Auch, wenn stattdessen eine Template-Datei anzugeben (templateURL), einfach template: <h2>Show me the contents of landing.html!</h2> in main.js ich dann wird dies in der Ansicht wiedergegeben. Es gibt etwas, das das Rendern einer Datei verhindert.

Frage: Da ui-router alle Dateien korrekt findet und routet, hat jemand eine Idee, warum die App die Vorlagedatei einfach nicht anzeigt?

bearbeiten Hier ist LandingCtrl.js:

(function() { 
    function LandingCtrl($scope, $location, $anchorScroll) { 
    $scope.goTo = function(id) { 
     $location.hash(id); 
     console.log($location.hash()); 
     $anchorScroll(); 
    };  
    }  
    angular 
    .module('myApp') 
    .controller('LandingCtrl', ['$scope', '$location', '$anchorScroll', LandingCtrl]); 
})();

Quelle

2017-08-08 orlando21

Warum enthalten verwenden @@? – Vivz

hi @Vivz, Ich benutze HTML Partials weil sonst einige meiner Dateien viel länger wären. Ich habe mehrmals versucht, sie auszuschließen, um zu sehen, ob sie etwas bewirkt haben, aber bisher kein anderes Ergebnis erzielt haben. – orlando21

Ihre ui-view wird basierend auf Ihrem Status die Partails auslösen. – Vivz

in Ihrer main.js Datei wie unten die URL Landing State ändern:

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

    $stateProvider 
    .state('landing', { 
     url: '/landing', 
     controller: 'LandingCtrl as landing', 
     templateUrl: 'templates/landing.html' 
    }); 
     $urlRouterProvider.otherwise('/landing'); 

}]) 
    .run(['$http', '$templateCache', function($http, $templateCache) { 

    $http.get('templates/landing.html', { 
     cache: $templateCache 
    }).then(function(result) { 
     console.log(result); 
    }); 

    }]);

Quelle

2017-08-09 06:28:37

Ok, also in '$ stateProvider.state' ersetze ich' url:/'durch' url:/landing'. Super, es funktioniert. Vielen Dank! – orlando21

@ orlando21 du bist willkommen –

AngularJS ui-router rendern nicht anzeigen

Antwort

Verwandte Themen