Using ExpressJS and AngularJS

Question

I'm learning NodeJS and Express. I'm using Node and Express along with 2 Node modules to get the client's IP address. That part is working fine. I'm having trouble trying to use AngularJS (1.x) to display the geolocation data from the Node module in the browser using Angular. I'm doing something wrong because I can't get the geo data to show via Angular in the browser.

 // get IP address
app.get('/ip', function (req, res, next) {
    //var ip = req.myCustomAttributeName;// use this for live
    //var ip = '207.97.227.239';/* use this for testing */
    console.log('requestIP is ' + ip);
    // geolocation
    geoip2.lookupSimple(ip, function(error, result) {
    if (error) {
        return res.status(400).json({error: 'Something happened'});
        }
        else if (result) {
        return res.send(result);
      }
    });
});

I believe I have Express serving my static files correctly

app.use('/assets', express.static(__dirname + '/public'));

And the index.html in my /public folder that serves up AngularJS and my Angular app

    <html ng-app="UserLocation">
<title>The MEAN Stack</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body ng-controller="MainController as vm">
    <h1 style="color:blue;">{{ vm.message }}</h1>
    <br>
    <h2 style="color:red;">{{ vm.location }}</h2>
    <script src="/assets/js/app.js"></script>
</body>
</html>

And the Angular app

    angular.module('UserLocation', []);

angular.module('UserLocation')
    .controller('MainController', MainController);

MainController.$inject = ['$http'];

/*function ctrlFunc () {
    this.message = 'Hello World again';

};*/

function MainController($http) {
    var vm = this;
    vm.location = '';

    vm.message = 'Hello World';
    // user location
    //function getLocation () {
    vm.getLocation = function() {
        $http({
            method: 'GET',
            url: 'localhost:8000/ip'
        }).then(function (result) {
            console.log(result);
            return vm.location = result;
        });
      }; 
    };

The IP works and is displayed at '/ip' but at '/' I get Cannot GET / What am I doing wrong to the geo data to display at '/'

Have you defined any route for that? Something like: app.get('/', function () { ... } ) — Nehal J Wani
– Nehal J Wani, Commented Feb 4, 2017 at 17:22
@NehalJWani ah thank you! I had a suspicion I was missing something like that... just wasn't sure... still learning Express. — user3125823
– user3125823, Commented Feb 4, 2017 at 17:42

Salih Şenol Çakarcı · Accepted Answer · 2017-02-04 17:22:56Z

3

To let your client side application handle the routing

// All other routes should redirect to the index.html
app.route('/*')
  .get((req, res) => {
    res.sendFile(path.resolve(__dirname + '/public/index.html'));
});

answered Feb 4, 2017 at 17:22

Salih Şenol Çakarcı

2,33015 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using ExpressJS and AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related