I'm trying to make angular's routeProvider to manage all the routes of my app. I define my routes accordingly in the app.js file of angular (client side):
(function(){
var app = angular.module("Crowdsourcing", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/single/:street/:buildingNumber/:apartmentNumber", {
templateUrl: "/views/single.html'",
controller: "ListingCtrl"
})
.otherwise({redirectTo:"/"});
});
}());
However, when writing a URL (e.g. /single) on the browser that request is tried to be handled by my backend express/node api. Thus, it is not found because the backend routes are for example /api/foo. How can I make sure Angular's routeProvider always manages my requests?
And more important what is the basic flow of the application? When Client writing a URL how does the application knows whether the url is handled by express js or by routeProvider ?
Generally you distinguish URLs which are handled by the angular app from the express URLs by using a # sign between hostname and page URL.
For example:
If you want to request an URL from the backend you would call:
http://host.com/api/foo/
Instead if you want to request an URL from the angular app you would call: http://host.com/#/single
So if you want to call the angular app URL you have add the # sign.
This is a very important fact you need to keep in mind when working with single page applications.
Update:
Have a look at this seed project: https://github.com/btford/angular-express-seed
It uses the a similar technology stack as your project. This should make it more clear for you.
I have faced the same issue few days ago. The problem is, even when you make a server call for data it redirects it to client side routing and searches in $routeProvider.
You need to make sure you add something like below code in your server.js.
It means when ever there is a call starting with /api then it will redirect it to the routes in server side instead of client side routing.
var api = express.Router();
require('./app/routes')(api);
app.use('/api', api);
In your factory when we make a call as below this will go to server side routes.js rather than client side.
$resource('/api/adduser')
Related
I tried to remove '#' from angular-urls, I have done the tweaks in my front-end like
$locationProvider.html5Mode(true);
<base href="/*"> in my view file.
I am using express in by backend. THough Its works well but when I refresh page it gives me error url not found.
My default url is like from express to render view is like,
//server.js
app.use(express.static('app'));
var routes = require('./routes/index');
app.use('/', routes);
/routes/index
router.all('/', function(req, res) {
res.render('home');
});
It works in case if I click http://localhost:1337/ first. It moves nicely to this http://localhost:1337/first-param but when I click http://localhost:1337/first-param directly without going to base url it gives me not found error.
Please don't give me hint for .htaccess. I don't want to use .htaccess.
Well.. you are only handling '/' route in your app. So every time you ask the server for another route say '/something', the server does not know what to do.
Try This (Use router.get() instead of router.all() to only handle get requests):
router.get('/*', function(req, res) {
res.render('home');
});
This should handle all the routes.
UPDATE
Of course you might want to have other routes handled by your express app, say for your API.
To do that, I suggest you create your api in the format '/api/foo/{bar}'
And you set up your router in the following way :
router.route(/^((?!\/(api)).)*$/).get(function(req, res){res.render('home')});
The regular expression holds true for everything that does not start with /api and returns the home page.
Remember, add this configuration BELOW all the other routes to maintain the heirarchy.
To summarize : The last snippet of code handles all the routes except the ones that start with /api and you design your API to always start with /api . Use this method and it should work just fine.
Use superstatic to serve your application.
Then use the options in my answer here: Combining AngularJS, HTML5 locations and superstatic
I am new to Angular and one of the things that I am trying to wrap my head around is the route authorization. I am coming from the .NET/IIS world where route authorization is as simple as decorating your API or MVC controller with the [Authorize] attribute.
I have read several posts and documents on how Angular handles routing. My concern is that the authorization is happening on the client. What prevents the user from firing up the dev tools, breakpoint the script execution, and changing the variables in the authorization service that control whether or not the user is authorized to access this route?
As I mentioned, I am new to Angular, so maybe I have misunderstood how the routing works. If this is the case, please correct me.
So, my question is: How can one achieve the same level of security with Angular routing as you would if using server-side routing authorization?
Thank you.
It is evident that pure client side solution cannot exist. Thus, only Angular routing cannot be used in cases when a certain route have to be securely restricted. I am thinking that routing has to be handled on both ends.
I am using Node so here is what I did:
//first evaluate the restricted route
app.get('/admin/*', function(req, res) {
//authorization
var authenticated = call_to_auth_service();
if (!authenticated) {
res.status(403);
res.end();
}
else {
//just remove the front /
var url = req.url.replace('/admin/', 'admin/');
res.render(url);
}
});
//open access - everything else goes back to the index page and there the angular routing takes over
app.get('*', function(req, res){
res.render('index');
});
This works, but I am not sure if this is the best approach. What do you think? Is this the proper way of handling the routing?
Thank you.
I'm struggling about Angular and Express Routing (by the way, i'm somehow new to Express), i've been handling routes with Angular — with ui-router — but now that i'm starting to build a MEAN.js Application i notice that i can handle server-side routing and client-side routing... and that's what makes me get confused, here are some of my questions:
How are they different?
If i switch to Express routing will i still have a SPA?
Can i use both at same time? How? Is it good practice? Does it has any benefit?
When should i use only one of them?
How will i handle route parameters?
etc...
If someone can explain with detail these questions, and other extra things people need to know i'll be totally thankful.
Also, something that i want to know is: Do i only have to setup server things in Express or do i need to code in Node?
Routing in Express is sightly different then what it is in angular
In express
Routing refers to the definition of end points (URIs) to an
application and how it responds to client requests.
So if you are doing the routing using angularjs then you do not need to set the route for your html template using express.
you simply use express in a way to create your RESTAPI and then consume those API using angularjs $http or $resource
Summary:
Routing in Angular supports the idea behind a SPA. Ultimately you want to handle UI based route changes (i.e. no server call/logic needed) via Angular. Any route change that hits the backend, and ultimately requires server logic, should use Express routing.
Example
This is express routing to create rest API.
app = express();
app.get('/dowork',function(res,req){
console.log(req.params.msg);
/... code to do your work .../
});
now in angularjs call do work
$http.get('http://localhost:8080/dowork',{"msg":"hi"}).success(function(data){
console.log(data);
});
Just two cents here. Other expert should correct me and explain further :
Routing at frontend usually means routing management in url after #.
This is because anything after # is ignored by browser. So this is utilized by angular to make on the fly ajax calls and fetch resources depending on route path after #.
What express handles is url before #. This is used to make actual request from browser to server.
How are they different : answered
If i switch to Express routing will i still have a SPA :
You can always have SPA if you manage urls manually at front end side while making ajax calls to populate your single page. managing urls at front end should be with intention of readability.
Can i use both at same time? How? :
Everyone uses both. A SPA also uses both. Usually authentication based thing is handled by express routing while authorization and other routing based interaction like requesting for resources and others, front end routing is used. Even if you use front end routing, for ajax request behind the scene, you are still relying on express's routing.
Is it good practice? Does it has any benefit? :
Using express's routing for authentication and providing resources AND using angular routing for front end to keep SPA in action is always a good practice.
When should i use only one of them? : answered
How will i handle route parameters? :
There are parameters handling both for front end side using route params ( if using ng-route) and at the back end using slug, bodyparser and others.
You need to spare some time learning those.
Can we use both
of-course you can use both. Depending on your application requirement, what portion of your app need to be spa for better user experience and what portion views need to be render by your express app.
If i switch to Express routing will i still have a SPA?
if a particular routing is not handled by angular and you want to generate a view by express app you can do that. if you want to develop a complete spa then you need to develop a api (http end points) in you express app to respond to AJAX requests of your angular app. Angular routing is all bout clint side routing that is used to generate template and fetch data from server (in your case express) and render a view. Over all your angular routing calls to your express routing to fetch json data or any template to give the impression of a spa
example
in express we have
app.get("/", function (req, res) {
res.render("home");
});
you home page must include all the angular script files to initialize the angular app
in clint side code you can have
var app = angular.module("myApp", ["ui.router"])
.config(function ($stateProvider, ) {
$stateProvider.state("home", {
url: "/"
})
.state("manas", {
url: "/manas",
templateUrl: "/templates/manas.html"
// when the state or url is manas its fetch the static manas.html from server and inject that to ui view
})
// i am using angular UI router here
Can i use both at same time? How? Is it good practice? Does it has any benefit?
Ya we can use both at same time. It depends on your application logic their is no harm or benefit of using both.
When should i use only one of them?
Go with express routing only if you are more concerned about search engine optimization. Because SPA are not by-default search engine friendly you need to take some extra action to make it search engine friendly.
How will i handle route parameters?
it depends on what angular routing you are using. I mean vanilla angular routing or UI routing. But the concept is same for both
passing parameters
For passing parameters to server with UI routing go through
https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters
for UI routing follow this link
https://github.com/angular-ui/ui-router/wiki
if you app is not more complex you don't care about nested views child views etc
my suggetion go with angular plain routing.
No doubt UI router gives more advance routing concepts but learning curve is steep as well. if you app is simple in nature go with angular routing
I have read several other answers on this topic, but I do not fully understand how this works. I have an angular front-end. I am trying to use $routeProvider to load partials into my page for a single page application. I am getting 404 for the $routeProvider requests and I think there must be a way to set this up without declaring a route for every partial on the server. There will be many more partials soon even though I only have one declared in my config right now. My routeProvider code looks like this:
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/register', {
templateUrl: 'partials/register',
controller: 'registerCtrl'
})
}])
but going to localhost:3000/register gives a 404 error. I looked at this response on SO as well as some others, but I have not been able to put all the pieces together.
Express 4, NodeJS, AngularJS routing
How is this solution from the above post
app.use('/*', function(req, res){
res.sendfile(__dirname + '/public/index.html');
});
able to find the partials and return them to the front end (btw this snippet did not work for me).
My app isn't much different than creating a new express app with express generator. I have these require and use statements related to routing:
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);
and this route to serve my home page in routes/index:
router.get('/', function(req, res, next) {
res.render('home');
});
When you use front-end routing you don't have to declare a route for every partial on the server. The simplest form of the solution is to let the user hit any route with a wildcard match on the back, and no matter what route they're viewing you just serve up the same front end application template. So in fact you for the most part do away with backend routing altogether. Once your JS kicks in and reads the current route out of the navbar, it will resolve the appropriate view.
Check out one of the tutorials for how to configure your express backend to handle this:
http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html
There's some nuance and previously there was controversy around this structure because of things like SEO, but a lot of that has been cleared away by Google now being able to parse JS and resolve the view in SPAs (http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html)
Of course, you will actually have some routes on the backend in order to accept api requests, but ideally that's it unless you choose to get fancy and go isomorphic, prerendering the js on the backend and serving a completed view (though that's better suited in React for now, at least until Angular 2.0)
I am using Node for back end Angular for front end but what will happen if will declare same route for front end and backend. I haven't tried it yet.
E.g: If I am building a TODO app and if I have /todos back end service and I am rendering todos view with same route using angular.
AngularJS is processing the route after the # by default. So nothing will happen if you don't change that.
Otherwise, the backend route will be called.
Angular is client side browser framework. Your app defaults to slash(/) which points to your index.html. Your routes prefixed with hash(#) which prevents browser to make requests to server.
Angular defaults to client side & use its own routing mechanism. Express provides server side RESTful routes which behaves like an REST Api for your angular app.
In case if you want to use HTML5 Pushstate API(removes hash(/)) from default angular routing mechanism, the only thing which separates angular routes and express/server routes, You just need to structure your app like below.
express()
.use('/api', backend) // backend is express app
.use('/', www) // www is public/static files
.all('/*', function (req, res, next) {
"use strict";
// Just send the index.html for other files to support HTML5Mode
res.sendfile('./app/index.html', {root: __dirname});
})
.listen(process.env.PORT || 8888, function () {
debug('Express dev server listening on port ');
});
Your express/server routes lies after /api part, and other routes(obviously your angular routes) will return index.html(html snapshot).
Above mechanism is mostly preferable for MEAN web apps.
Angular provides its own routes after # like myhost.io/angular/#/someroute while node provides ordinar routes like myhost.io/some/other/route witch makes almost impossible to fail!
NOTE:
But you must be careful with setting routes, because if you have static files (like angular client), your routes with same path won't work using express or connect.