Edit 10/12/2020:
I fully intended on this being a series but then Corona Virus happened and I had a baby! Reflecting back I think I was biting off more than I could chew especially being a new writer and being new to Angular at the time. Looking forward, I'm back to writing again but I think this time it won't be in the format like this article. Stay tuned!
Hello! I'm Chandler and I'm a Web App Dev from Alabama! I've been a dev for about a year now at a awesome company called nSide. I don't write much but it's been something that I want to start getting into so excuse all these grammatical errors! As a bonus it will help solidify what I'm learning and teaching something you are learning has many benefits. Here are some great links by Michael Simmons. here's one ---- and another
(I love Michael Simmons work lol)
So what are we learning?
I'm going to start a series on Angular 9! I want to try something new and I like typescript, classes and OOP so why not. As a disclaimer I'm assuming you know enough JS, HTML and CSS to make pages and do some DOM manipulation. Angular uses typescript but you can pick it up as you go along.
First if you have been under a rock for the past decade Angular is a modern JavaScript framework for creating the client side of web apps. I emphasize framework because it is a true framework. Comparing it to another popular abstraction like React, React is a UI library, the sink in the proverbial kitchen. Angular is the whole kitchen. It has everything you need from forms to routing to animations. OK now that's out of the way lets get started shall we??
Angular CLI
I first started with React and its the only abstraction I know to do UI with JavaScript so a lot of my comparisons are going to be with it. But if your just starting out and don't know anything about either than I got you cover.
So how do we get started?
First lets get the awesome Command Line Interface tool that Angular provides for us
npm install -g @angular/cli
Compared to React you have to download the CLI globally on your machine. Most people will use the npm package running tool NPX to generate their React app via create-react-app.
If you've never used create-react-app than here's a primer for the CLI. The Angular CLI is an amazing tool. It generates different things for you. Things like (components, directives,modules,services) but more on these later. It also generates the workspace you need to create and develop your app. A workspace is the file structure and directories needed to create your app.
Angular guide on workspace.
Think about it like this, Angular is the whole kitchen but you don't have your kitchen yet. The CLI are the workers that come and install all your appliances and cabinets and all the things you need to create yummy dishes.
(Like Peach Cobbler)
To get those workers to build that kitchen, similarly to create-react-app you need to run in your terminal...
ng new project-name
The CLI will ask you questions for routing and styling language. For now lets just go with the default of CSS and no routing.
This like create-react-app generates all the files and dependencies you need.
Here is your new kitchen!
Now the only folders and file we care about right now are the src/app/app.component.html|ts|css|spec or app.module. These files are where the magic happens. These are where everything else descends from. Kinda like in React this is the main Component that everything descends from.
Now to compile our project and see what the default boilerplate gives us we run..
ng serve --open
ng serve starts up our local development server and compiles all of our angular code (the typescript,css,html) into vanilla css,js,html that the browser understands.Think about this command as taking all the ingredients for our peach cobbler and putting it in the oven. What comes out is that default boilerplate app. Now you may be wondering what that --open is. That's a flag that just tells the CLI to go ahead and open our default browser tab at our localhost.
I think we may be running long so lets recap!
We learned 2 commands with the CLI, ng new and ng serve.
Ng New tells the CLI to build our workspace(kitchen). Ng new takes our ingredients in our kitchen and throws it in a oven and out pops our Application.
We learned that the CLI genereates a workspace for us and that a workspace is the files and folder structure where we build our Angular applications.
Part 2
For part 2 we are going to talk about what makes up the ingredients of a Angular application. We're going to talk about what all those files are in our kitchen and what are components and how all this relates together. If you like where this series is going or if I missed something let let me know in the comments below!
Top comments (0)