CODEWITHSUNDEEP
angularjsnode.jsexpress
wdc_dt
wdc_dt

Reputation: 93

Angular Routing Not Working With Express

I am trying to create a single page app using Angular. routing I'm using Node/Express on the back-end. While Express is serving my static index.html correctly, my partial .html pages are not being pulled into my ng-view.

Here is the HTML where the view is being pulled in along with the call to the angular app:

<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:[email protected]">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div ng-view></div>

Here is my Angular routing code:

        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);
    }]);

Here is my Express server.js code:

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 + '/');
});

Here is my factory code and I have include the call to the Angular app:

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;
}]);

Here is my controller code:

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

Here is my HTML block with the controller:

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

Thanks in advance!

Upvotes: 1

Views: 2020

Answers (1)

JSEvgeny
JSEvgeny

Reputation: 2750

You could simply add this to your routes

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

Upvotes: 1

Related Questions