The onboarding project is split up into units. Each unit will be worked on in a separate git branch (each branch based off master). There will be a code review at the end of each unit. When the unit is finished, a pull request should be opened to initiate the code review. The reviewer will add notes to the pull request with questions and recommended changes. After any recommended changes have been completed and committed into the branch, the pull request will be reviewed again. Once the unit is completed and signed off on by a reviewer, the pull request will be merged into the master branch and the next unit can be started. If a reviewer is unavailable, the next unit can be started. Once a reviewer becomes available and reviews the code, any branches for any new units that have been started will need to rebase against master to update the new unit(s).
Project Description
The project is a user management system for an arbitrary application.
Units
*A numbered sub-unit is considered a separate unit
- Project setup
Note: It is not necessary to open any pull requests for this unit. Move on to unit 2 when unit 1 is finished.
- Clone the JS onboarding project’s server repository. Follow the setup instructions on that project’s README. That server will locally host endpoints that your project can consume, as well as persist data to a local database.
Note: The server won’t be needed/used until unit 5. - Create a new git repository for your project. Once the project is hosted on a git repository, add a
readme.md(if there isn’t one already) with a project description. Thereadme.md’s project description and install/run instructions, etc., should be updated on every commit that warrants it (i.e. don’t let it become invalid/outdated).
- Clone the JS onboarding project’s server repository. Follow the setup instructions on that project’s README. That server will locally host endpoints that your project can consume, as well as persist data to a local database.
- Basic HTML/CSS
- Create an HTML page that displays a user profile. Refer to the server readme for the definition of a user data model.
- Basic JavaScript
- Create a function that minimizes the profile view and one that restores it to normal size. The definition of “minimized” is left to your descretion (e.g. only display the first name and hide the other fields). Add some buttons to your profile page that calls these functions.
- Node.js/npm
- We use npm (and sometimes bower, too) for managing 3rd party library dependencies instead of saving those dependencies in our repositories. Install angularjs (be sure to use the
--saveoption so that npm adds this as a dependency in package.json.)npm install angular --save.
- We use npm (and sometimes bower, too) for managing 3rd party library dependencies instead of saving those dependencies in our repositories. Install angularjs (be sure to use the
- AngularJS
- Include the angular library in your project and create an angular application module. Install the ui-router library. Include ui-router and ngResource as dependencies to your application module.
- Create routes and views for the following, and add links to navigate between the views (we’ll hook these up to be populated by the server project in a following step):
- User profile view (you’ve already created a view for this)
- User profile edit (same as user profile view, but uses editable form inputs)
- Users list (listing of users)
- Create an angular service that exposes functions that make service calls to the server for the following user actions: create, get (a specifc user, by id), list (get all users), update, delete
- Create controllers for the different views. The controllers should use the service you just created to populate the different views. Be sure all actions (create, get, list, update, delete) have been implemented by the controllers.
- Create a User directive and use that directive in place of the markup that was previously used.
Gruntpluginsdev vs. dist tasks
TestingUnitEnd-to-end