I used the latest angular-fullstack-generator - v4.0.4 to create an app, but the client looks a lot like angular 2. It has components instead of controllers, it has classes, constructors etc. Have they stopped angular 1 now? Is there any option that I can set to create the app in angular 1? I do not know angular 2 yet.
Thanks!
Related
I'm going to launch a new project with this two frameworks (I like):
Laravel 5
Vue.js
The Frontend developer prepares the HTML's in atomic design, generated with patternlab.io.
Now I'm looking how I can integrate the patternlab.io project that I don't have to rewrite all the elements in a blade template.
I found some implementations combining Patternlab & Laravel using TwigBridge, Laratash Laravel extensions.
But I've some thoughts:
In the blade templates there is: logic, conditions, loops,.... If I combine patternlab and laravel then I need to put all this in the patternlab project.
Because of using vue.js I need to add also these tags to the patternlab templates
So I think it's not the best choice to integrate the patternlab.io templates in the laravel project.
My idea was:
Frontend DEV uses patternlab to create the templates
Laravel automatically generates & imports the CSS Stylesheet generated in patternlab
The Backend Developers copy the patternlab - molecules manually in the blade templates and add their own logic
If the Frontend DEV make changes on CSS, it's fine - we'll run in no issues; after rerunning the laravel gulp process to update the css files we have the new updates.
If the Frontend DEV makes some changes on a html structure we need to manually adjust them.
Is there a better solution combining Atomic Design, Vuejs and Laravel? How do you deploy atomic design in your CMS?
In the last three Vue/Laravel projects we've created we'v stopped using PHP as a rendering engine all together and used Vue exclusively. Laravel is still a really great framework for writing business logic and apis in a clean testable way – but we've decided to never use blade again.
Typically the issue you run into when trying to create a JS rendered application with a PHP backend is the lack of server side rendering. To solve this problem I've turned to a new project out of the Vue community, Nuxt.js (I have no affiliation with them, just a happy developer). Nuxt lets you write vue components and have them be both server side rendered, and rendered in the browser after the initial page load.
This allows us to completely decouple all of the rendering responsibilities away from Laravel and keep it in a single location, so no need to do blade and Vue – it's all Vue.
The only downside is that you'll need 2 servers Node.js and PHP.
I'm currently building a web app using Laravel 5.1 and would like to start creating a native application so that my users can use their phones. I have decided that using the Ionic Framework is likely the best approach for the app and just have a few questions on marrying the two together.
I've got routes in Laravel that looks like this example:
app.dev/geckos - This is a GET request.
Which takes the currently authenticated user, uses their ID and fetches all geckos that match their user ID. It does return a blade view however.
I assume that when working with something like Ionic, the GET request would need to return JSON instead on order to loop through properly?
Is there a way that I can alter my controller to serve JSON based on if the route was something like this instead:
app.dev/api/v1/geckos
Both routes would use the GeckoController#index method, ideally I just don't want to repeat the code.
I'm fairly new to Laravel and very new to Ionic. So if I'm over complicating this theory please let me know.
Any information is appreciated on this,
Andy
Another solution which I used is to have 1. application in Laravel, which is a RESTful JSON API. Then you would have 2. Web app (in AngularJS) and 3. Mobile app in Ionic (which is based on AngularJS).
So you will create two separate applications, mobile and web, which both communicate with the same JSON API. The web would be a single-page AngularJS application, so that way you can reuse all the Angular services which communicate with the API, maybe even some controllers between your mobile Ionic and Web application.
You will save some time when creating two separate responses for mobile/web application, since you would create only one: JSON response. AngularJS will take care of rendering in both applications, that way you won't have to create separate templates for web applications in Blade, instead make all the rendering using Angular in both applications. There will be some nuances in rendering of the same content in Web and Mobile app, but it would only require creating separate js directives/css styles/html templates for both applications, using Blade you wouldn't be able to reuse any view related code between applications. Also you will be able to use the same Authentication method for both applications.
To sum up, this solution should be cleaner then your solution because you will be able to reuse backend entirely between the applications, reuse a lot of fronted stuff (like input validation code, services, filters,..), reuse Authentication and introduce looser coupling and have much clearer structure then the ugly response type switch in controllers.
EDIT:
So this can be a rough example of the structure of such project:
1. API - REST in Laravel, returning JSON
-Controllers
-Session // actions CREATE, DELETE
-User // actions CREATE, VIEW, UPDATE, DELETE..
-Gecko
2. JS application - Angular App, for both mobile and web app
-common //controllers, services, filters - most of the frontend logic which reusable between both applications
-controllers.js
-services.js
-filters.js
-mobile //this part can be hosted on some server or part of the mobile application
-app.js //separate configs for mobile app
-controllers.js //controllers only for mobile app
-directives.js
-web
-app.js //separate configs for web app (links to HTML template URLS,...)
-controllers.js //controllers only for web app
-directives.js
-services.js //or even services only for web app
3. WEB APP
-HTML Templates - bunch of static .HTML files
-Home
-Login
-Register
-Gecko
-Gecko Views...
-Some index file with layout template, which includes everything from js/common and js/web, entry point to your web application
4. MOBILE APP
-www
-index.html // must include everything from js/common and js/mobile
-templates
-Gecko
-Gecko Views...
But the structure may vary significantly, depending on what part of mobile application you want to have hosted on web server and which should be available offline, or how you want to host it, how detailed the structure might be..
Doing this would be messy because your single controller action will be returning two totally different responses.
However if you go down this route, you could add an additional header to the request from the mobile app, and then check for this to switch the response.
I realize that Telerik has posted a roadmap to releasing an Angular 2 version for Kendo UI. That's awesome, however; our company has already begun developing using Angular 2 and our release map is not inline with Telerik's. One strategy we are considering is to use KendoUI Angular 1 directives and the Angular 2 UpgradeAdapter. This will enable us to use Angular 1 directives inside of a Angular 2 implementation.
Has anyone used the UpgradeAdapter to leverage Kendo UI Angular 1 directives inside of Angular 2 using upgradeNg1Component?
Thanks!
I am leaning towards using Reactjs for our Web UI. Are there any resources/examples explaining how I can reuse or replace my Web based components emitting HTML with components supported by Reapp so that I can make a mobile app easily leveraging the same Actions and Stores?
2 places spring to mind:
https://reapp.io/ui.html
https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux
Hope that helps
I would like to build an application using Laravel as backend and Yeoman to build and manage my frontend. I know quite a few of these technologies.
I did not found a lot of worflows that would explain how to communicate between separate Laravel app and yeoman app (on different servers e.g). Maybe CORS is a good option.
Is anyone ever try to separate backend and frontend (with these technologies)?
Yeoman is not a front end framework - rather an application scaffold for generating a starting point for your front end.
Angular JS is my preferred option when using Laravel as a backend. You can use Yeoman to set up an Angular front end using this:
https://github.com/yeoman/generator-angular
An excellent tutorial series that helped me a lot when setting AngularJS up to talk to Laravel is here:
https://github.com/davemo/end-to-end-with-angularjs
Included is quite an extensive explanation on AngularJS security.
The Laravel backend should be setup as an API in the first instance to accept requests, heres a starting point to setup a basic API in Laravel from Laracon 2013
https://github.com/akuzemchak/laracon-todo-api
Laracasts also has a great series for building API's:
https://laracasts.com/series/incremental-api-development
Laracasts is a paid subscription service but would fully recommend it to Laravel beginners/intermediates
I know it's a long time ago since the question was asked, but perhaps it helps someone on it's way..
I would start with this package:
https://github.com/jadjoubran/laravel5-angular-material-starter
Overview: http://www.laravel-angular.io/#/
which gives you:
Laravel 5.1
Angular
Angular Material
and much other stuff, preconfigurated, out of the box..
In short:
CORS is a bad option.
Issue all the requests to the frontend server and make it forward backend-specific requests to the backend server.
In production have all the stuff served exclusively by backend server.
Here's how to achieve that for Java-based frameworks and also for Django: https://stackoverflow.com/a/20680962/1432478
Should look similar for your framework & build system.