Lesson #1 - Angular
Angular can be used to build modern web applications for desktop or mobile platforms.
Angular projects are comprised of components.
Components are the fundamental building blocks we'll use when creating our Angular applications. They display data, listen for user input, and act based upon that input.
We'll go much, much further in depth with Angular during class, but today we'll be building our first Angular application.
Assignment
For this assignment, we'll be creating a basic Angular project inside a git repository called, prework-angular.
In order to do this assignment, be sure that you've installed Node.js.
Start by first navigating to your git repository in your terminal.
Once there, type the following command:
npm install -g @angular/cli
This will install the Angular CLI, or Command Line Interface. It's what will build our project skeleton for us.
Now, making sure that you're inside your git repository, type the following command:
ng new my-app
You will be prompted for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
Change your directory to the new Angular project.
cd my-app
Once there, type the following command:
ng serve --open
Your browser should automatically open and display a Welcome image. If it doesn't, you can go to your new app manually by going to http://localhost:4200 in Google Chrome.
STOP. Take a breath. You just created an Angular project!
Now that we have an Angular app up and running, let's customize it a little bit.
In VS Code, open the app.component.ts file found inside of the my-app/src/app directory.
Change the title property from my-app to anything your heart desires. If you can't think of anything, feel free to go with something routine like My First Angular App. Remember, title is a string so it must be surrounded by quotation marks!
Your browser should automatically refresh and show your new title.
Awesome work! Now that your project works, let's connect our project files to a new Git repository.
First, to close your Angular application in your terminal, press ctrl-c. Now, we want to remove our node_modules directory.
node_modules is the directory where all of the files that Angular relies on upon to run live. This directory can get huge, and we don't want to push this to our repository.
To remove the node_modules, enter the command rm -rf node_modules in your terminal.
Next, create a new Github repository called, prework-angular. Initialize this repository without a README.md.
Go back into your terminal and navigate to the root folder of your project.
Now you'll need to initialize your local files for Git, create a connection to your new repository, and create a remote using the following commands:
git init
git commit -m "first commit"
git remote add origin
As a note, the remote command is how we set up our local files to communicate and sync with repositories stored on Git.
Submission
To submit this assignment, you'll be submitting a link to your prework-angular GitHub repository in Bootcampspot! Be sure to submit this link under the assignment, "Pre-work: Angular" in Bootcamptspot.
If you have any issues submitting your prework, check out this video for step-by-step instructions on how to do so! Prework Submission Video
Congrats! You made it! This is the end of your pre-work!