Monday, 8 May 2017

Dynamic URL doesn't work properly angularjs

I'm creating an app in angularJS and express but I'm a beginner. When I try to use dynamic url in the angular state, it doesn't work properly. I also have created a file to check api and normal calls.

api-check.js

var express = require('express'),
    router = express.Router(), // very important!
    path = require('path');

// Setup Router Middleware:
    /*
        Notes: The `apiChecker` function below will run any time a request is made.
        The API Checker will do a regex comparison to see if the request URL contained
        the `/api/` pattern, to which instead of serving the HTML file for HTML5 mode,
        it will instead `next()` along so the API route can reach the appropriate
        server-side controller.
    */
router.use(function apiChecker (req, res, next) {
    var regex = /(\/api\/)/g;
    console.log('--- url ', req.originalUrl);
    if (regex.test(req.originalUrl)) {
        next();
    } else { // if the URL does not contain `/api`:
        res.sendFile(path.join(__dirname, 'index.html'));
    }
})

module.exports = router;

server.js

var express = require('express');
var server = express();
var apiCheck = require('./api-check');
var port = process.env.PORT || 8081;

server.use(express.static(__dirname));
server.use('/*', apiCheck);
server.listen(port);
console.log('Use port ' + port + ' to connect to this server');

exports = module.exports = server;

appRoute.js

angular
    .module('appRoutes', ["ui.router"])
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
        .state({
            name: 'home',
            url: '/',
            templateUrl: 'public/components/auth/templates/home.html',
        })
        .state({
            name: 'set-password',
            url: '/password/:hashcode',
            templateUrl: 'public/components/register/templates/register.html',
            controller: 'RegisterController'
        });

    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
}]);

I put a print function in the api-check.js file and this is the result, when I try to access the dynamic url.

--- url /password/1234

--- url /password/bower_components/bootstrap/dist/css/bootstrap.min.css

--- url /password/bower_components/jquery/dist/jquery.min.js

--- url /password/bower_components/bootstrap/dist/js/bootstrap.min.js

--- url /password/external_plugins/maskedinput/jquery.maskedinput.min.js

--- url /password/bower_components/angular/angular.js

--- url /password/bower_components/angular-animate/angular-animate.min.js

--- url /password/bower_components/angular-cookies/angular-cookies.min.js

--- url /password/bower_components/angular-ui-router/release/angular-ui-router.min.js

--- url /password/bower_components/angular-resource/angular-resource.min.js

--- url /password/bower_components/angular-route/angular-route.min.js

--- url /password/bower_components/angular-touch/angular-touch.min.js

--- url /password/bower_components/angular-bootstrap/ui-bootstrap.min.js

--- url /password/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js

--- url /password/bower_components/ngstorage/ngStorage.min.js

--- url /password/public/appRoutes.js --- url /password/public/app.js

I feel that I need to change something in the server configuration but I don't know what exactly.



via user3390232

No comments:

Post a Comment