Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:67Length:8.9 hours

Next lesson playing in 5 seconds

Cancel

Free Preview: Angular Fundamentals

Introduction

00:48
  • Overview
  • Transcript

When it was first released, Angular turned the world of front-end development upside down. It was one of the first modern JavaScript frameworks, and the Angular team has never looked back—it just keeps getting better and better. Built with TypeScript, a powerful language that compiles to pure JavaScript, Angular takes advantage of futuristic language features to make coding faster and easier, and it uses all the latest best practices and standards for front-end app development. Angular is also a great platform for building cross-platform mobile apps!

If you want to master Angular for web development, this course is a great place to start. Follow along and you'll learn all of the fundamental building blocks that make a modern Angular app, up to date with the latest build. You'll learn how to create all of the main parts of an Angular application, including modules, components, services, directives, and pipes. You'll also see how to work with the CLI, write unit tests, and build for production. Along the way, you'll build an entire app from scratch to practice what you've learned!

Learn JavaScript: The Complete Guide

We've built complete guides to help you learn JavaScript and learn Angular, whether you're just getting started as a web developer or you want to explore more advanced topics.

1.Introduction
6 lessons, 42:00

Free Lesson
1.1
Introduction
00:48

Free Lesson
1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


1. Introduction

1.1 Introduction

Hi, folks, welcome to the Angular Fundamentals mega course from Tuts+. My name is Dan Wellman, and in this course, we're going to cover the main fundamentals of the Angular framework, which you'll need to be able to build modern, maintainable, front-end applications. We're going to build a small demo application throughout the course. And we'll use this to look at all of the different types of component that we can create in Angular, including modules, components, services, directives, and pipes. We'll also cover making HTTP requests and creating HTTP interceptors, setting up routing and working with route guards. We'll also see how to write unit tests for all of these different types of application building block. So join me in the first lesson and let's get started.

1.2 Get Started With Angular-CLI

Hello folks, in this lesson, we're going to get the essential components installed, ready for you to follow along with the code examples if you want to, which I'd recommend. You'll need to have Node.js installed, the latest version of the time of writing is 8.10.0. The Angular team recommends using a version of Node greater than 6.9, and NPM v3 and up. If you've already got them installed, you should be good to go. If you don't have them installed, head on over to Nodejs.org and follow the installation instructions for your platform. The easiest and most productive way to work with Angular right now is using the Angular CLI. So the first thing we need to do is get that installed. We can install it globally using this command. Depending on what platform you're using, you might see some errors in the output there. So to test that the CLI has been installed correctly, you can just run the NG command, and that will list all of the commands that can be used. So it looks like everything's working correctly. The Angular CLI lets us create new Angular applications, or new components, services, directives. Or many other of the different building blocks that an Angular application is made of, directly from the command line, and this can save us a lot of time. There aren't any project files for this course. There's a copy of the completed application up on GitHub for reference, but we'll be starting from scratch, and creating everything we need as we go along. So let's create a new project now. The command line should be focused on the directory that you want to create the new project in. I'm creating mine in my users folder. And we can create a new project using this CLI with the following command. So the command starts with ng, all of the Angular CLI commands begin with ng, and then we want to run new in order to create a new application. And we need to specify the name of the directory that the application is going to be created in, so I've called mine js-blackjack. We've also used the style flag, and we've set that to scss because we're going to be using Sass to create styles for our application. Once the new command is finished, we should see a lot of output in the command line, and it should end with projects js-blackjack successfully created. So this will create a new directory in whichever directory the command line is focused on, and it will configure the app to use Sass. Let's take a quick look around the skeleton application. The editor that I'll be using throughout this course is Visual Studio 2017 Community Edition, which is totally free and has many great features. Another popular IDE is VSCode. The editor shouldn't matter too much, so just use whatever you're comfortable with. So inside the root directory of the new application, we should find some existing directories. There will be an e2e directory which will contain end-to-end tests, a node modules directory, and an src directory. There are also a bunch of loose files, which are mostly configuration related. There is a .angular-cli.json file, let's just open that up and have a quick look. So this contains configuration for the CLI itself, it shows where various other configuration files are, such as the schema. And it sets a number of default properties, such as where the test configuration files are, where the styles are located, the environment files and all kinds of other things. Generally, we won't need to make too many changes to this file, but just bear in mind that this underpins a lot of how the CLI works. We also have a .editorconfig file, which provides configuration for the IDE. And also a .gitignore to tell Git, if you're using Git, any files that it should not track, such as all of the files in the node_modules folder. There are two configuration files for testing, the karma.conf.js file, This provides the karma configuration for our unit tests. And there's also a protractor.conf.js file, and this provides the configuration for end-to-end tests. Again, we generally won't need to make too many changes to these files. There's a package.json file, which is common to all applications built using Node.js and NPM. And the readme file, which we can use to tell people about our project. Finally, right at the bottom here, there are some TypeScript configuration files, the tsconfig.json file. So this provides configuration for the TypeScript's compiler when it compiles the TypeScript into JavaScript. Again, we'll rarely need to make any changes here. And lastly, we have a tslint.json file, and this provides all of the literals for the application. So let's take a look at the SRC folder. So this is where the majority of the code that we're going to create ourselves and work on will be kept. So inside here we have a number of other loose files, and we have an app folder, an assets folder, and environments folder. So some of the files in here are just regular kind of web files, we've got a favicon and an index.html page, but we also have some TypeScript files in here. There's one called main.ts, let's just open this up. So this one is used to bootstrap the application. We'll come back and look at this in a bit more detail later in the course. And there is also a file here called test.ts, this is a bit like main.ts, but it is for our unit tests. We don't need to worry too much about what's in here. But what this file does is just makes sure that when we run our unit tests, all of the .spec.ts files get included, and the context and testing environment gets set up correctly. Also included is a polyfills.ts file, which contains some browser polyfills. Mostly the code in this file is commented out, but depending on which browsers we'd like to support, we can come in and uncomment out whatever we need to. You can see the only things that are enabled in here are the reflect-metadata polyfill because that's a part of ES7, and that's not yet supported in most browsers. And also the zone.js file, and that is actually required by Angular itself. Apart from those two things, everything else is commented out. And we're not actually gonna be making any changes in this file. So there are some more configuration files for TypeScript in the SRC folder. Again, these are separated into file-specific for either the application or for testing. And it tells the compiler which files to exclude, and some other options like that. So the app point is for the application, and the spec one is for unit tests. And let's just take a quick look in the app folder here. So this is where the majority of the application that we're building will reside. And in here, we've got an example component and an example module. Now, we're gonna take a look at those files in much more detail very soon. For now, just understand that an Angular application is built of one or more modules, and those modules contain usually one or more components, and a bunch of other things like services, directives, pipes, etc. And we'll be looking at all of those things later in the course, but this is where the CLI post in, in this app folder. We also have an assets folder. And at the moment it's empty, but this is where we can put things like CSS files, or Sass files, images, fonts, and anything else that is Is considered an assets. And lastly, we have this environments folder, and there's a couple of files in here. We've got a production environment file and a development environment file. These are pretty empty at the moment. The production environment just sets the production configuration property to true, and the development version sets the production property to false. So we don't need to worry too much about that, just understand that when we do a production build, Angular will use the environment.prod.ts file. But as we are building the application and running development builds, Angular will use the environment.ts file. So this could be used to specify things like the URLs that we wanna make, HTTP requests too, which are likely to be different in production versus development. So this has been a whistle-stop tour of exactly what Angular CLI installs for us and how it configures the initial seed for the application. There are a number of configuration files. So we've seen that the CLI provides a lot of configuration for us. And this is where it can really save us time. So you can install all of these different things manually and configure them all individually, and it's not completely insane, but it can take a very long time, especially the first time that you need to do it. You need to configure web pack, TypeScript, and all of the other tooling. And it requires a pretty specific configuration that can take a few attempts to get right. Angular CLI takes care of all of that configuration for us, leaving us free to get on with actually building the application. Thanks for watching.