角度路由不适用于 Express答案

【问题标题】：Angular Routing Not Working With Express角度路由不适用于 Express
【发布时间】：2017-04-09 21:16:42
【问题描述】：

我正在尝试使用 Angular 创建单页应用程序。我在后端使用 Node/Express。虽然 Express 正确地为我的静态 index.html 提供服务，但我的部分 .html 页面并未被拉入我的 ng-view。

这里是视图被拉入的 HTML 以及对 Angular 应用程序的调用：

<body ng-app="app">
    <nav class="navbar navbar-inverse bg-inverse navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand topnav" href="/">DtepDC</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/movies">Movies App</a>
                    </li>
                    <li>
                        <a href="mailto:dawn714@gmail.com">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div ng-view></div>

这是我的 Angular 路由代码：

        app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
        .when("/", {
            templateUrl: "intro-header.html"
        })
        .when("/movies", {
            templateUrl: "#!/movies.html",
            controller: "moviesCtrl"
        }).
        otherwise({
            redirect: '/'
        });
        $locationProvider.html5Mode(true);
    }]);

这是我的 Express server.js 代码：

var express = require('express');
var path = require('path');
var app = express();

app.set('port', 3000);
app.use('/', express.static(__dirname + '/'));

app.use(function(req, res) {
res.sendFile(__dirname + '/index.html');
});

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

var server = app.listen(app.get('port'), function() {
var port = server.address().port;
console.log('Running server at http://localhost:' + port + '/');
});

这是我的工厂代码，我已经包含了对 Angular 应用程序的调用：

var app = angular.module("app", ["ngRoute"]);

app.factory("getMovie", ["$http",function($http){
    var obj = {};
    var url = "https://api.nytimes.com/svc/movies/v2/reviews/search.json";
    obj.getMovieInfo = function(title){ 
        return $http({
            url: url,
            method: "GET",
            params:{ 
                query: title,
                api_key: "68094e1974e7984c256beb1653319915:3:33678189",
                callback: "JSON_CALLBACK"
          },
            headers: {
                "Content-Type" : "application/json"
            }
            }).then(function successCallback(response) {
                    return response.data.results; 
             }, function errorCallback(response) {
                    console.log("Nothing to see here...");
             });
            }
        return obj;
}]);

这是我的控制器代码：

        app.controller("moviesCtrl", ["$scope", "getMovie",     function($scope, getMovie){
    $scope.findMovie = function() {
        getMovie.getMovieInfo($scope.title).then(function(response){
            $scope.results = response;
        });
    }    
}]);

这是我的带有控制器的 HTML 块：

    <h2>Movie Search</h2>
        <!-- START row -->
        <div ng-controller="moviesCtrl">
            <div>
                <div class="col-sm-12" class="form-group">                
                    <form name="myForm" class="form-inline">

                        Find a NYTimes movie review based on its title (or part of a title): <input type="string" class="form-control" ng-model="title">
                        <input type="submit" value="Search" class="btn btn-success" ng-click="findMovie()" />
                    </form>
                </div>
            </div>
                <div class="col-sm-6">
                        <div ng-cloak ng-repeat="result in results | filter: { display_title: title }" class="row results">
                            <img src="{{ result.multimedia.src }}" height="{{ result.multimedia.height }}" width="{{ result.multimedia.width }}" class="pull-left"/>
                            <div class="col-sm-6 pull-left">
                                <div><strong><em><a href="{{ result.link.url }}">{{ result.display_title }}</a></em></strong></div>
                             {{ result.summary_short }}</div>
                            <div class="clearfix"></div>
                        </div>
                </div>
            </div>

提前致谢！

【问题讨论】：

你能用你的控制器和你的html向我们展示你的js吗，
我刚刚更新了，谢谢，如果您还需要什么，请告诉我。谢谢！
带有 ng_view 的 html 部分可能有用。
同样在你的 movies.html 中你不需要放置一个 ng-controller 属性，它会在 ng-view 加载时自动添加
控制台是否出现任何错误？

标签： angularjs node.js express

【解决方案1】：

您可以简单地将其添加到您的路线中

/* ANGULAR MAIN ROUTE */
router.get('*', function(req, res) {
   res.sendfile('./public/index.html');
});

【讨论】：