So I am planning out an app of moderate complexity using Angular for the frontend and Lithium for the backend. I'm full of questions at this point, but for this post I would like some ideas on templating. Both lithium and Angular have the capacity to handle the entire view layer, but I'd rather treat it like a single page app, so Angular will handle this.
Now how would I handle routes? Would Lithium basically be dumb of the current routes beyond the index? Should API endpoints have a special url scheme separate from the view URLs?
This is how I am thinking now::
theapp.com/dashboard/calendar/event/eventID :: for a view handled by Angular
&
theapp.com/api/event/eventID :: for an API endpoint
I'm quite new to building something this complex so please forgive me if this is a simple question. :)
Am I totally off the mark?
This presentation should be helpful: http://li3-angular.lithium-framework.com/
What you're planning is the way to go: Li3 expose a json api, and Angular handles your routes and views. Your URL scheme should follow REST principles.
li3_resources will help you to build a RESTful api: https://github.com/nateabele/li3_resources
Angular UI router should help you with your routes: https://github.com/angular-ui/ui-router
Related
Have an MVC app with razor pages. Converting it to use Knockout. Then once complete, will go back and convert all Knockout to Angular. I want to get educated on that strategy. Not a pros and cons question; I mean logically it is inefficient as the rewrite might be more difficult than if we were to go straight to Angular. What pitfalls, gotchas, or lessons learned have other people had converting Knockout to Angular?
I've done both knockout and angular development. It's easier to go from knockout to angular than the other way around. Obviously the least amount of work would be in going straight to the framework/library you intend to end with.
Knockout is easier to replace razor with because it's just a simple binding library, so you can stick with razors routing and replace the razor syntax with knockout js files and html. That is, unless you want to pair knockout with require.js so you can serve up a single html page from your MVC app and treat it as a single page application. That is possible as well.
If you're going full SPA, go straight to Angular and pair it with ASP.Net Web API 2. Serve up a single page and then make all subsequent requests return json. You can do that with MVC too but Web API 2 is better.
You could also keep the server side routing of MVC and serve up single small apps at a time of Angular, but that's pretty meh.
Best option? Angular SPA served once on the root of the app, all routing handled in angular using ui-router (2 is out i think), and then back it on the server side by ASP.Net Web API 2.
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 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/
I´d like to know if exists a better way to render a view like this:
For the first load I need bring data from Controller like usual but after apply a filter in same page I need to start use AngularJS and never more uses Razor.
Is there a way to do that ?
Thanks for all.
Yes. you can do that.
Basically, you'd need to add the line below in your view. After you do that, the json is going to be available to the DOM / javascript and angular can take it from there. Hope this help
var json = '#Html.Raw(Model.MyJsonStringForMyCoolAngularJsApp)';
There are multiple ways to implement ASP.Net MVC with AngularJs.
I personally like Mini SPA (Silos). You can watch Miguel A Castro's video here.
You can also download the source at his website.
What it does is when a request comes in, it goes to ASP.Net MVC Route first. Then, Angular Route takes over the rest. It is a very slick design.
FYI: I also use Angular.Net Helpers to generate strongly typed views.
You could use WebAPI project in visual studio to exchange data between frontend and backend. It would go stateless, so to secure the data, you could use a mechanism like JWT.
The frontend would exchange JSONS from/to the backend using REST apis.
Yes. You can make angular views and exchange data using $http.get(/controller/method/). You can also configure routing using ngRoute.
I'm in the early stages of planning a web app built around consuming a content-management API. I have really taken a liking to Backbone.js after finding its ability to easily parse collections and models from REST end points.
I would like to have a full client-side routing solution with pretty URL's via pushState and browser history. Backbone has a router but I am not sure how to structure my React views and Backbone logic to make this all happen. Any pointers?
Also limelights mentioned React Router. Is this a better way to go while still interfacing with Backbone models, collections, and events?