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

2.2 The Application Module

Angular applications are usually built using an NgModule as a container. In this lesson we see what that is and why it is necessary.

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


2.2 The Application Module

Hello folks, in this lesson we're going to take a look at the AppModule. This is the root module of the application, which is the module that gets bootstrapped in order to start the app running. So let's open up the app.module.ts file that the CLI created for us and take a look inside. So this file follows a familiar format with some imports at the top of the file, starting again with some at angular imports. It's a best practice to include these at the start of the file and to separate them from our own internal imports, hence the line breaks between the import statements, although two-line breaks is a bit excessive. We can fix this later. We'll end up importing a bunch more things into this file later on anyway. So we import the BrowserModule from Angular because we're going to be running in a browser and we import something called NgModule. This is actually a decorator, which is a bit like a function. We'll use this to tell Angular that we want to create a module and we pass an object to the decorator to tell it all about the module. This object contains several different arrays, and each one is used to load a different type of thing within Angular. Angular apps are heavily componentized. They are basically a bunch of components composed together in different ways to provide the UI of the application. In the example application, we have the app component. This doesn't need to change. You'll still have a root application component that holds the shell of the application, which is always visible. This is specified using the declarations array in the meta objects passed to the NgModule decorator. The imports array is used to specify other modules that we want to include in our application. This could be built in modules that come from Angular, third-party modules that we've downloaded via npm, or other custom modules that we might have created ourselves. In this case, we just want to use the BrowserModule that we imported at the top of the file. The provider's array is used to include services in our application. Services in Angular 2+ are just like services in Angular 1.x or AngularJS, as it's now known. Services can be injected into components to provide business logic, store states, or to share common functionality like ajax requests between different components. This is empty at the moment but we'll add some services later in the course. Lastly in the configuration object, we specify the root component using the bootstrap array. At the end of the file we export the app module as a class. Again, this is no different from regular JavaScript. Like the entry point main.js, this is a very simple and at the moment very small file which is responsible for defining the shell of the application. This file will change as we build our own application and we add more components and services, but it won't grow in complexity, only in size. So it will still be very easy to manage right at the end of the project. This file defines the root module of the application. In a small application this might be the only module that we need, but in larger applications we are free to create feature modules to help organize related parts of the application into reusable self-contained chunks. So this file defines an Angular module but you should understand that this is different from a regular JavaScript module. The file itself, app.module.js is a JavaScript or ES module because it uses the import and export tokens, but the NgModule decorator specifies an Angular module. So this file is both an ES module and an Angular module. But you should just be aware that there is a difference between the two things. So in this lesson we saw that we use the NgModule decorator to define a module for an application. And in this case, it was the roots module of the application. Don't forget that the CLI creates and configures this for us. This file brings together all of the different parts of the application and makes sure that Angular knows about them. We saw that we can load components, modules and services using the meta object passed to the NgModule decorator, thanks for watching

Back to the top