I am working on an App which is going to be huge.This app is using Laravel for backend and currently uses Angular to load views which i believe is not suitable for a large application.I would like to rewrite the code to load the views using Laravel's Blade engine.
I have gone through this:
What application structure to use with AngularJS and Laravel?
I am interested in the second option provided in the answer but have no idea how to implement it in my existing application.
Please suggest me what changes do i need to do.
Thanks in advance.
Related
We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)
I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.
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 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.
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.