👩‍💻 What is Angular?


Hint: Web development

🔎 Angular

Angular is a JavaScript Framework that allows you to create websites

JavaScript = Programming Language

Framework = Basic templates and components of HTML, CSS, and JavaScript for building the front end of a website or web app

🌐 Common Frameworks

There are different frameworks you can choose from. Angular is used by a few websites you might recognize: PayPal, Upwork, Google, and Nike.

  • Angular (maintained by Google)
  • React (maintained by Facebook)
  • Vue

👩🏽‍💻 VS Code

You can make an Angular project inside a code editor. I am using VS code. Notice how there are tons of extra folders and setup stuff like angular.json, etc. This comes when you make a project - standard setup files.

Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

⏬ Installs

There are a few things you want to install in order to get this set up.

Node.js

You use npm to install all sorts of things for your project so you need Node.js - some commands look like this:

  • npm install -g @angular/cli@latest
  • npm install --save bootstrap@3
  • npm install --boyfriends (jk I wish it was that easy 🙄)
Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Bootstrap

Bootstrap allows you to style your HTML faster than brute-force CSS. You can use npm to install it as I showed above ^

Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

💡 Tip: When you search "what is Bootstrap?" on YouTube, my video will pop up first 😅 (it was weirdly popular lol)

👩🏽‍💻 Making an Angular App

First, create a folder - "my-first-app." Then use cd to navigate to it in the Command Prompt (assuming you've already downloaded Node.js and installed angular from above):

C:\Users\Lizzy\Angular> cd my-first-app

C:\Users\Lizzy\Angular\my-first-app > ng new my-first-app --no-strict

It will then ask you a bunch of questions - say no to the sharing data, no to the Angular routing and CSS for the stylesheet.

Once it is created - drag and drop it into VS Code to edit!

🧠 Learning More

I am currently taking a class on Udemy to learn this software for work.

🔗 Link: https://www.udemy.com/course/the-complete-guide-to-angular-2/

🎬 Behind the Scenes

Now, this was a lot to take in - so I am working on a few tutorials like "What is Node.js" and "Install and Setup Angular" - which I think will be nice for those visual learners out there!