256 Kilobytes

The best way to learn Angular 2+ as fast as possible

Articles in Software Development | By Huevos Rancheros

Published 6 months agoThu, 20 Dec 2018 10:55:32 -0800 | Last update 6 months agoThu, 20 Dec 2018 11:11:11 -0800

Get on the fast track and start using the Angular framework as fast as possible without much time wasting.

278 views, 1 RAM, and 1 comment

Gettings started with Angular can be challenging, and it's hard to find an article that actually tells you what to do, especially if you're not a developer and don't have a very technical background. This is primarily aimed at people looking to get started with Angular as their first front-end framework, but even if that's not you, you still might get some value from this article.

Learn JavaScript first

I can't stress this enough. Assuming that  you (hopefully) already know how to work with HTML and CSS. If you don’t, go on CodeCademy right now. It should take you like a weekend to learn, unless you’re seeing a computer for the first time.

The next step is JavaScript. You should understand the basics within a week or so, even if you’re just starting out. Plenty of courses on it, so just pick one that has decent reviews and a structure you think you’d like.

Angular uses TypeScript, which is a superset of JavaScript. In order for you to understand why thing work the way they do, JavaScript is a must. Without it, you’re making your Angular experience unnecessarily harder. Yes, I said harder – JavaScript isn’t hard at all and if you can’t figure that out first, you probably shouldn’t even try Angular anyway.

Grasp the basics, but don’t get into too many details

Angular can be hard to grasp even for developers who already know what they’re doing. You certainly don’t need to get into specifics in orders to be able to do anything with. Think of it like driving a manual car – you don’t need to know everything that’s going on under the hood, but you better under understand enough to be able to shift gears properly.

So, here’s all you need to know about Angular in order to get started on your project:

  • Where everything is

When I first started learning Angular, I watched a course for about two days without following along. I then tried doing things on my own, only to have to restart the course because I was clueless. Instead of just watching videos purposelessly, learn to work with it. Learn how you add components and services, and how to use them. Make a responsive navbar. Use material design. Do things.

  • Using HTML and CSS with Angular

Angular can be a piece of cake, but it can also be very tricky if you’re used to more traditional ways of doing things. You better understand how to at least use HTML and style things with it before you go further into using components, or you’re in for a ride.

  • Modules (ngModules)

Angular has its own module system. Think of modules as the infrastructure that you’re trying to build on. You will need modules to do a lot of things. Want to make a GET request? You need a module. While this may sound a little weird, in the long run it’s definitely easier to build things using a framework like Angular, compared to vanilla JavaScript or jQuery, per se. I would rather write 250 lines and have to fix a few errors along the way, compared to 2500.

  • Components

Let’s say you have a box where you need the user to input something. Or an output table. In Angular, you’d need to put those into components, then use those components in your app. Quite simple really, but it takes some time to get used to. For example, if you want to style a certain component, you have all kinds of different ways and probably at least six different files where you can do that in. You’ll have to choose wisely, or re-using those same components and putting them together into a usable UI will later be a nightmare.

  • Services

You use these in order to communicate between components. Things can get quite weird here, so I don’t want to put any expectations in your head – you’ll have to see for yourself. Once you figure things out (which can take a couple of days), you’ll be good, though!

  • Basic TypeScript

Understanding basic TypeScript will help translate your JavaScript knowledge to make it more usable with Angular. Try to use some TypeScript outside of Angular so that things make sense when you start with it.

Anyway, here are some more tips in order to have you on a fast track to learning Angular:

Build your own project instead of finishing a course

Investing in a course is a probably a good idea, since it’s more likely to keep you on track and will only cost you like ten bucks. That isn’t to say that you just can’t follow some YouTube playlist, but something about the structure of a course that helps me be stay focused when learning something.

Start with a decent Udemy course, but you don’t necessarily have to finish it. Maximilian Schwarzmüller’s course is the most popular Angular one, although he does sometimes get ahead of himself. Once the course gets into specifics (similar to most courses), it’s likely that things will be far different from what you’re looking to build, unless you’re just looking to just learn how things work instead of building your own project. Even then though, you will probably learn A LOT more if you have to use your own brain to learn something different compared to just blindly following a course, and trusting it will deliver. In the real world, it’s more likely that you’ll spend more time scratching your head reading questions on 256Kilobytes than actually coding, so following along a 30-hour course without knowing to put two and two together yourself probably isn’t the smartest time investment.

You’d be surprised by the amount of information you can find on the topics that you’re working on – glue the different pieces together yourself and you’ll develop a core understanding of things, making every next challenge easier and easier.

Build something using external APIs

Most real-world apps use some sort of external API, and probably yours should do. Learn how to get a JSON object response and how to work with it, as well as sharing data between components. This will make your project a lot more valuable if you were to put it in your portfolio, and it would be evidence that you can do more than just glue UI elements together.

Remember that no one else actually knows what they’re doing also

This is coming from someone who’s been doing some sort web design or development for years now – I constantly Google even the most basic things. No, I don’t remember how to vertically center two child elements into a parent one without using either Flexbox or CSS Grid, and that’s perfectly fine – it takes me a minute to find that info online. Why would I even try to remember these hacks? It’s not like I’m doing the same thing on a daily basis, over and over again. It’s always a different problem that requires a slightly different approach anyway. Same thing goes for Angular. I’m here to get things done, not to test my memory on miscellaneous, trivial things. I went to college for that.

I get things done much faster and probably using better practices now, but that isn’t to say that the stuff I was building a couple years back wasn’t working. All these frameworks are relatively new, and if a developer pretends they themselves don’t Google things sometimes to understand some part of something better, they’re either Bill Gates, or laying.

Remember to have fun

Cliché, I know. But, you really should make it a challenge to solve problem after problem, and be content with each solution, because you did it. You can think on your own. You’re smart(ish) now. Not everyone can do what you did! Pat yourself on the back every once in a while.

Users Who Have Downloaded More RAM:
August R. Garcia (6 months ago)
🐏 ⨉ 1
Posted by Huevos Rancheros 6 months ago

Edit History

• [2018-12-20 10:55 PST] Huevos Rancheros (6 months ago)
🕓 Posted at 20 December, 2018 10:55 AM PST
Profile Photo - Huevos Rancheros Huevos Rancheros
πŸ—Ž 18 πŸ—¨ 94 🐏 48
Staff

I sell rare words


Account created 7 months ago.
18 posts, 94 comments, and 48 RAMs.

Last active 2 days ago:
Commented in thread Friday Night Prison Thread

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
πŸ—Ž 160 πŸ—¨ 840 🐏 246
Site Owner

> All these frameworks are relatively new,

Yes -- Although Angular at this point has been around for long enough to have become a reliable/solid choice in 2018.

It was fully reworked/rewritten when version 2.0 was released (previously it was AngularJS), which resulted in a bunch of projects written in v 1.0 needing to either stay in 1.0 or be rewritten. It's in version 7.0 currently and has stabalized a fair amount and is a solid choice for web dev projects.

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 6 months ago 🕓 Posted at 22 December, 2018 02:42 AM PST

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.