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

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感到困惑，因為我覺得我對這種在線模板路由設置有很好的理解。 我已經嘗試了所有可以想到的方法，但是沒有任何方法可以解決此404錯誤。

GET /home 404 19.131 ms - 1246

Answer 1

看來您犯了與本教程相同的錯誤：您刪除了routes / index.js中的根路由，該根路由需要提供初始的index.ejs文件。 這是添加回您的路線的方法：

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

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

問題描述

1 個解決方案

解決方案1
0 2015-07-23 03:41:04

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

問題描述

1 個解決方案

解決方案1 0 2015-07-23 03:41:04

解決方案1
0 2015-07-23 03:41:04