The latest version of Angular is often seen as a framework that comes from the enterprise side of the tracks and generally enjoys the company of line-of-business applications. While it’s true that Angular has evolved from a framework to a platform that supports all types of applications, there are many truly amazing features for developers to create immersive experiences for their users.

This is the first part of a series on how to create a full page animated website in Angular. We’ll start by building a full page website and then animate it in the next installment.

In this tutorial, we’ll mainly focus on the Angular parts and stop talking about the HTML and CSS parts that aren’t directly related to building the app. Download the source code – opens in a new tab – to follow along. Not sold on Angular? Find the perfect website builder here (and the best prices below). Regardless of how you build your site, you will need decent web hosting and cloud storage.

01. Creating a Project

There are many moving parts that go into a non-trivial web application. What dependencies does your application have? How are you going to run it locally? How are you going to prove it? How are you going to group your assets?

Fortunately, the complex process of compositing these elements is handled out of sight, in @angular/cli. With just a few commands from our terminal we can have a fully functional Angular application ready to go.

The first step to working with the CLI is to install it. For this, use the following command:

npm install -g @angular/cli

Once the CLI is installed, from the command line we can navigate to the folder where we want to install our project. From there, it will run ng new with the name of our project. This will create a folder with the same name, which we’ll navigate to once the project is complete.

cd ng new angular-animations-site cd angular-animations-site

Y that is! Our Angular application is ready to run. You can start your application with npm start or ng serve. I prefer to use npm start because it is more conventional and allows me to add additional commands. You can then navigate to http://localhost:4200 to see the application running.

02. Include Animations and Angular Material

Since we like beautiful things, we’re going to make a few small additions to our app by adding and installing @angular/animations and @angular/material packages:

npm i -save @angular/material @angular/animations

We can tell Angular about these dependencies by adding them to our app.module.ts file. We’re going to be using the button, card, and toolbar from Angular Material, so we’ll import their respective modules, as well as the BrowserAnimationsModule.

// app/app.module.ts … import { MdButtonModule, MdCardModule, MdToolbarModule } from ‘@angular/material’; import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

We can add these to the imports array with our NgModule declaration.

// app/app.module.ts … import { MdButtonModule, MdCardModule, MdToolbarModule } from ‘@angular/material’; import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; @NgModule({ … imports: [ … BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdCardModule ], … })

And as a final addition, we’ll import the indigo pink theme to our styles. css.

/* styles.css */ @import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;

Up to this point, we’ve focused entirely on the app settings so we can start developing. These commands may seem clunky at first, but once you get used to them, you’ll find that it only takes a couple of minutes to have a fully built environment with all the bells and whistles we need to create a nice looking website.

03. Introducing a page component

Since we’re building a website with Angular, we’ll need to introduce a mechanism to display our pages. In Angular, the atomic building block of an application is the component. By designing our application with well-defined, encapsulated components, we can easily reuse functionality, as well as compose new functionality, by introducing new components.

The CLI ships with builder support out of the box . , and this is what we use to create our page component. We can generate our page component by running the following command (the g command is short for generate).

ng g component page

Note: I recommend taking the time to learn how to build the main pieces of Angular by hand until you’ve developed your muscle memory. Only when you really understand what is going on should you optimize your workflow with generators.

The CLI will generate a folder in the src directory called page with an HTML, CSS, and Typescript file, as well as a specs file. In our page.component.ts file, we have the basic structure of a component. Our component references our template and style files in the @Component metadata and has our constructor and ngOnit methods turned off.

// app/page/page.component.ts import { Component, OnInit } from ‘@angular/core’; @Component({ selector: ‘app-page’, templateUrl: ‘./page.component.html’, styleUrls: [‘./page.component.css’] }) export class PageComponent implements OnInit { constructor() { } ngOnInit() { } }

In addition to generating our component, the CLI will also modify our app.module.ts to include a PageComponent entry in our declarations array. This means that our page component is now available throughout the module.

// app/app.module.ts @NgModule({ declarations: [ AppComponent, PageComponent ], … })

As a control sanity, we can go into our app.component.html file and add to the end. Note that the element tag we’re using corresponds to the selector property defined in our @Component.

{{title}}

04 . Build Your Page Component

With our page component alive and well, we can build it so that it starts to look like a real web page. We will introduce a page object with title, subtitle, content and image properties.

// app/page/page.component.ts export class PageComponent implements OnInit { page = { title: ‘Home’, subtitle: ‘Welcome home!’, content: ‘Some content for home’, image : ‘assets/bg00.jpg’ }; constructor() { } ngOnInit() { } }

We will update our template to bind to the page. There is an image element that will eventually grow to fill the entire browser window. We’re also going to add an angular material card component to which we’ll bind the rest of our page object.

{{page.title}}

{{page.subtitle}} {{page.content} }

Our page component is starting to look a lot better! Our next step is to add the ability to have multiple pages and navigate between them.

Page 2: Creating Multiple Pages

.