Question

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

以下是拉入视图的HTML以及对角度应用的调用：

<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>

提前致谢！

Answer 1

您只需将其添加到路线

即可

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

角度路由不使用Express

1 个答案: