Academic Life Helper

This application is meant to provide an easier way for students to keep focus on what's important,
allowing them to view their most immediate activities, assignments, or exams.

File Structure

client
⋅⋅app/
⋅⋅⋅⋅app.js * app entry file
⋅⋅⋅⋅app.html * app template
⋅⋅⋅⋅common/ * functionality pertinent to several components propagate into this directory
....components/ *where components are stored
⋅⋅⋅⋅⋅⋅components.js * components entry file
......loginForm/ * example of a container
........loginForm.js * entry file
........loginForm.component.js * directive
........loginForm.controller.js * controller for component
........loginForm.scss *styles to be applied in component
........loginForm.html * html template for component
........loginForm.spec.js * unit tests for component 
⋅⋅⋅⋅containers/ * where the containers (screens)
⋅⋅⋅⋅⋅⋅home/ * home component
⋅⋅⋅⋅⋅⋅⋅⋅home.js * home entry file (routes, configurations, and declarations occur here)
⋅⋅⋅⋅⋅⋅⋅⋅home.component.js * home "directive"
⋅⋅⋅⋅⋅⋅⋅⋅home.controller.js * home controller
⋅⋅⋅⋅⋅⋅⋅⋅home.scss * home styles
⋅⋅⋅⋅⋅⋅⋅⋅home.html * home template
⋅⋅⋅⋅⋅⋅⋅⋅home.spec.js * home specs (for entry, component, and controller)

Getting Started

Dependencies

Tools needed to run this app:

node and npm

Installing

fork this repo
clone your fork
npm install to install dependencies

Tasks

Here's a list of available tasks:

npm run build
- runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into dist/bundle.js. It also prepares index.html to be used as application entry point, links assets and created dist version of our application.
npm run serve
- starts a dev server via webpack-dev-server, serving the client folder.
npm run watch
- alias of serve
npm start (which is the default task that runs when typing gulp without providing an argument)
- runs serve.
npm run component
- scaffolds a new Angular component. Read below for usage details.

Generating Components

Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:

⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.html
⋅⋅⋅⋅⋅⋅⋅⋅componentName.scss // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅componentName.spec.js // contains passing demonstration tests

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious. To generate a component, run npm run component -- --name componentName.

The parameter following the --name flag is the name of the component to be created. Ensure that it is unique or it will overwrite the preexisting identically-named component.

The component will be created, by default, inside client/app/components. To change this, apply the --parent flag, followed by a path relative to client/app/components/.

For example, running npm run component -- --name signup --parent auth will create a signup component at client/app/components/auth/signup.

Running npm run component -- --name footer --parent ../common creates a footer component at client/app/common/footer.

Because the argument to --name applies to the folder name and the actual component name, make sure to camelcase the component names.

Credits
Project template acquired from https://github.com/gdi2290/NG6-starter

avasconcelos114 / academiclifehelper