AngularJS + Angular UI-Router: templateUrl return Leere Seite

Ich fange gerade an, die angularjs zu lernen, und ich möchte es zum Erstellen einer UI-Vorlage verwenden. Ich möchte eine statische HEADER und FOOTER machen und das einzige, was dynamisch sein wird, ist die CONTENT. Mein Problem ist, dass es mir eine leere Webseite zurückgibt.AngularJS + Angular UI-Router: templateUrl return Leere Seite

Vielen Dank im Voraus Jungs.

index.html

<!DOCTYPE html> 
 
<html data-ng-app="app"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>UI-Router</title> 
 
\t <link rel="stylesheet" href=""> 
 

 
\t <!-- START LOAD VENDORS --> 
 
\t <script src="js/jquery/jquery.min.js"></script> 
 

 
\t <script src="js/angular/angular.min.js"></script> 
 
\t <script src="js/angular/angular-ui-router.min.js"></script> 
 
\t <!-- END LOAD VENDORS --> 
 

 
\t <!-- START LOAD SOURCE CODE --> 
 
\t <script src="js/app.js"></script> 
 
\t <!-- END LOAD SOURCE CODE --> 
 

 
</head> 
 
<body ui-view> 
 
</body> 
 

 
</html>

app.js

var app = angular.module('app', ['ui.router']) 
 

 
app.config(['$stateProvider', '$urlRouterProvider', 
 

 
function($stateProvider, $urlRouterProvider) { 
 
\t 
 
\t \t $urlRouterProvider.otherwise('/'); 
 

 
\t \t $stateProvider 
 
\t \t \t .state('index',{ 
 
\t \t \t \t abstract: true, 
 
\t \t \t \t url: '/index', 
 
\t \t \t \t templateUrl: 'view/app.html' 
 
\t \t \t }) 
 
\t }])

view/header.html

<ul> 
 
\t <li>US</li> 
 
\t <li>626.205.3838</li> 
 
\t <li>[email protected]</li> 
 
\t <li>Search</li> 
 
</ul> 
 
<ul> 
 
\t <li>Facebook</li> 
 
\t <li>Twitter</li> 
 
\t <li>Instagram</li> 
 
\t <li>LinkedIn</li> 
 
</ul>

view/footer.html

<div> 
 

 
\t <span>name here</span> 
 
\t <span>partner</span> 
 
\t <span>subscribe</span> 
 

 
\t <ul> 
 
\t \t <h3>get to know us</h3> 
 
\t \t <li>blog</li> 
 
\t \t <li>stories</li> 
 
\t \t <li>staff</li> 
 
\t </ul> 
 

 
\t <ul> 
 
\t \t <h3>connect</h3> 
 
\t \t <li>contact</li> 
 
\t \t <li>help</li> 
 
\t \t <li>request</li> 
 
\t </ul> 
 

 
\t <ul> 
 
\t \t <h3>resource</h3> 
 
\t \t <li>download</li> 
 
\t \t <li>financial</li> 
 
\t \t <li>donors</li> 
 
\t </ul> 
 

 
\t <ul> 
 
\t \t <h3>get involved</h3> 
 
\t \t <li>volunteer</li> 
 
\t \t <li>partnership</li> 
 
\t \t <li>donate</li> 
 
\t </ul> 
 

 
</div>

view/app.html

\t <div data-ng-include=" 'view/header.html' "></div> 
 
\t <div data-ng-include=" 'view/footer.html' "></div>

Quelle

2016-08-03 angelo

Sie können nicht in einem abstrakten Zustand über

i eine Arbeits plnkr hier erstellt haben: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview

$stateProvider 
    .state('index',{ 
     url: '/', 
     templateUrl: 'view/app.html' 
    })

Quelle

2016-08-03 10:43:16 Karim

Dank @Karim, das ist wirklich Arbeit. Ich versuche auch, ** views: {'': {templateUrl: 'view/app.html'}} ** innerhalb von $ stateProvider als -mohit sagte. und es funktioniert auch. Wenn es dir gut geht, kannst du mir eine weitere Erklärung geben? – angelo

Das ist ein anderer Ansatz, Sie haben mehrere Ansichten, die an denselben Status gebunden sind, und Ihre app.html enthält nur die Logik Ihrer Anwendung. mehr Infos hier: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views – Karim

Danke @Karim das war eine große Hilfe. – angelo

Versuchen Sie, die ui-View-Element-Direktive. Und stellen Sie sicher, Sie beziehen sich die Vorlage richtig

<body> 
 
    <ui-view></ui-view> 
 
</body>

Quelle

2016-08-03 10:30:11

Danke @mahesh – angelo

Und stellen Sie sicher, dass Sie die Zusammenfassung entfernen: True von der Router-Konfiguration. –

Der richtige Weg, dies zu tun, ist, separate ui-view-Direktiven für Ihren Header, Inhalt und die Fußzeile zu haben .

index.html

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
    <meta charset="utf-8"> 
    <title>UI-Router</title> 
    <link rel="stylesheet" href=""> 

    <!-- START LOAD VENDORS --> 
    <script src="js/jquery/jquery.min.js"></script> 

    <script src="js/angular/angular.min.js"></script> 
    <script src="js/angular/angular-ui-router.min.js"></script> 
    <!-- END LOAD VENDORS --> 

    <!-- START LOAD SOURCE CODE --> 
    <script src="js/app.js"></script> 
    <!-- END LOAD SOURCE CODE --> 

</head> 
<body> 
    <div ui-view="header"> 
    <div ui-view="content"> 
    <div ui-view="footer"> 
</body> 
</html>

Legen Sie die Vorlage für jede ui-Ansicht in der Config-Funktionszustand und entfernen Sie die abstrakten: true Option. Mehr dazu hier: what is the purpose of use abstract state?

App.js

var app = angular.module('app', ['ui.router']) 

app.config(['$stateProvider', '$urlRouterProvider', 

function($stateProvider, $urlRouterProvider) { 

     $urlRouterProvider.otherwise('/'); 

     $stateProvider 
      .state('index',{ 
       url: '/index', 
       views: { 
        'header': { 
         templateUrl: 'view/header.html' 
        }, 
        'content': { 
         templateUrl: 'view/app.html' 
        }, 
        'footer': { 
         templateUrl: 'view/footer.html' 
        } 
       } 
      }) 
    }])

auch wickeln Sie Ihre header.html Code in einem div-Tag. durch Zugabe von anderen Staat wie diese

header.html

<div> 
    <ul> 
     <li>US</li> 
     <li>626.205.3838</li> 
     <li>[email protected]</li> 
     <li>Search</li> 
    </ul> 
    <ul> 
     <li>Facebook</li> 
     <li>Twitter</li> 
     <li>Instagram</li> 
     <li>LinkedIn</li> 
    </ul> 
</div>

Nun ist die Kopf- und Fußzeile wird fest bleiben und Sie können Ihre Inhalte auf Zustände basierend ändern:

.state('index.two',{ 
    url: '/index/two', 
    views: { 
     '[email protected]': { 
      templateUrl: 'view/two.html' 
     } 
    } 
})

Quelle

2016-08-03 10:45:53

Danke @mohit. Es funktioniert und danke auch für Ihre Notizen. – angelo

Ich bin froh, Ihnen helfen zu können! Wie wäre es mit einem Upvote dann :) –

AngularJS + Angular UI-Router: templateUrl return Leere Seite

Antwort

Verwandte Themen