Small Project: Markdown Editor
Everything in this project is WIP! including this readme!
-
Install
node
andnpm
through this link. -
Next, I am using the Angular CLI. Please make sure you have this by installing
npm install -g @angular/cli
. -
install all the necessary components by doing
npm install
in the project directory, which will install all needed packages from the package.json file 😄. -
After installing all the necessary node packages, please use the command
ng serve
to build and run localhost.
You all should only have to run the last command, ng serve
, in order to see output in your browser. This will start your development server on localhost:4200
.
Though we are still working on tests, you should be able to view the output of our various Karma/Protractor/etc. tests by running:
ng test
OR npm test
.
For every addition you would like to make, create a new feature
branch off of the dev
branch:
git checkout dev
git checkout -b feature/MyFeature
Make your changes locally, then stage and commit them. Once they are committed, push them to the remote repository.
Before pushing your branch to GitHub, please make sure to do the following things:
-
Update dev branch by switching to it.
git pull
fetches the remote and merges it into the current branch you're on (so, we'd need to switch into the branch we'd like to update).git checkout dev git pull origin dev
Doing this should just result in a fast forward of the branch, which is exactly what we want because it allows the git history to be more linear.
-
Switch back to your feature branch and rebase your changes on top of the most recent updates to dev.
git checkout feature/feat_branch_name_here git rebase dev # For greater control, use git rebase -i dev
why? When you push your branch to the remote repo, it will only include your changes, which makes commit history easier to read.
-
Run available tests by using
ng test
and make sure they pass!
git push -u origin feature/feat_branch_name_here
- If you've shared your branch on the remote repository, do not rebase unless you know for certain nobody has pulled your branch. This rewrites history and causes some headaches for your teammates. Instead, if the dev branches have been updated since your pull request, pull in changes and create a merge commit.
- Once the pull request gets approved, I've decided we're going to do merge commits (previously I was doing rebases) on shared branches (
dev
andmaster
) when requesting to merge one of our feature branches into these two branches because:- we're all git noobs
- it allows for easier branch traceability and a more thorough commit history.
- Though it means merge commit messages, I feel like the pros outweigh the cons.
You can use the ng generate
(or just ng g
) command to generate Angular components:
ng generate component my-new-component
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp
You can find all possible blueprints in the table below:
Scaffold | Usage |
---|---|
Component | ng g component my-new-component |
Directive | ng g directive my-new-directive |
Pipe | ng g pipe my-new-pipe |
Service | ng g service my-new-service |
Class | ng g class my-new-class |
Guard | ng g guard my-new-guard |
Interface | ng g interface my-new-interface |
Enum | ng g enum my-new-enum |
Module | ng g module my-module |
angular-cli will add reference to components
, directives
and pipes
automatically in the app.module.ts
. If you need to add this references to another custom module, follow this steps:
ng g module new-module
to create a new module- call
ng g component new-module/new-component
This should add the new component
, directive
or pipe
reference to the new-module
you've created.