Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

1.4 The App Module

The first step in building our Angular application is to create a module. In Angular 2, modules are the largest components that you can create to form an application and in our case our one module will be our entire application. If you have a large application you could of course break it into multiple modules. But let's begin by creating our app module. So we have a directory called app and this is where all of our project files are going to be. So in the app directory we'll create a file called app.module.ts and of course that's for typescript. Now one quick note here of course I'm using Veeam as my editor and I have added typescript syntax highlighting to Veeam so you'll probably want to do that for your own editor. But if you would rather just tell it to use JavaScript syntax highlighting for .ts files that would work pretty well for the most part as well. Inside of our module we're going to begin by importing a couple of important pieces. First we're going to import { NgModule } and we're going to get that from angular/core. And then we're also going to import the BrowserModule and we're going to import that from angular/platform browser. NgModule here is the decorator that we'll use on the module that we're about to create here. We need to import the browser module into our module because the browser module holds many of Angular core features for working with the dom and events and other things like that. We won't ever actually refer to the browser module but it will be doing a lot of work behind the scenes. Okay, so now that we've imported these two tools, it's time to go ahead and create our own module. Now as we create this module, we're going to see a pattern that will become quite common to us, as we create components and other pieces throughout our Angular application. And that pattern is this. First of all, you call a decorator. Now a decorator is a feature of JavaScript that is not actually part of the JavaScript language itself yet it's part of a future specification. But basically, it's some function that we can call on a construct in JavaScript. Maybe it's a function, maybe it's a class. It could even be an individual property or parameter and it will basically just run some functionality on that element. And so Angular2 uses decorators as a way of applying attributes to modules, to components, to other pieces as well. So the way you apply decorator is by starting with an @ sign and then using the decorator name. So in our case that's NgModule and these decorators are functions. So you just call them as a function and then whatever comes after the decorator is what that decorator will be called on. So after this we can do export class AppModule. And that's all you need to do to apply the NgModule decorator to this class. In fact, in the case of our AppModule we're never actually gonna have any content inside this class itself. Everything we need is just kind of configuration stuff and so it's going to go inside of this call to NgModule. And so let's give our call here to NgModule an object and this is going to allow us to apply some attributes to our module. Now, you'll find that in almost every lesson we're going to be adding things to this module file. For now, will keep this very simple. Let's have an imports array here of other files that we want to import into this module and make available for use within this module. And for now we will just import the browser module keep it nice and simple and that's really all that we need to do inside of our app module file. Now there is something else that we need to set up. What we've done here is create our Angular application by creating an Angular module. However, if you remember in the last lesson we started up the server and when this page popped up in our browser here at local host port 3002, and that may be different depending what ports you have available on your system. We have a 404 Request down here in the terminal, and inside the building rectory we created. We have a main.js file that the system module loader can't find. And so we need to create a main file which will tell our module loader to load our Angular application. So what will that look like? Well, let's go ahead and create, in the app directory, a main.ts file. And in here, what we're going to do is import two things. First, we're going to import our AppModule itself. So we can import the AppModule from app.module. However above that, I wanna import something else. What we're going to import first is platformBrowserDynamic and we get this from @angular/platform-browser-dynamic. This is a function that basically creates the platform for our application to run on. So we can create a constant here which we'll call platform and we can create this by running platformBrowserDynamic and then underneath this we can call platform.bootstrapModule and we will bootstrap the AppModule. And this is how our application gets started up. Now if we come over here to our servers notice that file changes have been detected, and our typescript compiler has been performing compilations. So now if we come back to the browser we can see that even though the page is refreshed we have the same error. We can't find that main.js file. So it looks like we have a problem because our typescript compiler is doing the compilation. Let's open a new terminal here and let's see, we don't have a build folder yet so that's a bad sign. Inside the app directory, okay, so you can see that our JavaScript files are being compiled here into the JavaScript directory. I guess the problem is that we never told the typescript compiler where to put the compiled files. So let's open up the tsconfig file. Let's add an option outDir for open directory. And let's say this is going to be the build directory, that way the typescript compiler will know that after compiles or typescript files it should put them as JavaScript files into the build directory. Okay, so let's save and close that. Let's go ahead and quit the typescript server and start it up again. And now if we come to the browser and the browser refreshes, you can see that we have some success. Now it's not entirely successful because we still have a bunch of errors here. So let's go through these one by one. We have a couple of missing files here. Okay, we'll get back to those. This is the first real error here. The module AppModule was bootstrapped, but it does not declare NgModule bootstrap components nor indeed do bootstrap method. So please define one of these. So what this is telling us is that although we've created a module and the module has been bootstrapped, it doesn't know what component to display on the screen first or basically how to bootstrap the actual displaying of the application. So to solve this problem, we need to create our first Angular component and we're gonna do that in the next lesson.

Back to the top