路由不能在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

回答

相关问题