Angular/Laravel flow design for multiple view form - javascript

I'm building a web site (no SPA) with Laravel and Angular Js.
So far it works like this: All routing is made by laravel Router (the views are displayed by laravel controllers), but all the CRUD operations are made in asynchronous requests by angular (save, delete, view).
So far I had very simple views: one form to create resources on one column and a list of resources on another column. Like this
The problem is that the last form has a lot of fields and i want to split it in two separate views. I read about angular routing but the way i see it, you must configure the routing for the whole angular module and i want to use it only for this specific controller. What's the best approach on this one?

So this is how i decided to go after reading a lot, create a new module for my big view and configure the routing only for the new module. I hope this helps someone eventually.

Related

Web : What is the best way to build the back-end/front-end relation?

I'm starting a PHP/JS Web project using Laravel for the back end and Angular 2 for the front end.
But I'm wondering how I should relate these two frameworks.
The two solutions I found was :
1 - Writing the whole Angular project in laravel's public folder and launch it from a app.blade.php in a Laravel view. Which makes it easy to pass the Laravel Auth data to Angular, but makes the public folder quite huge and probably too messy.
2 - Having two separate projects. And call the Laravel's api routes using JWT (I don't know a lot about that but read that it was a nice option).
So my question is, which of these 2 solutions is the best and why ?
Thanks
Hello I'm gonna give you a third option, which is the one I use for my projects with Laravel + AngularJS
So I use Laravel for 2 things:
*Retriving views
*Managing an API
For example if you request something like project.com/users Laravel will manage this and return the users.blade.php view
Then in this view I use angular to ask for data to the API (In laravel) and retrive it and load it on the HTML.
With this I take advantage of Sessions with Laravel (By retriving the views) and I take advantage of AngularJS with controllers and data-binding.
Also the directory structure is ordered because all views are in resources/views and for the controllers of angular I put them on public/js/controllers.
Hope this help you

How to handle multi-page website using angularjs?

I want to create an android application using Cordova, and I am using angularjs to fetch and handle data from the service end-point of a Drupal website. Initially I tried to use ngRoute of Angularjs but didn't seem to fit properly, so I turned to 'ui-route'. But I facing problems with ui-route as well.
My main aim is to use a particular view/template for multiple pages. I am new to Angularjs, so kindly help me choose the best way to proceed. My main question is how to handle multiple pages, can we just have each page as separate html file and link them or use routing. I tried to look into many tutorials but nothing helped me. Even giving an example would be enough.
I understand your problem. You can achieve this via $stateProvider but you don't know how. I am giving you a application link there you can see how to use $state.
kitchensink
download this application.
if you want to reuse your template then use custom directive and see this or more info angular

AngularJS - Asynchronous loading of parts within the app

Currently I am working on my app and I decided to use AngularJS as a framework to structure my front-end code. However, I don't have any experience with AngularJS and thus, am currently struggling with the concepts and logics of it.
Below you can see a rough draft of my app's scaffold:
So what I am trying to do is to create a single page application for my whole app.
Within the <menu bar> one can select different pages to display within the workspace. I learned that I can realise this behaviour by using the <ng-view> directive.
However, what I want to do is, depending on the buttons clicked within the <workspace> (-> the currently loaded view) I'd like to show different <sidebars>.
For example: If one clicks on an edit object button within the workspace, the form to edit the object will be loaded into the sidebar.
At first I though I could solve this by using multiple ng-view directives within the app, but I learned that this is not possible.
So, do you have any ideas on how to realise the above described behaviour?
I would like to asynchronously load <sidebar> templates whenever they are needed within the app. These sidebar templates should contain some logic, e.g. buttons to submit data etc.
I really don't know how to realise this behaviour, as I'm as well struggling with how to use scopes and controllers in this context.
Any ideas, articles, examples are highly suggested! Thanks.
Edit: I created a small and only minimalised draft of how I imagine AngularJS would handle the process:
You can use Angular-UI.
The UI-Router has much more powerful routing features than the default AngularJS router.
For the views, with Angular-UI, you can have multiple views in a same document (ui-view) and each can load a different template depending on the current application state (the URL).
Here is the documentation for these components:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
https://github.com/angular-ui/ui-router/wiki
You definitely should check it out!
Please note that once you'll get your two templates, they will be in different scopes so you'll need some sort of communication service to handle passing data from one scope to another without getting into a $watch or $rootscope hell.

NODE and CMS with angularjs: how do they cooperate

I'm thinking about making something with the MEAN stack. I need a way to edit the content of the site, like e.g. Wordpress offers (basically a CMS).
The confusing bit is how the CMS and Angular would work together. I've looked at a CMS named Keystone, and there you have to set up some routing etc. in Node. Won't this crash with the routing you set up in Angluar?
In other CMSs I've used, the creation of the views happens on the server side. In Angular, as far as I understand, you crate a HTML template, which you can populate with data in an angular controller. This also seems like something that could crash between CMSs and Angular. Is this the case?
Is there any other quirks or similar about Angular and content managment systems I should know about, or is it usually not much problems integrating the two?
meanjs.org has a pretty good approach to this. Install meanjs. It comes with a sigin/signup and even allows you to create articles from the vanilla install.
Put simply, when you are creating a web app with the MEAN stack, think of AngularJS as "THE" app, and node.js as the api.
If you approach building your web app as a javascript application (AngularJS), that happens to get its data from an server api (node.js), then you will begin to understand how to properly use the MEAN stack.
First: Angular will have the routes defined in the $routeProvider. Build the routing urls in AngularJS first. They are "THE" routes for your web app. A good way to look at it is to build the AngularJS portion with the ability to change your api server, even to another language (PHP, python, go, etc) if necessary.
Second: Build your AngularJS to communicate to the api with $resource. Essentially a $resource is an easy way to call out to an api using restful routing. This "restful routing" is now the routing that needs to be "mimicked/copied" into the routing for the node.js routes.
Often the AngularJS routes (the url) will match the $resource routing that matches the node.js routing.
Again, take a look at meanjs.org and you will have a better understanding on how to properly organize what "seems like" (and actually are) two separate apps.
Basically, you need three sets of routes (or two if you are doing it on the cheap).
Start out with a set of routes on the server that return regular webpages. Forget about JavaScript. Do not involve Angular at this stage.
Second, add another set of routes on the server which return data in a rawer form (such as JSON). This would typically be a RESTful API.
Third, add Angular to the client. When the view needs to be updated, update the URL in the browser and use Ajax to hit the RESTful API to get the data needed to populate it. (You want the URL you set the address bar to to match the URL of the page from the first set of routes that you are duplicating with JS and the data from the RESTful route).
If you are doing it on the cheap, like Gawker did, then you would skip the first set of routes and go direct to the JS+REST approach.
I think you need CMS on MEAN stack development environment.
there are some cms on mean stack you can try.
PancilBlue
Calipso
try this.
I was trying something similar, I found this link very useful AngularJsCMS It has told about free respond cms which is based on angularjs and have the ability to create pages like wordpress and manage contents.
We have been working on a project using angular and keystonejs. Simply serve the default template layout found in keystone and inject the data-ng-view tag within the body tag. Serve this template for all requests to '/'.
Then write your angular app normally to consume endpoints. These endpoints can be done in keystone using the api middleware. In the routes/index.js file add a key/value pair in the routes object with the name of your custom endpoint then import the folder containing your endpoint function definitions.
var routes = {
views: importRoutes('./views'),
api: importRoutes('./api')
};
exports = module.exports = function(app) {
app.get('/api/posts', keystone.middleware.api, routes.api.post.index);}
I recently migrated my blog over to MEANie - a lightweight custom MEAN Stack CMS that I developed.
I made it open source for anyone to use and posted details and setup instructions on my blog at http://jasonwatmore.com/meanie.

Laravel and Angularjs partials

I have a fairly simple app that filters a list of products.
Laravel creates the JSON feed for the products that I am reading and outputting with Angular and Laravel returns a filtered list based on what a user selects in a detailed filter form.
I have a requirement now that as a user filters results that the URL is changed in the browser and if the copy and paste it or share the link that they will be able to see the same results when the visit the app.
To do this I'll need to create routes with Angular and make use of angular partials. From reading the angular docs and watching a few screencasts it seems I need to reference partials that are html files.
Since I'm doing this with Laravel I've been using a Laravel view for my main view and using angular template tags within it and that works fine. If I want to start using partials how should I go about this? Where do I put the partials and can I reference them in my main laravel view?
Thanks!
Can you provide any samples of your views code?
You might find this helpful when working with Blade and Angular.js
http://scotch.io/bar-talk/quick-tip-using-laravel-blade-with-angularjs
If you could provide some code it would make it easier to help, I don't quite understand what you're attempting to do.
You should be able to use ng-include anywhere in your Blade view.
You can use $location to change the URL, though I'm not sure how it will handle a lot of changes in quick succession.

Categories