Implementation of simple addressbook on AngularJS
If you need real-world application using AngularJS but you tired from TodoMVC app - this project is for you.
Here you can find the code written in best practices and can be a good platform to catch ideas about structuring and writing the code.
Constantly trying to start writing the tests but you don't understand how to structure and what to test? Your tests looks dirty and too complicated? Checkout the real tests for services and controllers. These are following BetterSpecs guidelines so they looks easy and maintainable.
http://dezoxel.github.io/addressbook
$ cd /tmp
$ git clone https://github.com/dezoxel/addressbook.git
$ cd addressbook
$ npm install
$ bower install
$ grunt serve:dist
After running latest command your default browser will be automatically opened with the started Addressbook application. If browser was not opened, please open the http://localhost:9000 on your favorite browser.
- List of addressbook entries
- Search for entries (filtering)
- Add
- Edit
- Delete
Project supports two types of storages:
- MongoDB
- Browser's Local Storage
By default, project uses MongoDB for storing the addressbook entries. As an example we use MongoLab SaaS.
If you wish to change the storage adapter, you can do this easily through the application configuration:
// addressbook/config.js
.config(function(EntryProvider) {
// adapter name for MongoDB - MongoLabAdapter
EntryProvider.setAdapterName('LocalStorageAdapter');
});
If you will use MongoLab, please change the MongoLab Api Key in addressbook/storage/mongolab.config.js
too:
// addressbook/storage/mongolab.config.js
.constant('MONGOLAB_API_KEY', 'API_KEY')
Run grunt
for building. Code is built under dist
directory.
Run grunt serve
for preview and development.
Run grunt serve:dist
for production build and preview.
See the build history and tests results on Travis CI. Current build status: .
See the code coverage reports on Coveralls.io. Current coverage status: .
See the code quality reports on Code Climate. Current code quality: .
Running grunt test
will run the unit tests with Karma.
Tests are following BetterSpecs guidelines.
Run grunt plato
for generating code static analysis using Plato.
Visit reports/static-analysis/index.html
in your browser in order to see the report.
Currently code is 81.30% maintainable according to Plato
Currently project supports deployment to the Github Pages. Run the grunt buildcontrol
in order to deploy latest version of the code.
- Twitter Bootstrap - UI framework
- AngularJS - base JS framework
- Yeoman - scaffolding tool
- Bower - frontend package manager
- NPM - backend package manager
- Grunt - task runner
- JSHint - built-in code errors detector
- Karma - frontend test runner
- Mocha - test framework
- Chai - test assertion library
- Sinon - test spy, stub and mock library
- PhantomJS - browser for testing
- Github Pages - hosting platform for the live example
- Plato - tool of code visualization, static analysis and complexity
- Coveralls - code coverage tool
- Code Climate - code quality tool
- Travis CI - CI server
- MongoDB - NoSQL database
- MongoLab - MongoDB SaaS
- Local Storage - Local browser's built-in database
- Unit tests for MongoLabAdapter
- Implement flash messaging
- Make protection of adding entries after 200 addresses
- E2E tests
- Fix margins & paddings where needed
- Google analytics
- Create adapter for firebase storage
- Optimize performance for 2000 entries
- One entry in the addressbook is presented by Name (full name) and Address (full address) fields in the free form
- Both Name and Address should not be empty
- Browser's local storage should be used as a backend
- Application should not be optimized for big collections (>1000 items)
- Should use Twitter Bootstrap
- Shoud be simple
- URL should be persistent
- Table with a two data columns: Name and Address
- One special (third) column for options: Edit and Delete buttons.
- Edit button goes to a separate page with an edit entry form
- Delete button immediately removes entry from the addressbook without confirmation
- Table header contains Add address button
- Add address button goes to a separate page with an add entry form
- Search entry input should be placed on top of the table with entries
- Search input should have width the same as table
- Typing something in the Seach input should filter out the table entries immediately
- Search should be performed by Name and Address columns
- URL should be persistent
- Separate page with a form
- Two form fields provided: Name and Address
- Both fields should not be empty
- Cancel and Add buttons at the bottom of the form
- Cancel button goes to the list
- Add button adds the entry and goes to the list
- Add button is disabled if the form is not valid
- Enabling and disabling of Add button should be immediate
- If some of the field is not passed the validation it's block is highlighted with a red color and hint for user is provided
- The same requirements as for Add entry, but with corrections below
- URL contains ID of the entry
- Form should be populated with a data of edited entry
- Instead of Add button should be Save
- Delete button after Save should be present
- Clicking on Delete button should remove entry from the addressbook and redirect to the list
- Delete function should work without confirmation