Failing, um eine Ansicht mit ui Router

Question

injizieren Ich folge dem MEAN Stapel Tutorial auf Thinkster, und ich habe in ein paar Probleme gerannt.

Die erste war mit Inline-Ansichten, mit einem Skript-Tag mit der ID gleich "home.html" zum Beispiel, die dann mit ui Router geroutet werden sollte. Das hat nicht funktioniert, aber ich habe das Problem behoben, indem ich separate Dateien mit dem gewünschten Markup zwischen den Skript-Tags erstellt habe.

Jetzt bin ich in den Bereich der Knoten und Express und Hosting eines lokalen Servers bewegen. Ich versuche auch, der grundlegenden Knotenstruktur zu folgen. Ich habe eine app.js-Datei im Stammverzeichnis meines Projekts und den Code aus dem Tutorial in angularApp.js, das in public/javascripts enthalten ist. Ich habe meine Ansichten in den Ordner Ansichten verschoben.

Das ist die Struktur:

Root --- app.js 
    | 
    --- views --- index.ejs, home.html, posts.html 
    | 
    --- public --- javascripts --- angularApp.js 

Wenn die App startet, ist es zunächst angularApp.js (gut) findet, doch irgendwie dann home.html zu laden. Nichts wird angezeigt (der Bildschirm ist leer).

Das ist mein angularApp.js app.config Abschnitt:

app.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 

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

     $urlRouterProvider.otherwise('/views/home'); 
    }]); 

Das ist mein home.html ist:

<div class="page-header"> 
    <h1>Flapper News</h1> 
    </div> 

    <div ng-repeat="post in posts | orderBy: '-upvotes'"> 
    <span class="glyphicon glyphicon-thumbs-up" 
    ng-click="incrementUpvotes(post)"></span> 
    {{post.upvotes}} 
    <span style="font-size:20px; margin-left:10px;"> 
     <!-- If the link is supplied, make it the href --> 
     <a ng-show="post.link" href="{{post.link}}">{{post.title}}</a> 
     <!-- If the link isn't supplied, just display the title --> 
     <span ng-hide="post.link">{{post.title}}</span> 
     <span> 
     <a href="#/posts/{{$index}}">Comments</a> 
     </span> 
     - upvotes: {{post.upvotes}} 
    </span> 

    </div> 

    <form ng-submit="addPost()" style="margin-top:30px;"> 
    <h3>Add a new post</h3> 

    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Title" ng-model="title"></input> 
    </div> 

    <div class="form-group"> 
     <input type="text"class="form-control" placeholder="Link" ng-model="link"></input> 
    </div> 
    <button type="submit" class="btn btn-primary">Post</button> 
    </form> 

Ich denke, das Problem mit meiner Behandlung der ist Parameter zu ui Router - Ich fühle mich wie ich jede Kombination ausprobiert habe und ich bin am Ende meines Wissens. Ein Link zur gesamten Codebasis ist hier: https://github.com/Zombiefruit/mean_test_01. Ich will nur die Sicht zum spritzen bringen!

Danke.

Answer 1

Ihre Web-Root ist public, so dass Sie views innerhalb Öffentlichkeit einen Ordner erstellen müssen, werden dann home.html und posts.html hinein bewegen.

Und dann würde die Änderung templateUrl zu '/views/home.html' funktionieren.

Btw die sonst Route sollte /home

Answer 2

Versuchen Sie, den relativen Pfad zum TemplateUrl wie templateUrl: '/views/home.html' hinzuzufügen.

Bearbeiten: Der ID-Parameter sollte festgelegt werden mit: ID anstelle von {id}. Tut mir leid, das habe ich vorher nicht bemerkt. :)