路由不能在angular.js中使用node/express

我得到一個404，並且找不到原因。我知道我的mongoDB服務器和節點服務器正在工作，因爲我可以查詢和查看我的服務。現在我正試圖在服務之上實現一個angular.js前端，但當我嘗試訪問我的「本地狀態」時，我一直收到404。路由不能在angular.js中使用node/express

// Configure the app to use routing. These $ tags are referencing the angular ui-router import. 
app.config([ 
'$stateProvider', 
'$urlRouterProvider', 
function($stateProvider, $urlRouterProvider) { 

    // tells your route what controller to use when it gets there 
    $stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: '/home.html', 
     controller: 'MainCtrl' 
     resolve: { 
      postPromise: ['posts', function(posts){ 
       return posts.getAll(); 
      }] 
     } 
    }); 

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


    // .otherwise means "route to this place if the url is anything else" || like an if/else for url routing 
    $urlRouterProvider.otherwise('home'); 
}]);

這是來自app.js的一些代碼拋出代碼。標準快速生成代碼在這裏。

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
var err = new Error('Not Found'); 
err.status = 404; 
next(err); 
});

這是應該顯示的javscript，它位於節點的index.ejs視圖頁面中。

<script type="text/ng-template" id="/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;"> 
       <a ng-show="post.link" href="{{post.link}}"> 
        {{post.title}} 
       </a> 
       <span ng-hide="post.link"> 
        {{post.title}} 
       </span> 
       <span> 
        <a href="#/posts/{{$index}}">Comments</a> 
       </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">Post</button> 
     </form> 
</script>

也可對照，我進口index.ejs頁面

<head> 
     <title>Flapper News</title> 
      <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 


      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
      <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> 
      <script src="/javascripts/angularApp.js"></script> 
      <style> .glyphicon-thumbs-up { cursor:pointer } </style> 
    </head>

我爲此感到困惑404，因爲我覺得我有這個在線模板路由設置了一個很好的理解上。我已經試過所有我能想到的任何東西都無法解決這個404

GET /home 404 19.131 ms - 1246

來源

2015-02-11 javascript Jenkins

你使用Html5Mode？如果你是，你需要一個快遞路線來處理它;如果沒有，那麼你的角度路由是'＃/ home'，其中'＃'禁止瀏覽器重新加載並且調用服務器來尋找一個不存在的頁面。如果你的瀏覽器中有一個Get的'/ home'，你試圖從服務器請求，服務器無法響應。 – Claies 2015-02-11 20:58:36

我不確定我是否使用Html5Mode，但我確實有\t \t $ urlRouterProvider.otherwise（'home'）; – 2015-02-11 21:00:17

會去'http：//yoursite.com /＃/ home'而不是'http：// yoursite.com/home'工作嗎？ – Claies 2015-02-11 21:02:17

看起來你犯同樣的錯誤我沒有按照本教程：您刪除的路由路徑根/ index.js這是需要提供最初的index.ejs文件。在這裏它是加回你的路線：

router.get('/', function(req, res, next) { 
    res.render('index', { title: 'Express' }); 
});

來源

2015-07-23 03:41:04 Dennis

路由不能在angular.js中使用node/express

回答

相關問題