For page navigation in asp.net MVC application with Angular.js, shall we use only angular.js routing or go to server for new page using asp.net MVC controller.
It depends on how you have designed the application architecture and communication.
Primarily, if you are using the ViewResult result type from the Action methods then you will have to use the MVC routes.
Understand that angularjs $routeProvider enables client side routing only and is not the same as MVC (server side) routes.
You use the $location object to capture the URL changes to the address bar and the request is captured by the angular route (before it gets a chance to fire towards the server) and the configured template and controller are served.
Hope you understand that you then would (generally) use the $http service to fire asynchronous calls to the respective actions on the server that WILL make use of the MVC defined routes too.
Logically, group related sections of your application using template-type routing on the angular side and more generalized routes on the server side.
Check out the mechanics in another post here.
Hence, like I said, it really depends on your design.
I personally like to just use MVC to serve the default AngularJS files and then let Angular's routing handle the navigation within the application.
Related
I am building an app built using ASP.Net MVC and AngularJS. I use MVCSiteMapProvider for building the site map and building Breadcrumb. I use Hybrid-SPA approach where part of the routing is handled by MVC and part by AngularJS. Switching between each module is handled by MVC and navigating with in the Module is handled by AngularJS (Similar to but with some modifications http://www.codemag.com/article/1605081).
My problem is with the Breadcrumb.
1) When I reload the page when in a route that is handled by Angular, the Breadcrumb is not built since the URL is not handled by MVC.
2) Is it possible to update the breadcrumb with the inner pages links when navigating through SPA handled by AngularJS.
I got rid of MVCSiteMapProvider and I use ng-breadcrumb (https://github.com/ncuillery/angular-breadcrumb)
Since you should always have a route defined at the angular level but the info at the MVC level is incomplete this is the only way to handle a complete breadcrumb.
Currently I have an application built with Angular 2 (all the front-end side) and Symfony 3 (web framework) . I have defined each view as an Angular application.
I think it's the time to migrate to a Single App but I have some questions before I venture into the lion's den.
If a user change manually the URL, of course, they, should enter to the requested URL, but how can angular know which url is trying to open?
I should create multiple controllers or only one that catch all the requests?
If none of above are the right way, please, can you suggest any way to do it?
Thank you so much.
If you're trying to build a Single Page application, it means that your routes will be managed by your front-end, here by Angular 2 via #angular/router.
Symfony can then be only used as a back-end web service (i.e. a Restful API) that will answer to your front-end calls via JSON responses. Depending on the size of your API, you may wish to use FOSRestBundle for that purpose.
So you don't have to worry about Symfony routing interpretation since your urls will be managed by Angular router. Symfony routes will be called directly by your Angular application to get/post/put/delete/patch your back-end data.
UPDATE
To answer you comment, a user who directly enters a URL will simply see the page you linked to this url via Angular routing, there is (almost) no difference between front-end and back-end routing.
If you want to dive deeply in how hash routing works in javascript, you can check this article.
To see a real-life example of a SPA with full Angular routing, ga.me is a good start.
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
My application is using .NET MVC and needs to stick with .NET's routing mechanisms so defining a $routeProvider and then letting Angular handle routing and retrieval of an html template is not an option for me.
Still, it would be very valuable for me to grab the routing parameters of the current url within the context of my Angular controller. So for example, if my current url follows this pattern:
/products/{id}
Then--hypothetically--I need only this in my Angular controller to retrieve the id:
$routeParams.id
Unfortunately, it appears as if it is all-or-nothing with the $routeProvider mechanism and that I have to either let Angular convert my application to a single-page deployment, or else I don't have access to route parameters from the Angular controller.
Am I missing something simple here? Can I simply define the routes somewhere just so Angular understands the patterns that the URLs in my app follow?
Routing functionality is defined in both ExpressJS thru app.get('/*') and in AngularJS thru
$routeProvider.
when('/*
What is the case scenario for needing to define routes thru both?
Part 2.
Server and Client Communication in AngularJS takes place thru REST API ? ( can it be handled thru socket.io?)
Part 1
Angular is only on the front end, so if you need to make calls to your database (getting data or posting data), it'll likely go through a route that the backend (Express) created (app.get, app.post).
If all your data is coming from someone else's site (API) and you don't need to store anything, then in that case you might not need any routes on the back end.
It really depends on what you're building. If I build a 'to do' list, I can have a 'Tasks' and 'Completed Tasks' page using Angular routes and then post and get routes in ExpressJS. You can also have multiple SPA (single page applications) on Express in turn you may need another Angular module that will have it's own routes.
Answer to your Part 2.
AngularJS using SocketIO
AngularJS is an SPA (Single Page Application) framework. For SPAs which need pages to be loaded can be used to route thru Angular so
when('SPA1/...
to define particular SPA which may be subset of your total app can be routed thru Angular. Where as your regular routes app.get('/home ... can be done thru ExpressJS.