This application was developed to enhance my AngularJS knowledge of how custom directives work and how to access JSON data via REST API calls. It enables the user to type ahead 3 characters and choose a user from the drop down list populated from a JSON file via REST calls. It also saves data to the Firebase cloud environment.
firebase.json
index.html
app
--app.js
css
--bootstrap.min.css
--styles.css
data
--userDetails.json
templates
--templateurl.html
- HTML5
- CSS3
- AngularJS
- Bootstrap
- Firebase
The application should run on a localhost. Running the index.html will start the application.
- Works across major browsers IE9, Chrome, Safari, FireFox
- Save button will enabled only after all the required fields are filled out
- Affected users field is implemented as a custom directive. It includes type-ahead after 3 characters. The data for the typeahead directive is populated from JSON file through REST call.
- On completion of successfully saving data, the user will be notified of the delay using a spinner and a notification alert.
- alle - Allen Allbrook, Allexis Border, Allen Parker
- jack - Jack Sparrow, Jack Niel, Jack Pharrel
- mart - Martin Wheeler, Martin Sparrow
- https://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/
- https://www.google.com/search?q=profile+pic+avatar&espv=2&biw=1920&bih=1006&source=lnms&tbm=isch&sa=X&ved=0ahUKEwimhIPW1YbSAhVCxFQKHeV-ADcQ_AUIBigB&dpr=1#q=profile+pic+avatar&tbm=isch&tbs=rimg:CVwoDghZxmfIIjitKJ-Jh_1D_12ggpm6oVNqKETYVne3yjiBNeCWi7ckNDRGtp8i-jMuf9LLhpY_1r-iDnf7XEimYLtFioSCa0on4mH8P_1aEfKERwHZ16NOKhIJCCmbqhU2ooQRgDLrl0EbCy0qEglNhWd7fKOIExGkhxkjAE5phCoSCV4JaLtyQ0NEEbA-cfdxA28aKhIJa2nyL6My5_10Rug6ys9keF2AqEgksuGlj-v6IORFwY56Ofd0TsioSCd_1tcSKZgu0WEbhZvHdulPfL&imgrc=_
- http://stackoverflow.com/questions/15930339/how-to-tie-angular-uis-typeahead-with-a-server-via-http-for-server-side-optimi
- https://www.sitepoint.com/understanding-angulars-apply-digest/
- https://codepen.io/TheLarkInn/post/angularjs-directive-labs-ngenterkey
- https://docs.angularjs.org/api/ng/directive/ngKeydown
- https://github.com/connor11528/angularFire-todo/blob/master/app.js