未能用UI路由器注入視圖

我正在關注Thinkster上的MEAN堆棧教程，並且遇到了一些問題。未能用UI路由器注入視圖

第一個是使用內聯視圖，使用id等於「home.html」的腳本標記，例如，應該使用ui路由器路由到該腳本標記。這不起作用，但我通過創建單獨的文件來解決問題，這些文件包含腳本標記之間我想要的任何標記。

現在我正在進入節點的領域並表達並託管本地服務器。我也試圖遵循基本的節點結構。我在我的項目的根目錄中有一個app.js文件，並且在angularApp.js中包含在public/javascripts中的教程代碼。我已將視圖移到視圖文件夾中。

這是如下結構：

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

當應用程序啓動時，它首先找到angularApp.js（良好），但隨後加載失敗home.html做爲。沒有任何顯示（屏幕是空白的）。

這是我angularApp.js的app.config部分：

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'); 
    }]);

這是我home.html的：

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

我認爲這個問題是我的治療參數ui路由器 - 我覺得我已經嘗試了所有的組合，我在我的智慧結束。一個到整個代碼庫的鏈接在這裏：https://github.com/Zombiefruit/mean_test_01。我只是想要注入視圖！

謝謝。

來源

2016-07-13 wubba lubba dub dub

您的網站根目錄爲public，因此您必須在公共場所內創建文件夾views，然後將home.html和posts.html移入其中。

然後更改templateUrl爲'/views/home.html'將工作。

順便說一句否則路線應該是/home

來源

2016-07-13 03:20:13 Icycool

這解決了它！你是否設法使評論有效（如果你有克隆回購的機會）？ –

呃...你是指路線部分還是？我沒有'mongodb'設置，所以我不能真正測試。但是，如果我刪除數據庫部分，我可以訪問'帖子'路線 – Icycool

嘗試將相對路徑添加到templateUrl，如templateUrl：'/views/home.html'。

編輯：ID參數應該使用：id而不是{id}來設置。對不起，我以前沒有注意到。 :)

來源

2016-07-13 02:24:17 Aetiranos

我已經試過了，我最終得到了相同的結果。我也嘗試過使用路由器證明者.otherwise（）路徑的每個組合。有些會導致404錯誤，有些則無能爲力。可悲的是，沒有人會工作（我試過）。 –

將{Id}替換爲：id – Aetiranos

不幸的是，這並沒有解決它。現在注入posts.html並不太重要，因爲home.html是父項。我很高興看到標題出現。 –

未能用UI路由器注入視圖

回答

相關問題