Angular Sample Application – Part 3 – The End

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a sample application in Angular. That will be a good starter in your Angular learning. ūüôā

I hope you have read the Part – 1 of this tutorial, if not then do not worry, read it here¬†Angular Sample Application ‚Äď Part 1

I hope you have read the Part – 2 of this tutorial, if not then do not worry, read it here¬†Angular Sample Application ‚Äď Part 2

So, let’s start.

Routing is a very important part of Angular. Routing will create a fancy url and you can attach the component to that URL.

To add routing execute following command in terminal.

ng generate module approuting flat module=app

--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.

Now we will make a change in this file.

We will create route for HomeComponent.

Create one route variable of type Routes.

const routes: Routes = [
¬†¬†{¬†path:¬†”,¬†component:¬†HomeComponent,¬†pathMatch:¬†‘full’¬†},
];

Also Please change the following code of NgModule.

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

You need to include HomeComponent, So please add the following line at the top.

import¬†{¬†HomeComponent¬†}¬†from¬†‘./components/home/home.component’;

Now your file will look like this:


We have completed the routing declaration part.

We need to add router-outlet to load dynamically components in an Application.

app-component.html is the main component of the application. We will add router-outlet in app-component.html.

So please add following line in app-component.html

<router-outlet></router-outlet>

We will add header and footer components in app-component.html to load the header and footer in all components.

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Now open http://localhost:4000 in the browser.
You will see the following output.

Cheers! You have successfully learn How to create an Angular Sample Application. ūüôā


You can also download this demo from Github: https://github.com/jaydippanchal776/angular-sample-project

Angular Sample Application – Part 2

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a component in Angular. That will be a good starter in your Angular learning. ūüôā

I hope you have read the Part – 1 of this tutorial, if not then do not worry, read it here¬†Angular Sample Application ‚Äď Part 1

So, let’s start.

To create a component in Angular you need to use the following command.

ng generate component component-name-with-path

You can also use the following short command.

ng g c  component-name-with-path

We will create the following three components and learn

  1. header
  2. home
  3. footer

So execute the following three commands.

  1. For header: ng g c components/header
  2. For home: ng g c components/home
  3. For footer: ng g c components/footer

This command will create a component in the components folder.

Now, we will learn how to do routing in Angular.

Click here to read –¬†Angular Sample Application – Part 3

Angular Sample Application – Part 1

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a sample application in Angular. That will be a starter in your Angular learning. ūüôā

So, let’s start.

To run Angular application, you need the latest or any stable version of Node.js in your development machine. Also, you need a npm package manager.

What is Node.js?

Node.js¬ģ is a JavaScript runtime built on¬†Chrome’s V8 JavaScript engine.

What is npm?

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js

So if you don’t have installed Node.js you can get it from here:¬†https://nodejs.org/

Now, you have Node.js. Next thing you need to install Angular CLI, that will help you to create an Angular project, libraries and also will help you to build and deploy your projects.

You need to install Angular CLI globally. To do this open your console or terminal and write the following command.

npm install -g @angular/cli

Where,

npm: stands for the npm package manager

install: which is action to do by npm

-g: action will take globally

@angular/cli: is a package name

Now we will create a new application using Angular CLI.

Open the console or terminal and write one command.

ng new sampleapp

It will create a new folder sampleapp and it will contain your sample application.

Now, type cd sampleapp. It will open sampleapp folder.

To run the Angular application you need to run the following command.

ng serve

The angular application will run on the browser with http://localhost:4000

Now, let’s learn how to create a component in the Angular.

Click here to read – Angular Sample Application – Part 2.