|

AngularJS Component Tutorial

AngularJS Component File Structure

In the prior tutorial, we got a nice introduction to Angular JS and even used the Angular command line interface to get a project up and running. In this tutorial, we’ll look a little more closely at the code execution of an Angular application and the files that make up components in Angular. First we’ll add Bootstrap as a dependency to our project so that we can get some quick and easy styling right away. At the command line in the root of our Angular project, we can type the following.

hello-angular $npm install --save bootstrap

This loads into the project and it is now a dependency in package.json as we can see here.


Configure angular.json to use Bootstrap

By adding Bootstrap as a dependency, we can now actually configure Angular to make use of those files. To do so, we open up the angular.json file and add the path to the bootstrap css file we would like to use in the “styles” section.


Test some markup in app.component.html

Let’s see if the Bootstrap styling takes effect in our Angular application now. To do so, let’s open up the app.component.html file and just add some simple Bootstrap markup that we found in the examples from the Bootstrap website.

Now, let’s boot up our Angular application using the ng serve command.
ng-serve with bootstrap

When we visit http://localhost:4200/ in the browser, the styling has indeed taken effect!
angular application with bootstrap installed


index.html in AngularJS

In AngularJS, it is the index.html file which is served when the application is running. In our single page application then, this is the single page which is served. You’ll note that we actually put the html code above in a file named app.component.html. So how did this html code get displayed when we loaded the index.html page in the browser? The Angular CLI created <app-root></app-root> as the root component of the application. It is this component that ties together the whole Angular application. We can see this mark up in index.html here.


A Component Has Several Files

In Angular, each component has several files associated with it. Ir we look in the src/app directory we can see all the files the command line interface created for us to build the main <app-root></app-root> component.
the files that make up an angular component


Inspecting app.component.ts

The first thing that Angular looks at is the selector property in the app.component.ts file. Notice that here it is a string value of ‘app-root’. Therefore, when Angular loads this component, it looks for a tag with the matching ‘app-root’ string and then replaces that tag with this rendered component.


Inspecting main.ts

If the index.html file is the main placeholder of the Angular application, then the main.ts file is where the starting point of the Angular script engine kicks off.

app module angular

app.module.ts

A quick summary of how Angular boots up based on the files above is as follows.

  • Angular starts with main.ts
  • The application is bootstrapped using app.module.ts as an argument
  • This module specifies to look for AppComponent when launching
  • Angular then looks into that component and finds the app-root selector
  • Finally, when index.html loads <app-root></app-root> is replaced with the rendered component

Components

Components are a key feature in Angular. Each component has its own template, its own html markup, its own styling, as well as its own business logic. VueJS a nice way of wrapping all of these features up into what are known as Single File Components. In Angular, we keep these responsibilities in separate files. Components allow the developer to split up the complex web page into reusable parts. With this approach, you can create business logic once, and then use it as many times as you like.


Create Your Own Component

To better understand the file structure of Angular Components, we can go ahead and create one now. Now the app component that we already covered is kind of special. It is the root element of the entire single page application, and as such has a selector in the index.html file. New components that we create will not have their own selector in the index.html file but will be added to the app.component.html file.


Add A Sub Folder under /app

To begin building a new Angular component, we’ll add a new folder under the /app folder to hold any files related to the new component. We can imagine we are monitoring some virtual machines on the network. So we’ll create a virtual-machine component. That means we need a virtual-machine folder to hold our component files.
folder to hold angular component files


Create the component typescript file

With our folder created, we can now add a file named virtual-machine.component.ts.
angular component naming convention


Create the component template file

In addition to the Typescript file we just created, we also need to create the associated template file. This will typically be the same naming convention but with an html suffix. So we can also create the virtual-machine.component.html file in the same folder.


Define the TypeScript class for your component

Now can begin to build out the component but where do we start? Well in Angular, you can think of a component like a Class in object-oriented programming. In the case of Angular, it is a Typescript class which Angular will then instantiate as needed. We can place the following code inside of the virtual-machine.component.ts file.

In the snippet above, we have now created the VirtualMachineComponent class which is exported so it can be used elsewhere. Note the naming convention of the class. It is the name of the component itself, followed by the word Component. Now the way that Angular knows that this is a component is by use of the @Component Decorator. This decorator accepts an object where the key / value pairs are configuration options for this component. Note the selector property is set to ‘app-virtual-machine’. This is how we will identify and use this component. In other words, we can reference this component in template files now using <app-virtual-machine></app-virtual-machine>. The templateUrl property is used to point at the html file which contains the markup for this component. To start, we can have this simple markup in our template file for this component.

virtual-machine.component.html

Also note the import statement at the top of the virtual-machine.component.ts file. The component decorator is not something TypeScript automatically knows about. When adding the import statement we put the name of what we want imported in between the curly braces { }. We want access to the Component decorator so this is why we see { Component }. It is being imported from the angular core package. With this in place, the @Component decorator is available to typescript so when the file is compiled to JavaScript it can do so properly.


Register Our New Component!

You may be tempted to put your new component to use immediately! Before you can do so, you need to tell Angular about the new component and that it is ready for use. To do this, the component must be registered in the app.module.ts file.

The highlighted additions to the app.module.ts file above will register our new component with Angular. We can see that in the declarations array, there was already an AppComponent registered. To add our new component, we simply add a comma and then the name of our component which is VirtualMachineComponent. In addition to adding the name of our component to the declarations array, we also need to import this component as we see in the highlighted line.


Try the new component

We know that any new components can not be used directly in the index.html file of the Angular application. Where we can use them however is in the already existing AppComponent. Let’s open up the app.component.html file and add a reference to our newly created component.

Now in the background we still have ng serve running. If you check in the command line, you might see the application re compiling as we have made these new updates.
ng serve re compile hot reload

When visiting the browser, our newly created component is rendered out onto the screen. Excellent!
angular js custom component


AngularJS Component Tutorial Summary

The idea of Components exist in all popular front end frameworks. As developers, we have a goal of creating focused containers of reusable business logic and design presentation. This is achieved in the form of Components. With Angular, we have learned that the root component of the entire application is <app-root></app-root>. This is created for you when building your Angular application for the first time using the Angular CLI. We don’t want to modify this component directly, but we can create new components that can be referenced inside of the containing app-root component. To do this we took the following steps.

  • Create a new folder using the name of the new component
  • Added a Typescript file using the name of the component in this folder
  • Added an html template file which also uses the name of the component
  • Use the @Component decorator to configure the component
  • Added the html markup to the template file
  • Registered the new component in the declarations array of app.module.ts
  • Made use of the new component using <app-virtual-machine></app-virtual-machine>

Next up we’ll have a look at the Angular CLI to help create components and do the heavy lifting for us.

|