Chapter 1. Creating the Base Application

The Angular application we will build is a list of posts you regularly see in a social app such as Twitter. Each of these posts is posted by a user and we can click through to the user's profile to show all the posts made by the profile.

We will intentionally keep the application simple as the book is meant to focus on the technology rather than the functionality of the app. Although the app is simple, we will develop it using all the best practices of Angular development.

Web applications built with Angular can be optimized for search engines (SEO). Building support for SEO in apps means that search engines can read and understand the pages, and that the pages have dynamic data that is specifically aimed at search engines (meta tags). This increases the visibility of your app, giving higher search rankings and more links, resulting in more revenues for you or your client. Angular provides built-in features that can be leveraged to ensure apps enjoy maximum visibility on the web.

Lesson Objectives

In this lesson, you will:

Install Angular CLI
Create an Angular application
Create the base UI of the application
Create the header and footer of our application

Server-Side and Client-Side Rendering

When we talk about server-side rendering of websites, we are generally referring to an application or website that uses a programming language that runs on a server. On this server, the web pages are created (rendered) and the output of that rendering (the HTML) is sent to the browser, where it can be displayed directly.

Note

The code bundle for this book is hosted on GitHub at https://github.com/TrainingByPackt/Beginning-Server-Side-Application-Development-with-Angular

When we talk about client-side rendering, we are generally referring to an application or website that uses JavaScript running in the browser to display (render) the pages. There is often a single page that is downloaded, with a JavaScript file that builds up the actual page (hence the term single-page application).

Installing Angular CLI

Angular CLI is the officially supported tool for creating and developing Angular applications. It is an open source project that is maintained by the Angular team and is the recommended way to develop Angular applications.

Angular CLI offers the following functionality:

Create a new application
Run the application in development mode
Generate code using the best practices from the Angular team
Run unit tests and end-to-end tests
Create a production-ready build

One of the main benefits of using Angular CLI is that you don't need to configure any build tools. It's all abstracted away and available through one handy command: ng.

Throughout the book, we will be using the ng command for creating the app, generating the code, running the application in development mode, and creating builds.

Note

For more information about Angular CLI, refer to the project page on GitHub (https://github.com/angular/angular-cli)

To install Angular CLI on your machine, perform the following steps:

Open your terminal.
Run the following command:
```
npm install –g @angular/cli@latest
```
Once the installation is finished without any errors, make sure that the ng command works as expected by running the following command:
```
ng --version
```
Verify that the output is similar to the output shown here:

In this section, we have installed Angular CLI. We can start building our application!

Generating a New Application

Now that we have installed and configured Angular CLI, we can start generating our new application.

Running the ng new command will do the following:

Create a folder called angular-social
Create a new basic application inside this folder
Add a routing module (because the --routing flag is passed in)
Run npm install inside this folder to install the dependencies
Run git init to initialize a new Git repository

Creating a New Application

To create a new application, perform the following steps:

Open your terminal and navigate to the directory where you want to work on your application:
```
cd dev
```
Once inside your workspace directory, invoke the ng command as follows:
```
ng new angular-social --routing
```
The output of this command will be similar to the following:

Let's have a look at the folders that are created after running this command:

src: This folder contains the source files for our application
src/app/: This folder contains the application files
src/assets/: This folder contains the static assets we can use in our application (such as images)
src/environments/: This folder contains the definition of the default environments of our application
e2e: This folder contains the end-to-end tests for our application

Serving the Application

To serve the application, perform the following steps:

When the installation is finished, we can open our terminal and enter the working directory:
```
cd angular-social
```
Run the ng serve command to start the development server:
```
ng serve
```
The output of the command will be as follows:

Viewing Your Application

To view your application, perform the following steps:

Open your browser and navigate to http://localhost:4200/.
You should be greeted with a default page that says Welcome to app!:

In this section, we have created a basic application using Angular CLI and viewed the same in the browser.

Setting Defaults for Angular CLI

Angular CLI works great out of the box and the default setup delivers a nice configuration to work with. But in addition to having some sane defaults, it is also very configurable.

In this book, we will take the opportunity to configure our Angular CLI defaults so it behaves a little bit differently.

The things we are going to change all have to do with how we generate (or scaffold) our code.

When scaffolding components, the default Angular CLI settings will create the HTML template and style sheet in a separate file.

In order to keep all component content in one file, we will configure Angular CLI to generate inline templates and styles.

The advantage of keeping all the component content in one file is that you can work on templates, styles, and the actual component code in a single place without having to switch files.

Configuring Global Defaults

In your terminal, run the following commands to globally configure the defaults:

ng set defaults.component.inlineStyle true
ng set defaults.component.inlineTemplate true

When we run the git diff command, we see that these settings are stored in the .angular-cli.json file in our application:

In this section, we have configured Angular CLI to generate inline styles and templates.

Configuring Global Styles

The default generated Angular application does not have any styling.

Angular does not dictate anything in terms of style, so in your own projects, you can use any other style framework, such as Angular Material, Foundation, Semantic UI, or one of the many others. Alternatively, you can create your own styles from scratch to get a unique look and feel.

For this book, though, we will stick to Bootstrap 4 and Font Awesome as they're widely used and they provide a great style with a minimal amount of added code.

Linking to the Style Sheets in global styles.css

As discussed in the previous section, our application comes with a global style sheet, src/styles.css.

In this style sheet, we will use the @import command to link to Bootstrap and Font Awesome. This will instruct Angular to download the files and apply the style to your application globally.

Adding Bootstrap and Font Awesome

Open the src/styles.css file in your editor.

Add the following two lines at the end of the file:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

Refresh the app in the browser.

As you can see, the font of the application was updated to a sans-serif font as that's the Bootstrap default:

Showing an Icon on the Page

Open the src/app.component.html file and replace the content with the following:
```
<h1 class="text-center mt-5">
  <i class="fa fa-thumbs-up"></i>
</h1>
```

When the app refreshes in your browser, you should see the thumbs up icon in the center of the page:

Note

For a list of all available icons, you can refer to the Font Awesome Cheatsheet (http://fontawesome.io/cheatsheet/).

For an overview of all available Bootstrap styles, you can refer to the Bootstrap 4 documentation (https://getbootstrap.com/docs/4.0/getting-started/introduction/).

In this section, we have set up Bootstrap and Font Awesome as the style frameworks for our app. This will enable us to have a different font style than what Angular CLI provides. We can now start creating our UI components.

Creating UI Modules and Components

One of the great things about working with Angular is that it promotes building your applications in a modular and componentized way.

In Angular, an NgModule (or simply Module) is a way to group your application into logical blocks of functionality.

A Module is a TypeScript class with the @NgModule decorator. In the decorator, we define how Angular compiles and runs the code inside the module.

In this lesson, we are going to build a module that groups together all the components we want to use in our user interface.

We will add a LayoutComponent that consists of our HeaderComponent and FooterComponent, and in-between those, we will define the space where our application code will be displayed using the RouterOutlet component:

Creating the UiModule

In this section, we will generate the UiModule using the ng command and import the UiModule in the AppModule.

Using the ng generate command, we can generate or scaffold out all sorts of code that can be used in our Angular application.

We will use the ng generate module command to generate our UiModule.

This command has one required parameter, which is the name. In our application, we will call this module ui:

Open your terminal and navigate to the project directory.

Run the following command from inside the project directory:

$ ng generate module ui
   create src/app/ui/ui.module.ts (186 bytes)

As you can see from the output of the command, our UiModule is generated in the new folder src/app/ui:

When we take a look at this file, we can see what an empty Angular module looks like:

   import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: []
    })
    export class UiModule { }

Importing Our UiModule

Now that our UiModule is created, we need to import it from our AppModule. That way, we can use the code inside the UiModule from other code that lives inside the AppModule:

Open the project in your editor.
Open the src/app/app.module.ts file.
Add the import statement on top of the file:
```
import { UiModule } from './ui/ui.module'
```

Add a reference to UiModule in the imports array inside the NgModule decorator:

@NgModule({
   ...
   imports: [
     // other imports
     UiModule
   ],
  ...
 })

Our UiModule is now created and imported in our AppModule, which makes it ready to use.

Let's go ahead and create our first component inside the UiModule, and make it display in our app!

Displaying the Current Route

When building our app, we will heavily lean on Angular's router to tie all of our modules and components together.

Because we will build all the functionality in modules, we will use our main AppComponent only to display the current route. To make this work, we will need to update the AppComponent template and make sure we define the router-outlet:

Open the project in your editor.
Open the src/app/app.component.html file.
Remove all of the content and add the following HTML:
```
<router-outlet></router-outlet>
```

After refreshing the app in our browser, we should see a blank page. This is because we don't have any routes set up and thus there is no way the Angular app knows what to display. Let's move to the next section to create our basic layout!

Creating the LayoutComponent

In this section, we will use ng generate to create the LayoutComponent inside the UiModule and add the LayoutComponent to the AppRoutingModule so it gets displayed.

The LayoutComponent is the main template of our application. Its function is to glue together the HeaderComponent and the FooterComponent and show the actual application pages in-between those two.

Now we will be using the ng generate command to create our LayoutComponent.

Open your terminal and navigate to the project directory.
Run the following command from inside the project directory:
```
ng generate component ui/components/layout
```

When we look at the output, we see that our component was created in the new src/app/ui/components directory:

The last line of our output shows us that our UiModule was updated.

When we open our UiModule in our editor, we see that it added an import for our LayoutComponent and added it to the declarations array in the NgModule decorator.

The declarations array declares the existence of components in a module so Angular knows that they exist and can be used:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class UiModule { }

Adding a New Route

As described earlier in this section, we will use our LayoutComponent as the base for the whole application. It will display our header, footer, and an outlet to show our actual application screens.

We will leverage Angular's built-in routing mechanism to do this. We will do this by adding a new route to the routing array, and reference the LayoutComponent in this route's component:

Open the src/app/app-routing.module.ts file.

Add an import to the list of imports on the top of the file:

import { LayoutComponent } from './ui/components/layout/layout.component'

Inside the empty array that is assigned to the routes property, we add a new object literal.
Add the path property and set its value to an empty string ''.
Add the component property and set its value to the reference LayoutComponent that we just imported. The line of code that we add to our routes array is as follows:
```
{ path: '', component: LayoutComponent, children: [] },
```

For reference, the complete file should look like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './ui/components/layout/layout.component'

const routes: Routes = [
  { path: '', component: LayoutComponent, children: [] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

When our application refreshes, we should see the text layout works!:

Building Our Layout

Let's get rid of this default text and start building our actual layout:

Open the src/app/ui/layout/layout.component.ts file.
Get rid of the contents of the template property.

Add the following contents to the empty template string:

app-header placeholder
<div class="container my-5">
   <router-outlet></router-outlet>
</div>
app-footer placeholder

When we save our file, we see that our browser outputs a blank page.

Looking in the Console tab from Chrome Developer Tools, we see that we have an error stating Template parse errors: 'router-outlet' is not a known element:

In order to make Angular aware of how to render the router-outlet, we need to import the RouterModule:

Open the src/app/ui/ui.module.ts file.
Add an import statement to the list of imports on the top of the file:
```
import { RouterModule } from '@angular/router';
```
Add a reference to the RouterModule inside the imports array in the NgModule decorator.

When we now save the file, we should see the placeholders for our header and footer, with some white space in-between and the router error is now gone from our console:

Now that that's done, let's add some content to the placeholders!

Creating the HeaderComponent

In this section, we will use ng generate to create the HeaderComponent inside the UiModule, reference the HeaderComponent from our LayoutComponent so it gets displayed, and implement the navigation bar with a dynamic title and items.

We will be using the ng generate command to create our HeaderComponent:

Open your terminal and navigate to the project directory.
Run the following command from inside the project directory:
```
ng g c ui/components/header
```

When we look at the output, we see that our component was created in the new src/app/ui/header directory and that our UiModule was updated, just as we would expect after having done the same for our LayoutComponent:

Updating the LayoutComponent to Reference Our New HeaderComponent

Now, we will update the LayoutComponent so that it references our new HeaderComponent instead of our app-header placeholder:

Open the src/app/ui/components/layout/layout.component.ts file.
Find the app-header placeholder and replace it with the following tag:
```
<app-header></app-header>
```

When we see our application refresh in our browser, we see that we now have the string header works! instead of the placeholder:

We can now start implementing our actual header so that our pages finally start to look like an app!

Creating the Actual Header

Now we will create the actual header. We will define three class properties, a string property for the application logo and title, and an array of objects that represent the links we want to display in our header.

In the template, we will create a Bootstrap navbar consisting of a nav element with some styles, a link with our logo and title, and the actual navigation links.

Note

More information on how to use the navbar can be found here: https://getbootstrap.com/docs/4.0/components/navbar/

Download the file from https://angular.io/assets/images/logos/angular/angular.svg and store it as src/assets/logo.svg.
Open the src/app/ui/components/header/header.component.ts file.

Inside the component class, we add three new properties:

public logo = 'assets/logo.svg';
public title = 'Angular Social';
public items = [{ label: 'Posts', url: '/posts'}];

Replace the contents of the template property with the following markup:

<nav class="navbar navbar-expand navbar-dark bg-dark">
   <a class="navbar-brand" routerLink="/">
     <img [src]="logo" width="30" height="30" alt="">

   </a>
   <div class="collapse navbar-collapse">
     <ul class="navbar-nav">
       <li class="nav-item" *ngFor="let item of items" routerLinkActive="active">
         <a class="nav-link" [routerLink]="item.url">{{item.label}}</a>
       </li>
     </ul>
   </div>
</nav>

When we save this file and check in our browser, we finally see the first real part of the application being displayed. Things will move quickly from now on:

Let's apply the knowledge we have gained in this section to build the FooterComponent.

Creating the FooterComponent

In this section, we will use ng generate to create the FooterComponent inside the UiModule, reference the FooterComponent from our LayoutComponent so it gets displayed, and implement the footer and add a small copyright message.

We will be using the ng generate command to create our FooterComponent:

Open your terminal and navigate to the project directory.
Run the following command from inside the project directory:
```
$ ng g c ui/components/footer
```

When we look at the output, we see that our component got created in the new src/app/ui/footer directory and that our UiModule was updated, similar to what happened in the previous sections:

Updating the LayoutComponent to Reference Our New FooterComponent

We will update the LayoutComponent so that it references our new FooterComponent instead of our app-footer placeholder:

Open the src/app/ui/components/layout/layout.component.ts file.
Find the app-footer placeholder and replace it with the following tag:
```
<app-footer></app-footer>
```

Just like with our header, we see after refreshing our application that we now have the string footer works! instead of the placeholder:

The last step is to implement the footer and our base layout is done!

Creating the Actual Footer

Now we will create the actual footer. We will define two class properties, a string property for the name of the developer, and the year.

In the template, we will create another Bootstrap navbar consisting of a nav element with some styles and the copyright message that uses both string properties we defined in our component class:

Open the src/app/ui/components/footer/footer.component.ts file.
Inside the component class, add the following property. Don't forget to update the two placeholders with the right data:
```
  public developer = 'YOUR_NAME_PLACEHOLDER';
  public year = 'YEAR_PLACEHOLDER';
```
Get rid of the contents of the template property.

Replace the contents of the template property with the following markup:

<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
   <div class="navbar-text m-auto">
      {{developer}} <i class="fa fa-copyright"></i> {{year}}
   </div>
</nav>

When we save this file and check in our browser, we finally see that the footer is being rendered:

We are done with our layout! In this section, we've built our header and footer components. We've also built our layout component and created a UiModule. Let's get to building our actual application logic.

Summary

In this lesson, we installed Angular CLI and created the Angular application. We set a few default settings and configured our global styles with Bootstrap and Font Awesome. We then created the basic UI and layout of our app. Finally, we implemented a header and a footer in our app.

In the next lesson, we will create the application module and components.