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.1 Bootstrapping the Application

All Angular apps must be bootstrapped in order to load them in the target environment. In this lesson we take a look at the main entry point for our application, which is where this bootstrapping takes place.

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.1 Bootstrapping the Application

Hi folks. In this lesson we can take a look at how an Angular application is bootstrapped, which is like an initialization process whereby it is loaded in the browser. Angular apps don't have to be loaded in the browser. They can also run in NodeJS or other environments. When we do want to run an app in the browser, we need to Bootstrap it specifically for the browser. Because an Angular application is modular, it needs to have an entry point defined, which is where the module loader can load the initial module, which loads the rest of the application. The CLI has created an entry point for us. This is the main.ts file which is in the src directory. Let's open it up and take a look. At the top of the file, there are some import statements. These are interesting because they use the ES module syntax. The import and from keywords are pure JavaScript. Unfortunately, they aren't yet supported in all mainstream browsers, which is why we have to have Webpack in the project to load the modules for us. So the import keyword is followed by the identifier that we want to import within curly braces. Depending on the type of export that we're working with, we may or may not need the curly braces, but for most, maybe even all of the Angular imports, will import specific identifiers using this curly bracket syntax. We then use the from keyword to specify the path to the file that contains the identifier that we want to import. Webpack has some mappings in place, so we don't need to explicitly reference the node modules folder, which is where all of the Angular modules that we'll be using reside. After the Angular imports, we then have some application specific imports. We import the app module from the app.module file in the app folder, and the environment file from the src folder, which is the root of the application. After the imports, we then check whether we're running in production mode. At the moment, and for most of the time while we're developing, we'll be running in development mode and not production mode. Angular apps run in development mode by default, and if we want to run in production mode, we need to specifically tell Angular to do this. We can tell Angular to run in production mode using the CLI, and we'll take a look at this right at the end of the course. So when we do run a production build, environment.production will be true and we can signal to Angular to run in production mode by calling the global enable prod mode function. This was one of the things that we imported from the core Angular module at the top of the file. There are a number of differences between development mode and production mode. In production mode, our component templates will be pre-compiled. The generated JavaScript and CSS files will be concatenated and minified, and unused or dead code will be eliminated from the resullting package. None of these things are useful in development however, so they are only enabled in production mode. For loading the app in a browser, which is what we want to do most of the time, certainly in this course, we'll use the Bootstrap module method of the platform browser dynamic module. We pass in our own app module which is the root module of our application. This method returns a promise and has a catch method attached to handle any errors in the bootstrapping process. So this file already does everything that we need it to do. Even once we've completely built the application, this file won't need to change at all. Separating the booting of the application from the application itself like this is a great design. It means that we just don't need to worry about this file again. I just want to point out again, I did mention it already, but just so that we're clear, Angular uses the Webpack module loader under the hood to handle loading modules in the application. This is all configured for us automatically and we generally won't need to make any configuration changes to Webpack itself. So in this lesson, we saw that we can Bootstrap our application relatively easily using a couple of Angular modules. Remember, all bootstrapping is, is loading our root module. We also learned that we can handle running in production and development modes easily using the enableProdMode() method, which basically just handles everything for us. And that we used the bootstrapModule() method to bootstrap the app module. Thanks for watching.

Back to the top