5. Setup Coding Your Website From The Ground Up ‐ Angular Web App - ayyjayy2/laynsleaf GitHub Wiki

This page is under construction

Everything you need to set up an web application

Here, we will build an Angular Web Application- meaning we will be using the Angular framework to make it.

What is Angular?

What you need to install

  1. An IDE (Integrated Development Environment) - in this case, we'll use VS Code
  2. Node.js
  3. NPM
  4. .NET
  5. Java?
  6. Git (optional, but more techy)

Check versions of the installs and make sure they are setup correctly

Setup Application

  1. Open the Node.js Command Prompt and navigate into the general folder you want it to be stored.
  2. Create a new directory/folder : mkdir [folderName]
  3. Create a new project : ng new [projectName]
  4. Answer 'Y' for Angular Routing and choose your preferred stylesheet format.
  5. Enter the new project via command line and open in VSCode : code .
  6. Explore the files automatically setup in VSCode.
  7. Back in the terminal, navigate to the app folder : cd src/app
  8. In the app directory, create a new component called 'home' : ng g c home (long format is : ng generate component home) . This component will have its own files for: html, css (or whatever stylesheet format you chose), typescript, spec typescript, and it will update the app.module.ts file to have your new component.
  9. The files will be autopopulated, so let's start the server to launch it in the browser. Open a new Node.js command prompt window, navigate to your project directory, and enter the command : ng serve --open (ng serve starts the server while --open will open it in your browser for you)
  10. edit edit edit
  11. add routing
  12. add bootstrap : npm i bootstrap bootstrap-icons

Connect to GitHub

  1. Follow this guide (the video is more detailed) : https://jhapriti09.medium.com/a-developers-guide-creating-a-github-repository-and-pushing-angular-code-1b9941f785e4
  2. Download Git to install GitBash terminal (32gb is losing support, so download 64db) : https://git-scm.com/download/win
  3. Add Node Modules to gitignore if it asks
  • In VSCode terminal, navigate to main project directory and type >git init (this installs git and creates git folders including gitignore where you specify what to ignore when pushing to github - like nodeModules)
  • you can check >git status
  • to add all the previously listed added folders to the commits, do >git add .
  • go to github, create a repository for the project, click <> Code, copy the link
  • back in terminal, type >git remote add origin [insert link]
  • commit your changes > git commit -m "git commit message"
  • push the code to github > git push
  • it may give you a command to run if it's the first time > git push --set-upstream origin master (This creates a new branch 'master' and you can't rename it. 'main' is the default branch in github and makes it a little complicated to straighten out with each other)
  • I haven't found a way to set it up without getting messed up, but when master and main cannot merge, this page helped me out : https://stackoverflow.com/questions/43006544/allow-merging-unrelated-histories-in-git-rebase (git merge --allow-unrelated ORIGINAL_BRANCH_THAT_WAS_MERGED --no-commit git commit -C ORIGINAL_MERGE_COMMIT git rebase --continue )
  • verify code has been pushed to github
  • once you have code in master, then you can create branches from it.