ng-simple-rest-app

Here’s an example of a simple rest application, written to demonstrate simple techniques to get people started with Angular:

Source:  https://github.com/stevenh77/ng-simple-rest-app

Client features
- default page not being shown by the router
- automatic conversion of Json strings into JavaScript dates (generic/aop approach)
- date control bound to model object from a data service
- select control databound to model from a data service
- confirmation dialog
- rest service calls for get, post, put, delete
- bootstrap layout for form
- form validation
- app navigation from controller using location and window services
- logging abstraction
- promises for service calls including error handling
- generic application level error handling
- busy indicator
- unit tests with mocks and promises
- material design for form entry

Server features:
- simple rest endpoints
- compression
- request logging to console
- CORS enabled
- object retrieved from JS array based on key
- object removed from JS array based on key

Form validation based on Material Design

I’ve extended the Material Design to include some form validation.

I’m undecided about using a valid icon or whether a lack of validation error message implies validity.  Perhaps I’m swayed by years of rubbish UX on the web that I think I’m currently in favour of using an icon.  And if an icon is to be used, how subtle should be it? 

Floating label

Material Design from Google has come up with floating labels for form entry.

The label starts off as the placeholder or watermark for the control, when the user enters the control the label floats above the text in an animation.

material-design from Steven Hollidge on Vimeo.

You can hear more about Material Design in this talk https://www.youtube.com/watch?v=2qiyhkQVyxE

The floating label appear at 12 mins 05 seconds.

Material Design: Google’s new design language

 

 

For more info check out:  http://google.com/design

You can check out some examples on the Polymer website, here’s one to get you started:  http://www.polymer-project.org/apps/topeka/