Angular CMS
This is a boilerplate CMS built with Angular, Twitter Bootstrap and Node; it is in development stage and aims to offer a quick start for creating full-stack angular application.
Technologies
Some featured technologies used in this project include the following:
- MongoDB - The database of choice is Mongo, its fast, easy and scalable.
- NodeJS - The server of choice is Node, its JavaScript, its fast and scalable.
- AngularJS - The client-side framework of choice is Angular, its a full-stack, just what we need.
- Bootstrap - The client-side ui of choice is Twitter Bootstrap, its updated and clean.
- HTML5 - Using HTML5 in every way to make a better user experience.
- Protractor - Using Protractor for all e2e testing.
- Karma - The test runner is Karma.
Getting Started
To get started on developing with this code base you can either fork the repository or clone it using the following command:
$ git clone https://github.com/jonniespratley/angular-cms.git
Step 1 - Install NPM dependencies
Before you can run or build the application you need to install the dependencies, execute the following command:
$ npm install
Note: You may need to run this as a
sudo
user.
Step 2 - Install Bower dependencies
Now you need to install the client-side dependencies that is managed by bower, execute the following command:
$ bower install
Step 3 - Start Grunt server
Now you are ready to run the preview server that is used for development, execute the following command:
$ grunt serve
Note: Your default browser should open up to http://localhost:9000
Running the application
To run the application on your local machine please take the following steps.
Step 1 - Start mongodb
To start mongodb execute the following command:
$ sh bin/db.sh
Note: If errors when executing command remove the
db/mongod.lock
file.
Step 2 - Start REST server
To start the server execute the following command:
$ node server
Note: The REST server is running at http://localhost:8181/api/v2
Development
The following sections are different development tasks that I generally run while developing features.
Karma Unit Tests
To run the Karma unit tests execute the following command:
$ grunt test
Karma e2e Scenario Tests
To run the Karma scenario tests take the following steps:
- Start Node server -
$ grunt serve
- Start REST server -
$ node server
- Start DB server -
$ sh bin/db.sh
- Now run the e2e tests by executing:
$ grunt test:e2e
Note: Each step is a βnewβ terminal window
Protractor e2e Tests
To run the Protractor e2e tests take the following steps:
- Start Node server -
$ grunt serve
- Start REST server -
$ node server
- Start DB server -
$ sh bin/db.sh
- Now run the Protractor tests by executing:
$ grunt protractor
Note: Each step is a βnewβ terminal window
RESTful Server
The server is a Node.js server that supports dynamic RESTful API calls to resource endpoints. It will automatically create a database if it does not exist and collection(s). >>>>>>> fe4af0e14ef3596c823d4777d672ba00406ddb90
The base URL is http://localhost:8181/api/v2
HTTP | METHOD | ENDPOINT |
---|---|---|
GET | findAll | /database/table |
GET | findById | /database/table/:id |
POST | add | /database/table |
PUT | update | /database/table/:id |
DELETE | destroy | /database/table/:id |
Tip: To create new collection open
http://localhost:8181/api/v2/[DATABASE]/[COLLECTION]
in browser.
WebSocket Server
This is a socket server implementation for "real" time.
WebSocket Channels
These are the events that this socket server dispatches.
- cms:authorization
- cms:client:message
- cms:client:connect
- cms:client:disconnect
- cms:server:message
- cms:server:disconnect
- cms:server:connect
Themes
Themes will be installed via bower
, search and install themes searching by tag angular-cms
.
Structure of theme
This is the structure of the themes.
my-theme/
package.json
bower.json
css/
my-theme.css
js/
my-theme.js
index.html
partials/
header.html
sidebar.html
footer.html
content.html
Plugins
Plugins will be installed via bower
, search and install themes searching by tag angular-cms
.
Structure of plugin
API Documentation
The API documentation will be in the form of ngDocs style.
The files located in the content
directory are tutorial specs for the different features in this project.
Documentation can be generated and viewed by running the following command:
```
$ grunt docs```
Your default browser should open http://127.0.0.1:9191/#/api
(Coming soon)
Important notes
Please don't edit files in the dist
subdirectory as they are generated via Grunt. You'll find source code in the app
subdirectory! Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.
Modifying the code
First, ensure that you have the latest Node.js and npm installed.
Test that Grunt's CLI and Bower are installed by running grunt --version
and bower --version
.
- Fork and clone the repo.
- Run
npm install
to install all build dependencies (including Grunt). - Run
bower install
to install the front-end dependencies. - Run
grunt
to grunt this project.
Assuming that you don't see any red, you're ready to go. Just be sure to run grunt
after making any changes, to ensure that nothing is broken.
Submitting pull requests
- Create a new branch, please don't work in your
master
branch directly. - Add failing tests for the change you want to make. Run
grunt
to see the tests fail. - Fix stuff.
- Run
grunt
to see if the tests pass. Repeat steps 2-3 until done. - Update the documentation to reflect any changes.
- Push to your fork and submit a pull request.
TODO
The following list is features that are comming.
- user management & user roles
- action and view permissions
- content versioning and audit
- i18n support on literals and object versions
- some form of content import-export
- assets management and thumbnail generation for uploads
- Rich text editing (e.g FCKeditor) which generates accessible markup
- print css and/or print versions of content