Question

我得到了404并且无法找出原因。我知道我的mongoDB服务器和节点服务器正在运行，因为我可以查询和查看我的服务。现在我尝试在服务之上实现angular.js前端，但是当我尝试访问“home state”时，我一直得到404.

    // 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感到困惑，因为我觉得我对这种在线模板路由设置有很好的理解。我已经尝试了所有我能想到的东西，没有任何东西可以解决这个问题。

GET /home 404 19.131 ms - 1246

Answer 1

看起来你犯了我在本教程后面犯的错误：你删除了需要提供初始index.ejs文件的routes / index.js中的根路由。这是添加回您的路线：

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

使用node / express在angular.js中无法工作

1 个答案: