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?

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?

• javascript
• node.js
• angularjs
• content-management-system

• Not really an "answer", but for Angular to "work" it really expects every route on the server to return your base .htm file (usually index.htm). This is the file that contains your data-ng-view (or data-ui-view if using ui router). From there Angular will "take over", determine your route, and load your proper view. I have no idea how compatible (if at all) this is with the Keystone CMS, though :) – Jason L. Commented May 5, 2014 at 15:21

6 Answers 6

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.

1. PancilBlue
2. 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.