7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.5 Angular Modules From the CLI

In this lesson we'll take a look at which Angular modules get installed when scaffolding an app using Angular-CLI. Angular is modular, so we don't automatically get the entire library.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

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.5 Angular Modules From the CLI

Hi folks, in this lesson we're gonna take a quick look at the different Angular modules that the CLI installed for us when we created our application. Unlike the 1.x versions of Angular, the newer 2 plus versions of Angular including Angular 5 which we're using in this course, are completely modular. This is great because instead of installing a single huge monolithic framework that includes everything, we can just install and use only the parts that we want to actually use. So lets see which modules we get by default. Lets open up the package.json file. This file contains meta information about our projects. In the dependency section, we can see that there are a number of common modules. All of the angular ones are prefixed with @angular. And we can see that we get the animations module, the common module, he compiler, the core module, the forms module, the http module, platform browser and platform browser dynamic, and the router modules. So these are all Angular modules that we're going to make use of in the application, and which we'll need to form part of the actual finished application. So that's why they're in the dependencies section. If we scroll down a bit, we can see that there are also some dev dependencies. So these are dependencies that we're going to be making use of while we're building the application, but which won't actually need to be served with the application when it gets deployed for end users to make use of. And as well as the Angular dependencies, there are also a couple of non-Angular dependencies which are created by third parties, but which Angular itself makes use of. So these are the core-js, rxjs, and zone.js files. Now, throughout the course as we use bits of those dependencies, we will take a look at them, but we're not gonna focus on them because, as I said, they are third party. So now in the devDependencies section, we can see that we have a number of Angular dependencies once again. We get the CLI and the compiler CLI. So we're going to be using those as we use the Angular CLI to develop the application. We also get a file called language service, and that is what provides some of the services that the IDE makes use of, so some of the TypeScript things. And we also get Jasmine and some types. And they provide information to TypeScript. So there's a couple there for Jasmine, and there's one for Node. And as well as these, we also get some Jasmine utilities, we'll need these for writing our unit tests. And we get some comma dependencies and again, we'll use those for unit tests. But they're more for actually running the unit tests than they are for creating them. And we also get some TypeScript files, we get TSLint. We get TypeScript itself and TypeScript for Node. And the protractor dependency there is used for running the end-to-end tests. So, I just want to point out that the types files that we get here are kind of default ones that we're using because we're using Jasmine in this application. If we're using any other third party dependencies, like if you wanted to use jQuery, for example. Not that you'd need to because Angular does everything that jQuery can do much, much more. But if you did want to use that, you could install the types file for jQuery. And that would tell TypeScript about the different types the jQuery provided. And it would stop us getting things like compiler warnings when we try to do a production build because TypeScript didn't know what a particular thing was. So we aren't going to be using any third party dependencies. We won't need to install any additional types. But depending on the application that you're building, you might wanna do that. And if you do want to do that, there are many, many types for many, many common third party libraries that can be installed. And they would go into this devDependency section here. So in this lesson, we looked at exactly which parts of the Angular framework get installed by default when we scaffold out an application using the Angular CLI. Thanks for watching.

Back to the top