Angular: Getting Started

Course Overview
Hello. My name is Deborah Kurata and I'd like to welcome you to my course, Angular: Getting Started, from Pluralsight. This beginner level course takes you on a journey through the basic features of Angular. It guides you down the right path, making your own journey with Angular more pleasant productive. Along the way we build a sample application so you can code along or use it as a reference for your own development. You'll see how Angular provides a consistent set of patterns for building components, templates, modules, and services, helping you come up to speed quickly. This course covers how to build components, how to create the user interface for your application in a template, and power it up with data binding and directives. You'll discover how to build services for logic needed across components and inject those services where they are needed. You'll learn how to send requests to a web server using HTTP and observables, and you'll see how to set up routing to navigate between the views of your application. In addition, you'll see how to use the Angular command line interface or CLI to generate, execute, test, and deploy your Angular application. By the end of this course you will know the basics you need to get started your own Angular applications. I hope you'll join me on this journey through Angular: Getting Started from Pluralsight.

First Things First
First things first. Before we can start coding with Angular, there are some preparatory steps. Welcome back to Angular: Getting Started from Pluralsight. My name is Deborah Kurata and in this module we set up what we need to work with Angular. A little preparation goes a long way toward a successful adventure. Before we take that first step on our journey with Angular we need to make some decisions, gather our tools, and get everything ready. In this module we'll evaluate several languages we could use to build an Angular application and select one. Once we've picked a language, we select an editor that fully supports development in that language. Then we set up the boilerplate code for an Angular application, and we'll talk about modules and what they mean in Angular. Let's get started.

Introduction to Components
In the last module we set up the infrastructure of our Angular application. Now we are ready to build our first component. Welcome back to Angular: Getting Started from Pluralsight. My name is Deborah Kurata and in this module we walk through building a very basic component with a focus on clearly defining the component's parts, their meaning, and their purpose. We can think of our Angular application as a set of components. We create each component, then arrange them to form our application. If all goes well, those components work together in harmony to provide the user with a great experience. In this module we take a closer look at what an Angular component is and examine the code we need to build one. We walk through how to create the component's class and how and why we need to define metadata. We look at how to import what we need from external modules and we discover how to Bootstrap the app component to bring our application to life. We'll continue to add to this application throughout this course. Looking again at our application architecture that we defined in the first module, the Angular CLI created the index. html file and the app component. In this module we'll rebuild this app component. Let's get started.

Data Binding & Pipes
There's more to data binding than just displaying component properties. Welcome back to Angular: Getting Started from Pluralsight. My name is Deborah Kurata, and in this module, we explore more data binding features and transform bound data with pipes. To provide a great interactive user experience, we want to bind DOM elements to component properties so the component can change the look and feel as needed. We can use bindings to change element colors or styles based on data values, update font size based on user preferences, or set an image source from a database field, and we want notification of user actions and other events from the DOM so the component can respond accordingly. For example, we respond to a click on a button to hide or show images. And sometimes, we want the best of both worlds using two-way binding to set an element property and receive event notifications of user changes to that property. In this module, we'll use Angular's property binding to set HTML element properties in the DOM, we walk through how to handle user events such as a button click with event binding, and how to handle user input with two-way binding. Lastly, we'll discover how to transform bound data with pipes. And here once again is our application architecture. We have the first cut of our product list component, but it doesn't have any interactivity. In this module, we'll use data binding features to add interactivity to the product list component. Let's get started.

Services and Dependency Injection
Components are great and all, but what do we do with data or logic that is not associated with a specific view or that we want to share across components? We build services. Welcome back to Angular: Getting Started, from Pluralsight. Deborah Kurata here, at your service, and in this module, we create a service and use dependency injection to inject that service into any component that needs it. Applications often require services such as a product data service or a logging service. Our components depend on these services to do the heavy lifting. Wouldn't it be nice if Angular could serve us up those services on a platter? Well, yes it can. But what are services exactly? A service is a class with a focused purpose. We often create a service to implement functionality that is independent from any particular component, to share data or logic across components or encapsulate external interactions such as data access. By shifting these responsibilities from the component to a service, the code is easier to test, debug, and reuse. In this module, we start with an overview of how services and dependency injection work in Angular, then we'll build a service, we'll register that service, and we'll examine how to use the service in a component. We currently have several pieces of our application in place, but we hardcoded our data directly in the product list component. In this module, we'll shift the responsibility for providing the product data to a product data service. Let's get started.

Retrieving Data Using HTTP
The data for our application is on a server somewhere, in the cloud, at the office, under our desk. How do we get that data into our view? Welcome back to Angular: Getting Started, from Pluralsight. My name is Deborah Kurata, and in this module, we learn how to use HTTP with observables to retrieve data. Most Angular applications obtain data using HTTP. The application issues an HTTP GET request to a web service. That web service retrieves the data, often using a database, and returns it to the application in an HTTP response. The application then processes that data. In this module, we begin with an introduction to observables and the reactive extensions. We then examine how to send an HTTP request and map the result to an array. We add some exception handling, and we look at how to subscribe to observables to get the data for our view. We finished the first cut of our product data service in the last module, but it still has hardcoded data. Now, we'll replace that hardcoded data with HTTP calls. Let's get started.

Navigation and Routing Basics
A single view does not an application make. Welcome back to Angular: Getting Started, from Pluralsight. My name is Deborah Kurata, and in these next two modules, we define routes to navigate between multiple views in our application. Users like to have all of the information they need at their fingertips, so our applications often provide multiple sets of data, in multiple layouts, across multiple views. Routing provides a way for the user to navigate between those many views of the application, whether there are 5, 10 or hundreds. In this module, we start with an overview of how routing works in Angular, we examine how to configure routes and tie routes to actions, and we define where to place the routed component's view. Currently, our app component embeds our product list component as a nested component. We instead want to define a set of routes so the user can navigate to the Welcome view, Product List view or Product Detail view. We've already built the product list component, and I've provided the welcome component with the starter files in the GitHub repository for this course. As part of the demos in this module, we'll build the shell for the product detail component. When we're finished with this module, we'll have a simple application that routes to multiple views.

Navigation and Routing Additional Techniques
Now that we know the basics of routing, we are ready for more. Welcome back to Angular: Getting Started, from Pluralsight. My name is Deborah Kurata, and in this module, we look at several additional routing techniques. With what we learned in the prior module, a user can now navigate to any defined route in our application, but that only covered the very basic routing scenarios. What if we need to pass parameters to a route or activate a route with code instead of with a clickable element? Or what if we need to protect a route and only allow access to it in special cases or by certain users? Or ask a user to save changes before leaving a route? In the second module on routing, we examine how to pass parameters to a route, how to activate a route with code, and how to protect our routes with guards. When we're finished with this module, we'll know how to handle additional routing scenarios, including routing to a component that requires parameters, such as our product detail component. Let's get started.

Angular Modules
As we've seen throughout this course, Angular modules are a key part of any Angular application. Welcome back to Angular: Getting Started, My name is Deborah Kurata, and in this course module, we focus on Angular Modules and how to use them to better organize our code. Ooh, it's so beautiful. No, it's not a Van Gogh, not even a Picasso. And yeah, it sort of looks like a metro map. This is a picture of what our application could look like if we leverage the power of Angular modules. Instead of one large AppModule like we have now, there are multiple modules, and each piece of our application has a logical place within one of those modules. This keeps each module smaller and more manageable. In this course module, we take another look at the definition and purpose of an Angular module. We then focus in on the Angular module metadata to better understand how to use it. We leverage that knowledge to create a feature module for our application, and take it one step further defining a shared module to reduce duplication. Lastly, we re-examine our application's root Angular module. Let's get started.

Building, Testing, and Deploying with the CLI
We've mentioned the Angular CLI a few times in this course, but haven't really discussed what it is or what it can do. What seemed like wizardry is instead a full-featured tool for building, testing, and deploying our Angular applications. Welcome back to Angular: Getting Started, from Pluralsight. My name is Deborah Kurata, and in this module, we look closer at the Angular CLI. Let's peek behind the curtain and learn more about this amazing tool. In this module, we start with an overview and discover the purpose and basic features of the Angular CLI. We then build an application from scratch using the CLI and examine the many configuration and startup files it creates. We dig into how it serves up our application, learn more about its code generation features, take a brief look at running tests, and prepare the resulting application for deployment. Let's get started.

Final Words
As you have seen throughout this course, Angular provides a consistent set of patterns for building components, templates, and services, helping us to come up to speed quickly. Welcome back to Angular: Getting Started from Pluralsight. My name is Deborah Kurata and the final words in this course include a recap of our journey, a few pointers to additional information, and a look at a broader description of Angular. Let's jump right into this short module.