Tag: Javascript

Angular JWT authentication (#7 of 100 projects)

This project took me really long to finish. I spent so much time trying to write a comprehensive blog post on explaining the project. But I realized my goal is to create 100 projects in using Angular framework, not to produce 100 how-to tutorials on Angular.

So this post is rather an update on what I’ve done than a guide post.

In this project, I’ve created a website with a dashboard which is password protected. JWT authentication is implemented using a backend created in Django and hosted in my c9.io instance.

In this project, I’ve created the following:

  • A password protected dashboard component
  • An authentication service to post request to backend API
  • A login component
  • An http interceptor to include JWT token in the http request

Source code: https://github.com/zkkmin/angular-jwt-login

Live demo site at https://friendly-saha-a8644a.netlify.com

username: iunicorn
password: sunandstar

Angular dharma page #5

DharmaPage

This is the number 5 of my 100 angular projects. This project is based on the previous one Angular dhamma player #4.

This project has two components; the main page and audio track player page. On the home page, four images of famous Burmese Monks are shown in card style. When the user clicked on a card, they are brought to a player with the dhamma talks of the selected monk.

Basically, I am trying to learn how to use the Angular router for navigation between different components in a single page application.

Everything went well, except for one thing. I have been spending way too much time messing around with CSS and colors instead of focusing on functionality.

So, from now on I will spend less time on design aspect and more on functional aspects for future projects.

Live project link: https://inspiring-benz-2fb43a.netlify.com

Github: https://github.com/zkkmin/dharma-page

 

Angular random quote #3

This is the third project of my ongoing challenge, 100 angular projects.

In this project, I created a web page which fetches a random quote from an API endpoint and displays it on the page.

Screen Shot Muse

I have learned a few new concepts while creating this simple web application, such as

  • using services to separate fetching data from components
  • using observable and Angular HttpClient for fetching data asynchronously and providing a way for the data to be consumed from a component
  • calling child component’s function from parent component using @ViewChild

Service, Observable and HttpClient for asynchronous API call


import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class QuoteService {
private quoteUrl = "https://talaikis.com/api/quotes/random/";
getQuote(): Observable <{}> {
return this.http.get(this.quoteUrl)
};
constructor(
private http: HttpClient
) { }
}

view raw

quote.service.ts

hosted with ❤ by GitHub

Using service to get a random quote from a component


import { Component, OnInit } from '@angular/core';
import { QuoteService } from '../quote.service';
@Component({
selector: 'app-random-quote',
templateUrl: './random-quote.component.html',
styleUrls: ['./random-quote.component.css']
})
export class RandomQuoteComponent implements OnInit {
constructor(private quoteService: QuoteService) { }
getQuote(): void {
this.quoteService.getQuote()
.subscribe(quote => {
this.quote = '"' + quote['quote'] + '"';
this.author = '~' + quote['author']
});
}
quote: string;
author: string;
ngOnInit() {
this.getQuote();
}
}

view raw

random-quote.component.ts

hosted with ❤ by GitHub

Calling child component’s function from the parent component


import { Component, ViewChild } from '@angular/core';
import { RandomQuoteComponent } from './random-quote/random-quote.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(RandomQuoteComponent)
private randomQuoteComponent: RandomQuoteComponent;
title = 'Muse';
onClickMe() {
this.randomQuoteComponent.getQuote();
}
}

view raw

app.component.ts

hosted with ❤ by GitHub

Live address: http://5b3705ca02ed8359970e2262.silly-perlman-68e0f4.netlify.com/

Git: https://github.com/zkkmin/muse

 

Hello angular with style #2

Screen Shot 2018-06-28 at 4.19.43 PM

This is the second post from the series of 100 angular projects I am doing. You can check out the first post here.

Based on the previous hello world project, I decided to have a little fun by adding CSS framework Bulma which is the new cool kid on the block. Watch out Bootstrap!

First I added the Bulma in the project using npm install:

npm install --save bulma

Second I imported the Bulma in src\styles.css:

 @import "~bulma/css/bulma.css"

Now Bulma styles are available globally. Afterward, I created two components for header and footer.

ng generate component components/header
ng g component components/footer  ## g is shorthand for generate

This will create header and footer components in src/app/components folder.

Edit the header.component.html, footer.component.html, and app.component.html for the Bulma hero layout look.

Let’s create a header with only a brand logo.


<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
</nav>

view raw

header.component.html

hosted with ❤ by GitHub

And create a footer with license information.

view raw

footer.component.html

hosted with ❤ by GitHub

Finally, add those components into the main app.component.html.


<!–The content below is only a placeholder and can be replaced.–>
<section class="hero is-info is-fullheight is-bold ">
<div class="hero-head">
<app-header></app-header>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">
{{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<h2 class="subtitle">
This is my very second Angular project.
</h2>
</div>
</div>
<div class="hero-foot">
<app-footer></app-footer>
</div>
</section>

view raw

app.component.html

hosted with ❤ by GitHub

That’s it. We are done.

This time, I used Netlify for deployment. It is very easy and it works.

Live address: https://eloquent-dijkstra-37b634.netlify.com/

Git: https://github.com/zkkmin/hello/tree/hello-bulma

 

Hello angular #1

Screen Shot 2018-06-28 at 5.58.09 AM

I used to learn a lot of programming languages for fun. When I found someone recommends a language online, I would check out the tutorials and blogs, and learn basic syntax of the language for a few days. But eventually the initial curiosity wore off and I would move on to something new and shiny.

Yes, I am one of those people who do a lot of tutorial and online courses but never create anything. I hate myself for this and decided to do something about it.

So I am starting this experiment to create 100 web applications in Angular.io. They are not necessarily going to be good apps. They may be shitty and useless. I don’t care. What I want to know is can I make this hundred times no matter what?

As a first project, I am creating a time-honored tradition of creating a hello world app. The functional specifications are as followed:

  • A web page displaying “Hello World!!”
  • Deployed on a server
  • A git repo

The official guide from the Angular website has enough information to accomplish the task. For deployment, I use firebase, which provides a super easy deployment and hosting.

So here it is, my first Angular app, live!

Live address: https://angular-hosting-project-6c5cd.firebaseapp.com/

Git: https://github.com/zkkmin/hello