Node Angular authentication - angularjs

I want to use frontend routing with angular js (with $routeProvider), and login using passport js. I found out that there are many problems while redirecting, communication between frontend and backend, showing messages and etc. Does there exist any complete tutorial on this?

I learned it here but it's long. Maybe it helps. They use what you need.

Related

routing in angularjs with nodejs

I am building an application with AngularJS 1.7 for the frontend and using NodeJS for the backend. I am facing troubles implementing the routes. What I'm trying to do is set up routes in angular as well as in Node.
For eg:
I have '/contacts' route in angular which server the index page for me. It works just fine.
Now when i want to load data into the page, I'm trying to make a http request to '/contacts' which should ideally get me data from the Node backend. I am actually confused on how the routing will work in this case. Will there be any conflicts?
Node code :
const contacts = require('./routes/contacts');
app.use(express.static(path.join(__dirname,'public')));
app.use('/contacts',contacts);
I have routing set up in contact file which i have included on top.
Angular code:
$routeProvider.when('/contacts',{templateUrl:'views/contacts.html',controller:'contactsController'});
You didn't provide whole code, maybe the problem is in the beginning of your configuration. I did work with angularJs and I have a simple project on my github which may help you how to manage routes.
See github-angularjs-springboot-project.

Single App with Symfony 3 and Angular 2 (Routes)

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.

Laravel, AngularJS and SEO

I am developing an app with an AngularJS front end and a Laravel API backend. The Laravel backend just listens for requests, process them and returns an answer. Front and back end are different independent apps... so far. I did it in such a way in order to be able to develop a mobile app later on which could consume the API. Im using also JWT to authenticate users, so Im not using Laravel's sessions at all. At this point I only require a webapp. I built a webapp which uses angular ui-router.
So far so good. The front end and the back end work well. However some of the front end views will be public and require share buttons, they also require to be indexable by Google.
I've read there are some alternatives.
Make some hack using the apache mod_rewrite in order to serve the angular app for people and a static version of it served directly by the backend. I think this would not be very difficult using Laravel.
Using Prerender.js. Which as far as Im concerned does pretty much the same job than option 1 but in a more complete manner.
However I am thinking about using a third alternative. Given that I only require the webapp now and the API is working I am thinking about using Laravel's built-in webapp functionality. I can use the controllers, directives and factories from angular and let Laravel handle the webapp routing.
An advantage of this is that I can render the meta tags using Blade (this fixes completely the SEO issues) and serve the rest of the contents using angular and the API.
Do anyone of you can see drawacks of such a solution or do you know a better way to accomplish SEO purposes using angular and Laravel?
Render Site :
You will have to render the pages from server side if you want to make it SEO friendly. But yes, what if you serve the server rendered pages to bots only. And for real users client side rendering will work.
Read about the Rendertron which will detect the user agent and accordingly serve the html.
Meta Tags :
Use Sluggable and replace id with slug in urls. You can follow https://oodavid.com/article/angularjs-meta-tags-management/

Web project with Angular in frontend and Symfony2 in Backend

I would like to have a web app with Angular in Frontend and Symfony in Backend. I separated this into 2 single projects and now I want to let them communicate via REST.
Now here's the point I'm struggling a little. First of all, is the project separation the right approach? Also, I'm confused with building a REST-Service with the ngResource-factory in Angular. Can someone explain this to me, how to create a simple GET-Request (no params etc and just how to use the factory. Dependencies aren't a problem)? The tutorial on AngularJS doesn't really help. Do I need to create a JSON-File as well?
By the way, I'm new to these 2 frameworks.
Thanks in advance!
Disclaimer: I'm the author of API Platform
Take a look at API Platform. It's a solution to create REST API using Symfony (full stack).
The official tutorial explains how to create a REST API in a first project then an Angular client (using Restangular) in another project.

Laravel and Angular.JS - Web App Dev

I have started learning Laravel and Angular, for one of my project at university. I want to rebuild the website www.lolcalculator.com with these two frameworks but I cant figure out exatly the best way to do that. From Laravel I want the less posible, because I will focus on Angular.
Can someone with more experience help me?
For example, do I need to use routing on both sides? Which functions of the website I should cover with Laravel(Mailer, Auth, Routing...) and which using Angular?
I just need to understand a bigger image, not in details.
Tnx a lot.
All the best :D
There's quite some information on the net regarding Laravel and Angular, but this one in particular is one that I found useful: http://scotch.io/tutorials/php/create-a-laravel-and-angular-single-page-comment-application.
You may also want to consider writting a front-end app in Angular and a separate back-end app in Laravel. The back-end app can then expose an API, consumed by the Angular front-end.

Resources