How does Angular and Express routing work together in a mean.js app?

Question

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 startin

Answer 1

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