I am doing a sample MEAN application.I have my angular routing but when I am making any request it is directly hitting the server and giving me a Cannot GET /movies.
Here below is my server side code for serving static files.
//Serve html files
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
//Register all the client folder
var client = __dirname + '/modules';
fs.readdir(client, function(err,files) {
files.map(function(file){
app.use(express.static(path.join(__dirname, '/modules'+'/'+file+'/client')));
})
});
//Serve js files
app.use(express.static(path.join(__dirname, '/public')));
//Load the models
app.models = require('./index');
//Load the routes
var routes = require('./routes');
_.each(routes,function(controller,route){
app.use(route,controller(app,route));
});
Inside my client folder another folder called 'view' is there where all my templates are there.
Below is my routing for /movie URL
angular.module('movies').config(['$stateProvider',
function ($stateProvider) {
// Movies state routing
$stateProvider
.state('movies.list', {
url: '/movies',
templateUrl: 'views/movie.html'
})
}
]);
Add urlRouterProvider
to config and Add Controller to stateProvider.state
:
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
});
Reference:
https://github.com/angular-ui/ui-router