In this lecture, we're going to create our first module, the Seelye has created a module for us called
AMP Module Acts.
This module is being imported into the main ports file.
We are passing on this module to the bootstrap module function.
The word bootstrap means to initialize a system, in our case, we are initializing our app with this
module.
Let's go back to the app module acts file.
At the moment, the file is empty, the bootstrap module function is expecting a module.
Let's create one.
A module is written as a class.
Since this module is being imported into another file, we will export a class called out module.
Be sure the letters A and M are capitalized.
The main doctor's file is expecting this name after exporting the class, we need to tell Angular this
class is a module.
As far as Angular is concerned, we're shipping a plain class.
Classes are heavily used in angular for different features.
Angular needs help to identify the type of class we're creating.
We can use a decorator, decorators or another heavily used feature in Angular.
If you're not sure how decorators work.
Be sure to check out the TypeScript section of this course for understanding the basics.
Angular defines dozens of decorators.
It has a decorator for annotating a class as a module at the top of the file.
We will import a decorator called N.G. module from the at angular core package.
The energy module decorator is a function for adding metadata to a class.
It'll add the necessary information for Angular to understand we're creating a module.
Let's apply this decorator to the app module class.
The decorator must be called as a function, which is why we include the parentheses.
We can pass in some values to configure the module.
We'll get to that in a moment.
For now, let's check out the app in the browser.
The page will be blank, which indicates the app is working, or so it seems.
Let's open the council and the developer tools.
You can open the developer tools by pressing F12 on your keyboard.
Alternatively, you can right click anywhere on the page and select the Inspect option.
The developer tools are a suite of tools for debugging Web applications under the console panel will
be presented with errors or messages from our app.
We're receiving an error.
It's telling us we need to include a module called browser module.
Angular is primarily used in the browser.
However, that's not our only option.
We can run angular on mobile devices.
Alternatively, we can build standalone desktop apps with angular.
It's entirely optional to run angular in the browser.
By default, Angular doesn't assume the environment our application is running in if we need to run
angular in the browser.
We need to import a module called browser module.
This module includes services for helping us work with the browser.
Let's switch back to the editor.
At the top of the app module file, we will import an object called Browser, a module from the Angular
Flash platform browser package.
We are importing a module.
You heard that right.
Modules are not necessarily isolated from one another.
They're a way to group files at the same time.
There will be times where will need code from other modules.
It's entirely possible to import and angular a module into another angular module.
Before we do, let me show you something.
If you're using Visual Studio, you can hold down control or command and click on the browser module
object.
The editor will open the file for us if we scroll down.
This file will come across dozens of import statements.
If angular module system didn't exist, we'd be importing a dozen features to get browser support instead
of doing that.
We get everything wrapped up in a single file.
Pretty cool, right?
Angular inbuilt module system improves Java Scripts module system.
There are other cool features that come with modules which will discuss later.
The next step is to register the browser module back in the app module.
We're going to post in an object to the engine modules decorator.
We can configure the module by adding an option called imports.
Its value will be an array.
Inside this array, we can pass in a module.
Let's pass in the browser module.
Without doing anything else, angular will take care of the rest.
Whatever is exported by this module will be imported into our module.
Features exported by the browser module will be exposed to the app module.
Let's refresh the page in the browser.
The heirs have gone away, but new ones have arisen in the console.
The heirs says the following the module was bootstrapped, but it does not declare bootstrap components,
nor a method pleased to find one of these.
We bootstrapped a module, but we haven't bootstrapped a component.
Components are a core feature in Angular.
In the next lecture, we will discuss the concept of components.