How to Create a Personal Blogging Website: Front-End (Angular)
The newest version of Angular is frequently thought of as a framework that comes from the enterprise side of the rails and likes to hang around with line-of-business apps. While it is true that Angular has developed from a framework to a platform that supports a wide range of apps, there are several extremely cool capabilities that developers can leverage to build immersive user experiences. This is the first in a three-part series on how to use Angular to create a full-page animated website. We’ll begin by creating a full-page website, which we’ll then animate in the next installment.
Creating A Project Is The First Step.
In a non-trivial online application, there are a lot of moving pieces. What kind of dependencies does your app have? What method will you use to execute it locally? What method will you use to test it? What method will you use to bundle your assets?
Thankfully, the complicated process of combining these pieces is handled behind the scenes. We can have a fully working Angular application ready to work within only a few commands from our terminal. Installing the CLI is the first step toward using it. To do this, enter the following command:
npm install -g @angular/CLI
Once the CLI is installed, we can go to the folder where we wish to install our project from the command line. From there, we’ll run ng new with our project’s name. This creates a folder with the same name, which we’ll browse after the project is finished.
cd <your-projects-folder>
ng new angular-animations-site
cd angular-animations-site
Use Angular Material and Animations
That is all there is to it! Our Angular app is now up and running. You may use npm start or ng serve to start your application. I like npm start since it is more traditional and allows me to add in more commands. After that, go to http://localhost:4200 to see the application in action.
Because we enjoy beautiful things, we’ll add the @angular/animations and @angular/material packages to our application and install them:
npm i — save @angular/material @angular/animations
By adding these dependencies to our app.module.ts file, we can inform Angular about them. We’ll be utilizing Angular Material buttons, cards, and toolbars, so we’ll import their 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 then use our NgModule declaration to add them to the imports array.
// app/app.module.ts
…
import { MdButtonModule, MdCardModule, MdToolbarModule } from ‘@angular/material’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
@NgModule({
…
imports: [
…
BrowserAnimationsModule,
MdToolbarModule,
MdButtonModule,
MdCardModule
],
…
})
We’ve spent the entire time up to this point focusing just on setting up the application so that we can begin working. These commands may appear clumsy at first, but after you’ve gotten used to them, you’ll discover that it only takes a few minutes to have a completely built-out environment with all the bells and whistles we’ll need to construct a great website.
Add A Component To The Page.
We’ll need to develop a way for displaying our pages because we’re using Angular to construct a website. The component is the most fundamental building unit of an Angular application. We can easily reuse functionality as well as compose new functionality by adding new components since we designed our application using well-defined, encapsulated components.
We use the CLI’s built-in generator support to generate our page component. By using the command below, we can create our page component (the g command is shorthand for generate).
Take the time to learn how to create the primary Angular elements by hand until you’ve developed muscle memory for them. Only until you have a thorough understanding of what is going on should you use generators to improve your workflow.
The CLI will create a page folder in the src directory, which will contain HTML, CSS, Typescript, and a spec file. We have the fundamental structure of a component in our page.component.ts file. Our component has our function Object() { [native code] } and ngOnit methods stubbed out and references our template and style files in the @Component metadata.
// 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 {
The CLI will also alter our app.module.ts to add a PageComponent item to our declarations array, in addition to building our component. As a result, our page component is now accessible throughout the module.
Create your page component.
We can start to build it up so it looks like a genuine webpage now that our page component is alive and healthy. A page object with title, subtitle, content, and picture attributes will be introduced.
// app/page/page.component.ts
export class PageComponent implements OnInit {
page = {
title: ‘Home’,
subtitle: ‘Welcome Home!’,
content: ‘Some home content.’,
image: ‘assets/bg00.jpg’
};
To bind to the page object, we’ll edit our template. There is an image element that will be expanded to fit the whole browser window in the future. We’ll also include an Angular Material card component to which the rest of our page objects will be bound.
<! — app/page/page.component.html →
<img class=”fullBg” [src]=”page.image”>
<md-card>
<md-card-header>
<md-card-title><h1>{{page.title}}</h1></md-card-title>
<md-card-subtitle>{{page.subtitle}}</md-card-subtitle>
</md-card-header>
<md-card-content>
{{page.content}}
</md-card-content>
</md-card>
Our page component is beginning to take shape! The next step will be to add the ability to move across various pages.
Create the content management system.
Our material would most likely originate from a database in a production environment, but for the sake of this essay, we’ll isolate it to a service.
We can generate our content service with the CLI, exactly like we did with our page component. We’ll make a shared directory, then a services subfolder, before generating our service using ng g.
mkdir src/app/shared
mkdir src/app/shared/services
ng g service shared/services/content
The CLI, unlike components, does not add services to our Angular module automatically, therefore we must manually add it to the providers array of our metadata.
import { ContentService } from ‘./shared/services/content.service’;
@NgModule({
declarations: […],
imports: […],
providers: [ContentService],
bootstrap: [AppComponent]
})
In the first part of this series, we covered a lot of territories, but let’s take a look back at what we’ve accomplished:
@angular/cli was used to create a new project for us.
NPM was used to install @angular/material and @angular/animations.
Our Angular module now includes @angular/material and @angular/animations.
To represent the pages on our site, we designed a page component.
To store the content for our site, we constructed a ContentService.
For more info; visit baabtra.com
Enquire now !!👇
https://bit.ly/3Igg4Z5
.
Follow us on:
Facebook: https://lnkd.in/gezVM78A
Instagram: https://lnkd.in/gWMMtQMe
LinkedIn: https://lnkd.in/gqZFN9rR
Twitter: https://lnkd.in/g_Dd5tKk