Create You own CMS with Angularjs From scratch

In this Tutorial, we will learn to build your own Content Management System (CMS). This Tutorial iS for Beginners as well as for Expert Developers

Until now, we have been heavily dependent on external web services to handle all our backend server-side work. Now, we will build our own backend using MongoDB, ExpressJS, angularjs, and Node.js; all these together are also popularly known as the MEAN stack.

This Tutorial will focus more on making angularjs work smoothly with a backend system.

As we get through this tutorial , some of the interesting things that we’ll learn are as follows:

  • Building RESTful web services using Node.js and ExpressJS
  • Saving and reading data from MongoDB
  • Working with ExpressJS and angularjs routes within the same application

 

Download full code

Why the MEAN stack?

An obvious question would be why the choice of MongoDB, Node.js, and Express, when we could use any other stack.

To be politically correct, we could use any other technology, such as Java, PHP, ASP.NET, or even Ruby on Rails, to build the backend part of this project, and angularjs would work just as fine.

The main reason to choose this stack is that all the tools within this stack use a single language, which is JavaScript. Other than this, each of the following tools offers certain unique benefits that make it equally suitable to build this application:

  • Node.js: This is the most important tool in this stack. It allows us to build event-driven, nonblocking I/O applications using JavaScript. Thanks to Node.js, we are now able to write server-side applications in JavaScript.
  • ExpressJS: This is a lightweight web application framework that allows us to build a server-side application on Node.js using the Model View Controller (MVC) design pattern.
  • MongoDB: This is a very popular NoSQL database. It uses JavaScript to read and modify data, and the data is stored in the Binary JSON (BSON) format.
  • MongooseJS: This is an object modeling tool for MongoDB. It provides a schema-based approach to model our data and also a much easier way to validate and query data in MongoDB.

Getting started with the MEAN stack

Let’s start by installing the various tools that we’ll need to build our application.

By this time, you probably already have Node.js installed and have become reasonably comfortable with starting and stopping the web servers.

As we proceed, take a moment to verify your current version of Node.js and upgrade it if necessary. The status of the latest version and how to upgrade it can be found on the Node.js site at http://nodejs.org/.

Setting up MongoDB

Depending on your operating system, MongoDB can be installed in multiple ways.

Perform the steps mentioned at the following links to install MongoDB on your operating system:

Once you have installed MongoDB, the next most important step is to create the folder to store your data.

Create an empty folder named data/db on the root using the following command line:

mkdir /data/db

You can also create the folder directly in the C: as follows:

c:md data
c:md datadb

Next, we’ll connect to the MongoDB database using the following command:

mongod

Tip

You will need to either give read or write permissions to the data/db folder or use the sudo or admin privilege to run the MongoDB command with root-level privileges.

In the following steps, we will start the mongo shell and create a new database named angcms.

With MongoDB running in a terminal window, we will open a new terminal window and fire the following commands.

mongo
use angcms

MongoDB comes with a default test database; one can also use this to test and play around with some MongoDB command

Setting up ExpressJS and MongooseJS

In case you don’t have ExpressJS yet, you can install it using the following command:

npm install -g express-generator

The next step is to create your ExpressJS project folder, which will be done using the following command:

express angcms

This will create a folder named angcms and put the boilerplate Express files into it. Note that we still don’t have ExpressJS installed; we will need to install it with the following command from the terminal:

npm install

We’ll now install MongooseJS as a devdependency along with ExpressJS.

Save the file, cd, into the angcms folder, and run the following command:

npm install –-save mongoose

Go to the angcms/node_modules folder, and verify that we have the express, jade, and mongoose folders within it.

Let’s also check whether our server is working by firing the following command in the terminal:

npm start

Open the browser and run http://localhost:3000; you should get the Welcome to Express message.

 

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

  • Shanawar Khan

    When I start the server after following the above steps it gives me the following error:
    [TypeError: Cannot read property ‘Kerberos’ of undefined]

    • Deven Rathore

      Manually add the kerberos-env/kdc_type property back to the current kerberos-env configuration

      • Shanawar Khan

        Hi Deven, thank you for you input. I am not a pro programmer. It would be much more helpful if you could also write down the steps to follow for manually adding the configuration, or some direction for getting it done. Thanks

      • Daniel Glejzner

        Hey, i can’t change pages? Its always content from page 1 🙁

        • Deven Rathore

          i thanks for update . we w’ll fix that issue

          • Daniel Glejzner

            Great! I can’t wait to read the article 🙂

          • Deven Rathore

            hi .issue has been fixed . thank you 🙂

          • Daniel Glejzner

            Fanstastic! Thanks.

          • anthony hanley

            Hi, can you show where the issue was as I am still getting the same error. Thank you.

          • anthony hanley

            Hi, did the update fix the problem for you? I have dealt with multiple issues in this tutorial. Deprecated packages and typos in the code. Can’t seem to find why it won’t change the pages for me. Must be a routing issue as its only going to the views page.

  • dman101

    This ‘/pages/delete/:id’ looks wrong. delete action should never be part of the REST url. You should use DELETE operation on ‘pages/:id’.

  • João Guilherme

    Hey! Great page! I’m new with this and I’m trying to learn by myself. I’m trying to add a new page but I’m doing something wrong. I’m using postman chrome app to simulate the post and I’m posting http://localhost:3000/api/pages/add but i’m not getting nothing. Can someone help?

    • Deven Rathore

      Hi can you share screenshot of the error ?

      • João Guilherme

        Hey Deven thanks for getting back to me. So when I simulate the post with http://localhost:3000/api/pages/add

        I get this in postman chrome app

        Not Found
        404
        Error: Not Found
        at /Users/Jean/angcms/app.js:41:13
        at Layer.handle [as handle_request] (/Users/Jean/angcms/node_modules/express/lib/router/layer.js:95:5)
        at trim_prefix (/Users/Jean/angcms/node_modules/express/lib/router/index.js:312:13)
        at /Users/Jean/angcms/node_modules/express/lib/router/index.js:280:7
        at Function.process_params (/Users/Jean/angcms/node_modules/express/lib/router/index.js:330:12)
        at next (/Users/Jean/angcms/node_modules/express/lib/router/index.js:271:10)
        at /Users/Jean/angcms/node_modules/express/lib/router/index.js:618:15
        at next (/Users/Jean/angcms/node_modules/express/lib/router/index.js:256:14)
        at Function.handle (/Users/Jean/angcms/node_modules/express/lib/router/index.js:176:3)
        at router (/Users/Jean/angcms/node_modules/express/lib/router/index.js:46:12)
        at Layer.handle [as handle_request] (/Users/Jean/angcms/node_modules/express/lib/router/layer.js:95:5)
        at trim_prefix (/Users/Jean/angcms/node_modules/express/lib/router/index.js:312:13)
        at /Users/Jean/angcms/node_modules/express/lib/router/index.js:280:7
        at Function.process_params (/Users/Jean/angcms/node_modules/express/lib/router/index.js:330:12)
        at next (/Users/Jean/angcms/node_modules/express/lib/router/index.js:271:10)
        at /Users/Jean/angcms/node_modules/express/lib/router/index.js:618:15

  • anthony hanley

    Hi Deven, I too am trying to learn by myself. I am also getting the same error as Joao. I have gone through it over and over and have everything in the correct place. Any idea why nothing will post? All other parts are functioning ok. Thank you.

  • Mike Garlick

    Do you have a working demo of this?

  • Nicholas Lievens

    Hi,

    I’ve followed the tutorial and the contents are really interesting, though sometimes the descripitions could be better. My version also does not contain the session check/cookies as I could not solve the dependencies yet. I’ll try to solve this in a later version.

    For now you can download my files at
    https://www.dropbox.com/s/0e0hn9lw5jjfvtw/angcms.zip?dl=0 . Might be useful for others getting in trouble. This demo sometimes has some small changes compared to the original code in the article here.

    • Deven Rathore

      thanks for sharing

Pin It on Pinterest

Shares

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)