- Live demo: https://contactsappdata.firebaseapp.com/
- Login: admin@example.com, password: admin1
Prerequisite: nodejs and npm.
Install ember cli and bower:
npm install -g ember-cli bower
Create a new ember-app
ember new contacts-app
Turn on a couple of debug option in config/environment.js
ember install ember-cli-sass
mv app/styles/app.css app/styles/app.scss
ember install ember-cli-bootstrap-sassy
cp bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss app/styles/boostrap-custom.scss
#Add the following two lines to app/styles/app.scss
@import "boostrap-custom";
@import "bootstrap";
Add main-nav
component (could be partial as well). Note: a component name has to contain a dash. | Commit | Bootstrap example
Add About
page: router.js, main-nav.hbs with link-to
, index.hbs, about.hbs, link-to
on logo | Commit
Generate Contacts
resource: ember g resource contacts
, add link-to
to main-nav.hbs, add header to contacts.hbs | Commit
Add a simple array to routes/contacts.js and show this list in template. | Commit
Add a simple show/hide button to template. | Commit
- ember g controller contacts
- Add isShowingPhoneNumber property
- Add #if block to template
- Add button to template
- Add actions to controller
Binding class attributes and button label. Using ES6 function property syntax. | Commit
Adding LocalForage Adapter. (ember-localforage-adapter)[https://github.com/genkgo/ember-localforage-adapter]
ember install ember-localforage-adapter
ember generate adapter application
Add createRecord action to contacts controller | Commit
Add deleteRecord and add checking of empty input fields | Commit
Adding two buttons (bulk data generator and Delete All). Update Ember.js. | Commit
- More details: http://www.ember-cli.com/#deployments
- Buildpack link: https://github.com/tonycoco/heroku-buildpack-ember-cli
-
Instruction on Firebase website. Firebase with ember-cli
ember install emberfire
-
Configure your firebase URL in
config/environment.js
.
- Create a
loading.hbs
in template folder. It appears while Promise has been resolved: data downloading from server in the background. | Commit
- Change
and
toor
at validation. - Add email attribute to contact model.
- Add computed property for counting records with email addresses.
- Official guide about Components
- Generate
contacts/add-contact-form
component with the following ember command:ember g component contacts/add-contact-form
- Move all form related html code from
templates/contacts.hbs
intemplates/components/contacts/add-contact-form.hbs
- Insert in
templates/contacts.hbs
the one liner component code:{{contacts/add-contact-form}}
- Move model modifier actions from controller to route.
- Create action in component and send action with params to higher level route action.
- Change computed properties for using the new preferred syntax.
- Connected commit
- Create a phone-input component which extend from Ember.TextInput
- Add an observer with regular expression which accept only numbers and insert dash after each third digit.
- Using
.findAll('contact')
for downloading contacts. - Data downloading in the backtround,
model.isUpdating
istrue
until all data downloaded. - Update template with showing different message during data download. Commit
- Remove showingPhoneNumber toggle.
- Create
contact-table
andcontact-row
component and move html and logic there from main contacts template and controller. Commit
- Create
modal-dialog
component - Insert
modal-dialog
incontact-row
- Commit
- Add a new nested route to
app/router.js
- Create a
contacts/new.hbs
andcontacts/new.js
controller. - Move index content to
contacts/index.hbs
. - Add {{outlet}} to
contacts.js
- Commit
- Add a new nested route to
router.js
- Create component, template for
show
route. - Commit
- Create and edit route in
router.js
- Create the new universal component
app/components/contacts/contact-form.js
- Delete old components
- Update route models and actions
- Update css
- Commit
Readings:
- https://www.firebase.com/blog/2015-07-28-emberfire-1-13-0.html
- http://vestorly.github.io/torii/
- https://www.firebase.com/docs/web/libraries/ember/guide.html#section-authentication
Steps:
- Run in console:
ember install emberfire
- Update adapter, bower.json and package.json - Run in console:
ember install torii
- Add this to
config/environment.js
torii: {
sessionServiceName: 'session'
},
- Add
torii-adapters/application.js
for service injection. - Create actions in
application.js
and template inapplication.hbs