Angular 2 is a dream framework for any modern day web developer. It lets you build powerful and impressive web applications, with great development efficiency, speed, and performance. This course helps you gain a strong foundation in Angular 2 and the key concepts involved in creating modern web applications.
Starting off by building your first Angular 2 component, you’ll go all the way through topics such as deployment and automated builds by the end of the course.
After building your first components, you’ll return to the build-tools to understand them better. Here you’ll see how Gulp is used throughout to automate the building of your software to make your development life easier. Then you’ll take a deep dive into the constituents of an Angular 2 component and use them to reconstruct an existing example site for Google's Material Design Lite library. Once you have your application ready, you will learn how to test and debug it. Finally, we wrap up the course by deploying your app and you’ll learn how to incorporate the continuous integration principle for automation.
About The Author
Prior to this course, he developed a video course called Learning AngularJS Directives, also for Packt Publishing.
Angular 2 is a big change from what viewers have likely encountered before. We'll give them a starting point in order to begin using it.
You must have certain pieces in place in order to get started with developing an Angular 2 application. We'll explain a little bit about why you need some of those pieces (specifically TypeScript) and then do all our required installations in three easy steps.
Getting started with something as complicated as Angular 2 is always difficult. We did our setup in just a couple of minutes; now we'll build a single, simple component in under five.
Lumping too much into too few files is a common problem in code that we've all encountered (or created). Huge chunks of highly specialized code aren't very reusable, testable, or easy to reason about. We'll use Angular and ES2015 to start splitting up our code into smaller pieces right from the start.
No more than one component makes a UI; one class doesn't make a program. Large-scale frontend apps require hundreds or thousands of lines of code. Put it together badly and you'll suffer for years. Break your code into meaningful coherent chunks and assemble it using dependency injection.
A build workflow for Angular 2 development is dependent on a build tool to do multiple tasks. We need to make the user familiar with what Gulp does for us, how it does it, and what they can use it for in the future.
Eventually the viewer is going to want to expand, extend, or change how Gulp is being used. But many would not have had any experience with the tool and won't know where to start. In this video, we'll give a quick overview and offer that starting point.
"Hello World" examples don't get the viewer much of a sense of what building something real would look like. This video takes an existing admin UI template and quickly converts it into a component that renders the UI.
Most components that deal with dynamic information have to conditionally include/exclude parts, loop to repeat sections, and so on. Angular 2 provides a core set of directives for handling these common needs.
Forms are one of the most common things all developers have to build on websites. You can build them without Angular's form directives but using them will make them easier.
Way back in Video 1.6, we made a simple call to an API to get some values.
We've seen some of the template syntax that Angular 2 uses in its components off and on through the course, but there's more to it than just the basics. The user needs to get a sense of what else can be done in the template.
Learning about the template syntax is only part of what you need to do to explore components. You also need to make components that take input values for settings and content and emit events so that other code can react to changes in the component's state.
Sometimes you need to repeat multiple elements in a sequence rather than one element with children. More advanced templating can help with that. Also, it's not uncommon to want repeated filtering or styling of your output and this is where Pipes come to the rescue.
If you want to have several different views within your app and yet keep it on a single page, it's good if you can have your app change views based on the current browser location. Angular supports this via the router and understanding this is crucial to be able to build bigger apps.
Sometimes we need to switch routes on command within our code or update several components at the same time with a single route change. Finally we should see how we can switch to a different routing mechanism if we don't want to update our server setup to handle the default one.
Web page after web page showing you how to build a to-do app doesn't help you build a real large application using Angular. What it does is understanding some of the problems that older web technologies had, how a modern single-page app avoids them, and what problems to avoid with Angular apps.
Oddly enough, nobody seems to talk about errors with SPAs. Every app has them and lots of them occur because bad parameters get sent, people close their browsers or lose Internet connections, and users have to authenticate too many apps. We've got to spend a few minutes talking about errors, so you can help the backend produce the best API possible.
Building complicated applications on the frontend means creating complicated bugs. How do you find them to fix them? Which tools and techniques are available? Knowing your options will help you retain more of your hair over time.
Multiple developers working together make mistakes that a single developer wouldn't. In order to catch them quickly, it's a good idea to combine the code from multiple developers regularly to build and test it. In this video, I explain why you should care and what you must have in place to be able to use a continuous integration server.
Hopefully completely sold on the idea of automated builds, our viewers are desperate to know how to set up such a thing. In this video, we show all the steps needed to do so (except all of the Git-related stuff).
Development operations are error prone because it's complicated and we're human. Automation is the cure.
The previous video introduced the ideas of Ansible but the user doesn't yet know how to get started. Take the user through using Ansible at the command line, create an initial playbook, review a more sophisticated playbook, and finally create an all-new one.
The user is paying for servers even if all they are doing is testing playbooks. Use Vagrant and VirtualBox to create servers on the fly, test them, and then destroy them as needed.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.