We Keep Coding

Angular/Laravel flow design for multiple view form

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.

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.

Conflict with Ember.js and URL fragment (#) with Ecwid

I'm using Ecwid with my Ember.js application, and I ran into a conflict. In short, Ecwid loads some JavaScript that embeds an e-commerce store into the page. The problem is that Ecwid and Ember both modify the URL fragment to keep track of state, since Ecwid is inherently its own single page application. Basically, I have two different JS libraries fighting over the URL.
So when I use an Ecwid component, the URL changes to an Ecwid URL, and Ember complains with Assertion failed: The route !/~/category/id=2104219&offset=0&sort=normal was not found because that is an Ecwid route, and not an Ember route.
I tried a catch-all Ember route, but that didn't really work because the Ember state changes away from the page I'm on.
Has anyone had to deal with a 2nd library that fights with Ember over the URL? If so, how did you maintain state and deal with the other application? As pushState and URL fragments become more and more popular, I could image this would become more and more relevant.

Really you're going to have to choose between the two, if they both are using the url for routing of some nature then they both rely on some notion of a base url, with a changing hash. In Ember you can disable the location routing, but then you lose the routing capabilities of ember.
To disable routing you'll just use the NoneLocation
NONELOCATION
Using NoneLocation causes Ember to not store the
applications URL state in the actual URL. This is generally used for
testing purposes, and is one of the changes made when calling
App.setupForTesting().
App.Router.reopen({
location: 'none'
});
I realize as I'm saying this, I'm partially lying, because you can use browser history instead of the hash. So your urls would just change like so:
/emberHome/fooResource
/emberHome/fooResource/fooBar
instead of
/emberHome/#/fooResource
/emberHome/#/fooResource/fooBar
Unfortunately there are some major drawbacks to this, firstly your server needs to know to serve your ember app at /emberHome and essentially ignore all nested locations. Secondly the browser support is fairly new (http://caniuse.com/history). Thirdly, the support for recognizing the Ecwid won't be supported, and will likely be blasted away when transitioning to different routes.
App.Router.reopen({
location: 'history'
});
You can read more about it at http://emberjs.com/api/classes/Ember.Location.html#toc_historylocation

Per the guides, you can tell Ember to not use the URL to interact with your application.
http://emberjs.com/guides/routing/specifying-the-location-api/
Straight from the docs there -
Finally, if you don't want the browser's URL to interact with your
application at all, you can disable the location API entirely. This is
useful for testing, or when you need to manage state with your Router,
but temporarily don't want it to muck with the URL (for example when
you embed your application in a larger page).
App.Router.reopen({
location: 'none'
});

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.