Introduction and Target Audience
Hey everybody, what's going on? I'm Andy. I'm a self-taught software developer, and in today's video I'm gonna answer the question: what is Angular? But I'm gonna answer that for the beginners out there — for people who are brand-new to software development. Maybe you've just learned JavaScript or HTML and CSS and you're looking to get into a framework and you've heard about Angular. What is it? Why should you learn it? I'm gonna cover that in today's video, so let's just get to it. I want to do this fast and easy.
What Angular Is: Front-End Framework for SPAs
So what is Angular? Angular is a front-end framework, and it's really meant to develop single-page applications. Now let's break that down. So what is a front-end framework? You've heard the term a lot. There are a lot of fun frameworks out there and people use that term interchangeably with libraries sometimes, so it can get a little bit confusing. The way I look at a front-end framework is it's really meant to make your life easier to develop a single-page application or just applications in general. If you've ever built a website, you know that using JavaScript to interact with the DOM can work, it's great, but there's a lot of heavy lifting. There's a lot of stuff that you do, a lot of code you have to write. jQuery used to do a lot of the heavy lifting you would have to do with the DOM, but even beyond jQuery there's a lot of challenges with building large, complex applications: making sure that the code is maintainable, following good patterns of design, making sure the different parts of the application follow the right principles and you're not reusing code all over the place, which is really hard with the old paradigm of HTML and JavaScript.
How Frameworks Approach Development and Angular's Origins
What a front-end framework basically does, whether it's Angular, React, or Vue, is provide a certain approach to developing a website or a single-page application — meaning one page gets loaded in your browser and just handles everything. Angular specifically uses a couple different approaches that we'll get into. To give you a sense of what Angular is: it was originally developed by developers at Google and is still maintained by developers at Google. It was developed back in 2010; that was Angular version 1 and that was called AngularJS. It's really important to remember that because if you hear AngularJS it means something different from Angular. AngularJS had a certain approach to building applications. Then they moved to version 2 around 2014–2015, and Angular version 2 and above is now called Angular. So if you hear ‘Angular’ that's version 2 and up through the most latest versions.
Component-Based Architecture and Data Binding
The first thing I would explain about Angular is it's a component-based front-end framework. Everything is based around components. If you think of a standard website, everything on that page is really a component: a nav bar, a sidebar with widgets, a main content area — each one of those is an isolated component. Each component has its own template — its own HTML — and that template reveals data, maybe from JavaScript. Angular implements that as an approach for designing websites. You can create reusable components; each component is worried about two things: a template (the HTML) and some data to fill that template. It handles the in-between stuff, and that's where you've heard the term data binding. For example, an input in your template can be bound one-way as read-only or two-way so you can modify the input and it updates the data without manually querying the DOM. You can create components in isolation and reuse them, which helps when developing large-scale applications because you want loose coupling and high cohesion in your modules.
Client-Side Routing
Another feature Angular provides is client-side routing over server-side routing. Old-fashioned sites have multiple HTML pages: about.html, contact.html, homepage.html. When you click the nav, the browser requests those files from the server and the server routes those pages to you. With front-end frameworks and Angular specifically, you get client-side routing. That means when you click through the nav, Angular won't necessarily need to go to the server to get the files or templates for that page. Technically that's not always true — you might need data from the server — but the templates and general JavaScript can live on the front end so you don't have to make tons of requests to your server. You can just go from route to route in the browser, which can be very helpful.
Dependency Injection and Unit Testing
One of the best features, in my opinion, is dependency injection, which makes unit testing a lot easier. Dependency injection allows you to provide services to modules and to swap those services in tests. For example, if a module depends on an HTTP service that makes requests, you don't want that live service hitting the network during a unit test. Dependency injection lets you mock that service in tests and use the real service in production. If you want to learn more about unit testing, I made a video based mostly in C#, but the concepts transfer. The Angular CLI is the tool you use to build components and run your Angular app locally; it will actually create unit tests for you, so you don't have to set up testing from scratch. Unit testing in JavaScript can be painful, and having DI and tooling makes it much easier and helps keep applications from breaking.
View/Model Separation and Learning Advice
I really love Angular because it isolates the view layer from the model layer. Think of your HTML as the view: it's just worried about displaying data and making things pretty. The component is worried about getting the data, maybe from a server, and massaging it so it's easy for the view to use. You separate view and model, which makes development simpler compared to the old paradigm. Should you learn Angular? My answer is yes. I love Angular and I have a lot of experience helping people learn through my mastermind program. People get frustrated when they first learn it — it's like learning a new programming language in a way because Angular is opinionated and you have to learn how they want you to build a website. You may need to learn a bit of TypeScript and some ES6 features like classes and modules. After you get through that and build a few sites, you'll see the benefits. If you learn Angular well, you'll be able to transition to React or Vue. It depends on your job strategy: research your area to see which framework employers prefer. In some places React is dominant, on the West Coast it's common; in Chicago, Angular is popular. Learn what's in demand where you want to work.
Outro, Resources, and Final Notes
I hope this helps. This is my 'What is Angular' for beginners. I hope you liked the video, so leave a like and hit subscribe below. This channel is 100% about teaching people how to become software developers, no matter who you are or where you come from. I want to help anyone who's willing to put in the work and effort. Also, I created a free report on the five best programming languages to learn in 2019. If you want a free copy, go to andyserkis.com/report — the link is in the description. Definitely pick up a free copy of that report before you head out. Other than that, thank you so much for watching, and peace out as always, guys.
