CODE VN

CODE VN

1634833548

Cách sử dụng Cookie trong Angular để lưu trữ thông tin đăng nhập

Bằng cách sử dụng cookie, chúng tôi sẽ lưu trữ dữ liệu đăng nhập của người dùng, nếu thông tin đăng nhập của người dùng hợp lệ, thì thông tin đó sẽ được dẫn đến trang Bảng điều khiển.

Trong bài đăng này, tôi sẽ giải thích về Angular cookie. Vậy cookie là gì? Cookie giống như một gói thông tin nhỏ được trình duyệt của người dùng lưu trữ. Cookie vẫn tồn tại trên nhiều yêu cầu và phiên trình duyệt cần được thiết lập để chúng có thể là một phương pháp tuyệt vời để xác thực trong các ứng dụng web. Đôi khi chúng tôi sẽ có một số câu hỏi về cái nào sẽ được sử dụng - bộ nhớ cục bộ hay cookie? Trước đó, tôi muốn nói rằng cookie và bộ nhớ cục bộ phục vụ các mục đích khác nhau.

Bộ nhớ cục bộ có thể được đọc ở phía máy khách, trong khi các cookie đang được đọc ở phía máy chủ. Sự khác biệt lớn nhất là kích thước dữ liệu sắp lưu trữ, bộ lưu trữ cục bộ sẽ cung cấp nhiều không gian hơn để lưu trữ, trong khi cookie bị giới hạn bởi kích thước lưu trữ.

Như tôi đã nói ở trên, cookie được sử dụng ở phía máy chủ trong khi bộ nhớ cục bộ được sử dụng ở phía máy khách. Bộ nhớ cục bộ là một cách lưu trữ dữ liệu trong PC của khách hàng, bằng cách lưu cặp khóa / giá trị trong trình duyệt web mà không có ngày hết hạn. Chúng ta sẽ thảo luận về việc sử dụng bộ nhớ cục bộ trong bài viết tiếp theo, vì vậy chúng ta sẽ đi đến vấn đề, như tôi đã nói cookie là một loại tệp nhỏ được lưu trữ trên trình duyệt của người dùng.

Cookie là một bảng nhỏ sẽ chứa các giá trị khóa và dữ liệu, do đó, bằng cách sử dụng cookie này, nó sẽ rất hữu ích để chuyển thông tin từ phiên này sang phiên khác. Một khi chúng tôi sắp lưu trữ dữ liệu trên máy chủ mà không sử dụng cookie thì sẽ rất khó để lấy thông tin của một người dùng cụ thể mà không cần đăng nhập trên mỗi lần truy cập vào trang web đó.

Cho đến nay, chúng ta đã thấy tổng quan về cookie và cách sử dụng cookie. Bây giờ trong bài viết này, tôi sẽ giải thích về việc lưu trữ tên người dùng và mật khẩu của người dùng tĩnh trong bảng cookie. Vì vậy, tôi đã tạo hai thành phần, cụ thể là thành phần đăng nhập và thành phần bảng điều khiển, đồng thời tôi đã đặt tên người dùng và mật khẩu tĩnh trong tệp authservice.ts.

Vì vậy, khi người dùng đăng nhập vào biểu mẫu đăng nhập bằng cách cung cấp thông tin đăng nhập của người dùng, authservice sẽ kiểm tra thông tin đầu vào và chuyển hướng người dùng đến trang tổng quan nếu thông tin đăng nhập của người dùng hợp lệ. Nếu thông tin đăng nhập của người dùng không hợp lệ, nó sẽ cảnh báo bằng cách nhập email hoặc mật khẩu hợp lệ. Và nếu trang bảng điều khiển đang được truy cập bằng cách sử dụng trái phép, trang sẽ tự động được chuyển hướng đến trang đăng nhập.

Cài Đặt

Để sử dụng cookie trong Angular, chúng ta cần cài đặt thư viện cookie Angular bằng cách sử dụng trình quản lý gói npm sau.

npm cài đặt ngx-cookie-service –save

Sau khi cài đặt trình quản lý gói, chúng tôi cần nhập dịch vụ cookie vào bên trong các mô-đun của chúng tôi.

Tôi đã sử dụng giao diện người dùng thư viện ng zorro để thiết kế biểu mẫu và bạn có thể tìm thêm thông tin về ng zorro từ liên kết sau . Bước tiếp theo là thiết kế một biểu mẫu đăng nhập. Vì vậy, hãy mở tệp login.component.html và thay thế mã sau.

<form fxFill #Login="ngForm" (ngSubmit)="onsubmit()">  
    <div nz-row>  
        <div nz-col nzMd="12" nzXs="24">  
            <hr />  
            <nz-form-item>  
                <nz-input-group>  
                    <div nz-col nzMd="11" nzXs="8">  
                        <nz-input-group nzPrefixIcon="user">  
                            <input type="text" nz-input name="Login_name" placeholder="User Name" id="userName"  
 
#userName="ngModel" [(ngModel)]="Obj.username">  
                            </nz-input-group>  
                            <div *ngIf="Login.submitted && userName.errors" style="color: red">  
                                <div *ngIf="userName.hasError('required')">  
  
Login ID is required  
  
</div>  
                            </div>  
                        </div>  
                    </nz-input-group>  
                </nz-form-item>  
                <nz-form-item>  
                    <div nz-col nzMd="11" nzXs="8">  
                        <nz-input-group nzPrefixIcon="lock">  
                            <input type="password" nz-input name="user_password" placeholder="Password"  
  
id="password" #password="ngModel" [(ngModel)]="Obj.password">  
                            </nz-input-group>  
                            <div *ngIf="Login.submitted && password.errors" style="color: red">  
                                <div *ngIf="password.hasError('required')">  
  
Password is required  
  
</div>  
                            </div>  
                        </div>  
                    </nz-form-item>  
                    <div class="button">  
                        <button nz-button nzType="primary">  
  
submit  
  
</button>  
                    </div>  
                </div>  
            </div>  
        </form>  

Bây giờ hãy mở tệp login.component.ts và thay thế mã sau vào đó.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    FormGroup  
} from '@angular/forms';  
import {  
    AuthService,  
    User  
} from '../services/authservice.service';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Component({  
    selector: 'nz-demo-card-simple',  
    templateUrl: './login.component.html'  
})  
export class LoginComponent implements OnInit {  
    Obj: User;  
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {  
        this.Obj = new User();  
    }  
    ngOnInit(): void {}  
    onsubmit(): void {  
        this.cookieService.set('username', this.Obj.username);  
        this.cookieService.set('password', this.Obj.password);  
        console.log(this.cookieService.get('username'));  
        console.log(this.cookieService.get('password'));  
        const a = this.Obj;  
        if (this.srvLogin.checkLogValues(this.Obj)) {  
            this.srvLogin.isloggedin = true;  
            console.log(this.srvLogin.isloggedin);  
            this.router.navigate(['/dashboard']);  
        }  
    }  
}  

Điểm tiếp theo là tạo một dịch vụ xác thực, chúng ta có thể tạo một tệp dịch vụ bằng cách sử dụng cú pháp.

tạo dịch vụ AuthService

Tên dịch vụ mà tôi đã cung cấp là Authservice và dịch vụ sẽ được tạo và tôi đã cung cấp tên người dùng và mật khẩu tĩnh mặc định trong tệp dịch vụ để quá trình xác thực sẽ được thực thi và được chuyển hướng đến một trang khác (trang bảng điều khiển) nếu thông tin đăng nhập của người dùng đang được có giá trị. Mở tệp Authservice service.ts và thay thế mã sau và nhập nó vào cả dịch vụ và cũng như trong tệp app-module.ts.

import {  
    Injectable  
} from '@angular/core';  
import {  
    HttpClient  
} from '@angular/common/http';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Injectable({  
    providedIn: 'root'  
})  
export class AuthService {  
    private username = 'vidya';  
    private password = '123456';  
    isloggedin = false;  
    constructor(private http: HttpClient) {}  
    checkLogValues(value: User): boolean {  
        if (this.username === value.username && this.password === value.password) {  
            console.log(this.username);  
            console.log(this.password);  
            // alert('Login valid');  
            return true;  
        } else {  
            alert('please enter valid data');  
            return false;  
        }  
    }  
}  
export class User {  
    username: string;  
    password: string;  
}  

Sau đó, tạo một thành phần có tên là dashboard và mở tệp dashboard.component.html và thay thế mã sau.

<h3>Hello {{userDisplayName}} you are in Dashboard </h3>  
<div style="text-align:right">  
   <button nz-button nzType="danger" (click)="logout()">Logout</button>  
</div>  

Bước tiếp theo là mở tệp dashboard.component.ts và thay thế mã sau bên trong nó.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    AuthService,  
    User  
} from '../services/authservice.service';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Component({  
    selector: 'dashboard',  
    templateUrl: './dashboard.component.html'  
})  
export class DashboardComponent implements OnInit {  
    Obj: User;  
    [x: string]: any;  
    userDisplayName = '';  
    password = '';  
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {  
        this.Obj = new User();  
        this.userDisplayName = this.cookieService.get('username');  
        this.password = this.cookieService.get('password');  
        this.Obj.username = this.userDisplayName;  
        this.Obj.password = this.password;  
        if (!srvLogin.checkLogValues(this.Obj)) {  
            router.navigate(['/login']);  
        }  
    }  
    ngOnInit(): void {}  
    logout(): void {  
        this.router.navigate(['/login']);  
        this.cookieService.deleteAll();  
    }  
}  

Đây là tiêu đề hình ảnh

Đây là tiêu đề hình ảnh

Bước tiếp theo sau đây là đăng nhập vào trang tổng quan bằng cách cung cấp thông tin đăng nhập của người dùng và sau khi đăng nhập hợp lệ, chúng tôi có thể thấy tên người dùng trong trang tổng quan dưới dạng ghi chú chào mừng bằng cách sử dụng tên đăng nhập của người dùng. Vì vậy, sau khi vào trang bảng điều khiển, hãy mở công cụ của nhà phát triển trong trình duyệt và điều hướng -> Ứng dụng và chọn cookie từ bộ nhớ. Vì vậy, trên đó, chúng ta có thể thấy tên người dùng và mật khẩu đã được lưu trữ trong bảng cookie.

Đây là tiêu đề hình ảnh

Đây là tiêu đề hình ảnh

Cho đến nay chúng ta đã thấy về việc lưu trữ thông tin chi tiết của người dùng trong bảng cookie và bây giờ chúng ta có thể xem tổng quan về việc xóa cookie trong bảng cookie; để sử dụng phương thức deleteall () để xóa bảng cookie nếu người dùng sắp nhấp vào nút-> đăng xuất.

Phần kết luận

Trong bài đăng này, chúng ta đã biết về việc sử dụng cookie trong Angular để lưu trữ thông tin đăng nhập của người dùng. Tôi hy vọng bài viết này sẽ hữu ích cho bạn.

What is GEEK

Buddha Community

CODE VN

CODE VN

1634833548

Cách sử dụng Cookie trong Angular để lưu trữ thông tin đăng nhập

Bằng cách sử dụng cookie, chúng tôi sẽ lưu trữ dữ liệu đăng nhập của người dùng, nếu thông tin đăng nhập của người dùng hợp lệ, thì thông tin đó sẽ được dẫn đến trang Bảng điều khiển.

Trong bài đăng này, tôi sẽ giải thích về Angular cookie. Vậy cookie là gì? Cookie giống như một gói thông tin nhỏ được trình duyệt của người dùng lưu trữ. Cookie vẫn tồn tại trên nhiều yêu cầu và phiên trình duyệt cần được thiết lập để chúng có thể là một phương pháp tuyệt vời để xác thực trong các ứng dụng web. Đôi khi chúng tôi sẽ có một số câu hỏi về cái nào sẽ được sử dụng - bộ nhớ cục bộ hay cookie? Trước đó, tôi muốn nói rằng cookie và bộ nhớ cục bộ phục vụ các mục đích khác nhau.

Bộ nhớ cục bộ có thể được đọc ở phía máy khách, trong khi các cookie đang được đọc ở phía máy chủ. Sự khác biệt lớn nhất là kích thước dữ liệu sắp lưu trữ, bộ lưu trữ cục bộ sẽ cung cấp nhiều không gian hơn để lưu trữ, trong khi cookie bị giới hạn bởi kích thước lưu trữ.

Như tôi đã nói ở trên, cookie được sử dụng ở phía máy chủ trong khi bộ nhớ cục bộ được sử dụng ở phía máy khách. Bộ nhớ cục bộ là một cách lưu trữ dữ liệu trong PC của khách hàng, bằng cách lưu cặp khóa / giá trị trong trình duyệt web mà không có ngày hết hạn. Chúng ta sẽ thảo luận về việc sử dụng bộ nhớ cục bộ trong bài viết tiếp theo, vì vậy chúng ta sẽ đi đến vấn đề, như tôi đã nói cookie là một loại tệp nhỏ được lưu trữ trên trình duyệt của người dùng.

Cookie là một bảng nhỏ sẽ chứa các giá trị khóa và dữ liệu, do đó, bằng cách sử dụng cookie này, nó sẽ rất hữu ích để chuyển thông tin từ phiên này sang phiên khác. Một khi chúng tôi sắp lưu trữ dữ liệu trên máy chủ mà không sử dụng cookie thì sẽ rất khó để lấy thông tin của một người dùng cụ thể mà không cần đăng nhập trên mỗi lần truy cập vào trang web đó.

Cho đến nay, chúng ta đã thấy tổng quan về cookie và cách sử dụng cookie. Bây giờ trong bài viết này, tôi sẽ giải thích về việc lưu trữ tên người dùng và mật khẩu của người dùng tĩnh trong bảng cookie. Vì vậy, tôi đã tạo hai thành phần, cụ thể là thành phần đăng nhập và thành phần bảng điều khiển, đồng thời tôi đã đặt tên người dùng và mật khẩu tĩnh trong tệp authservice.ts.

Vì vậy, khi người dùng đăng nhập vào biểu mẫu đăng nhập bằng cách cung cấp thông tin đăng nhập của người dùng, authservice sẽ kiểm tra thông tin đầu vào và chuyển hướng người dùng đến trang tổng quan nếu thông tin đăng nhập của người dùng hợp lệ. Nếu thông tin đăng nhập của người dùng không hợp lệ, nó sẽ cảnh báo bằng cách nhập email hoặc mật khẩu hợp lệ. Và nếu trang bảng điều khiển đang được truy cập bằng cách sử dụng trái phép, trang sẽ tự động được chuyển hướng đến trang đăng nhập.

Cài Đặt

Để sử dụng cookie trong Angular, chúng ta cần cài đặt thư viện cookie Angular bằng cách sử dụng trình quản lý gói npm sau.

npm cài đặt ngx-cookie-service –save

Sau khi cài đặt trình quản lý gói, chúng tôi cần nhập dịch vụ cookie vào bên trong các mô-đun của chúng tôi.

Tôi đã sử dụng giao diện người dùng thư viện ng zorro để thiết kế biểu mẫu và bạn có thể tìm thêm thông tin về ng zorro từ liên kết sau . Bước tiếp theo là thiết kế một biểu mẫu đăng nhập. Vì vậy, hãy mở tệp login.component.html và thay thế mã sau.

<form fxFill #Login="ngForm" (ngSubmit)="onsubmit()">  
    <div nz-row>  
        <div nz-col nzMd="12" nzXs="24">  
            <hr />  
            <nz-form-item>  
                <nz-input-group>  
                    <div nz-col nzMd="11" nzXs="8">  
                        <nz-input-group nzPrefixIcon="user">  
                            <input type="text" nz-input name="Login_name" placeholder="User Name" id="userName"  
 
#userName="ngModel" [(ngModel)]="Obj.username">  
                            </nz-input-group>  
                            <div *ngIf="Login.submitted && userName.errors" style="color: red">  
                                <div *ngIf="userName.hasError('required')">  
  
Login ID is required  
  
</div>  
                            </div>  
                        </div>  
                    </nz-input-group>  
                </nz-form-item>  
                <nz-form-item>  
                    <div nz-col nzMd="11" nzXs="8">  
                        <nz-input-group nzPrefixIcon="lock">  
                            <input type="password" nz-input name="user_password" placeholder="Password"  
  
id="password" #password="ngModel" [(ngModel)]="Obj.password">  
                            </nz-input-group>  
                            <div *ngIf="Login.submitted && password.errors" style="color: red">  
                                <div *ngIf="password.hasError('required')">  
  
Password is required  
  
</div>  
                            </div>  
                        </div>  
                    </nz-form-item>  
                    <div class="button">  
                        <button nz-button nzType="primary">  
  
submit  
  
</button>  
                    </div>  
                </div>  
            </div>  
        </form>  

Bây giờ hãy mở tệp login.component.ts và thay thế mã sau vào đó.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    FormGroup  
} from '@angular/forms';  
import {  
    AuthService,  
    User  
} from '../services/authservice.service';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Component({  
    selector: 'nz-demo-card-simple',  
    templateUrl: './login.component.html'  
})  
export class LoginComponent implements OnInit {  
    Obj: User;  
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {  
        this.Obj = new User();  
    }  
    ngOnInit(): void {}  
    onsubmit(): void {  
        this.cookieService.set('username', this.Obj.username);  
        this.cookieService.set('password', this.Obj.password);  
        console.log(this.cookieService.get('username'));  
        console.log(this.cookieService.get('password'));  
        const a = this.Obj;  
        if (this.srvLogin.checkLogValues(this.Obj)) {  
            this.srvLogin.isloggedin = true;  
            console.log(this.srvLogin.isloggedin);  
            this.router.navigate(['/dashboard']);  
        }  
    }  
}  

Điểm tiếp theo là tạo một dịch vụ xác thực, chúng ta có thể tạo một tệp dịch vụ bằng cách sử dụng cú pháp.

tạo dịch vụ AuthService

Tên dịch vụ mà tôi đã cung cấp là Authservice và dịch vụ sẽ được tạo và tôi đã cung cấp tên người dùng và mật khẩu tĩnh mặc định trong tệp dịch vụ để quá trình xác thực sẽ được thực thi và được chuyển hướng đến một trang khác (trang bảng điều khiển) nếu thông tin đăng nhập của người dùng đang được có giá trị. Mở tệp Authservice service.ts và thay thế mã sau và nhập nó vào cả dịch vụ và cũng như trong tệp app-module.ts.

import {  
    Injectable  
} from '@angular/core';  
import {  
    HttpClient  
} from '@angular/common/http';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Injectable({  
    providedIn: 'root'  
})  
export class AuthService {  
    private username = 'vidya';  
    private password = '123456';  
    isloggedin = false;  
    constructor(private http: HttpClient) {}  
    checkLogValues(value: User): boolean {  
        if (this.username === value.username && this.password === value.password) {  
            console.log(this.username);  
            console.log(this.password);  
            // alert('Login valid');  
            return true;  
        } else {  
            alert('please enter valid data');  
            return false;  
        }  
    }  
}  
export class User {  
    username: string;  
    password: string;  
}  

Sau đó, tạo một thành phần có tên là dashboard và mở tệp dashboard.component.html và thay thế mã sau.

<h3>Hello {{userDisplayName}} you are in Dashboard </h3>  
<div style="text-align:right">  
   <button nz-button nzType="danger" (click)="logout()">Logout</button>  
</div>  

Bước tiếp theo là mở tệp dashboard.component.ts và thay thế mã sau bên trong nó.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    AuthService,  
    User  
} from '../services/authservice.service';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Component({  
    selector: 'dashboard',  
    templateUrl: './dashboard.component.html'  
})  
export class DashboardComponent implements OnInit {  
    Obj: User;  
    [x: string]: any;  
    userDisplayName = '';  
    password = '';  
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {  
        this.Obj = new User();  
        this.userDisplayName = this.cookieService.get('username');  
        this.password = this.cookieService.get('password');  
        this.Obj.username = this.userDisplayName;  
        this.Obj.password = this.password;  
        if (!srvLogin.checkLogValues(this.Obj)) {  
            router.navigate(['/login']);  
        }  
    }  
    ngOnInit(): void {}  
    logout(): void {  
        this.router.navigate(['/login']);  
        this.cookieService.deleteAll();  
    }  
}  

Đây là tiêu đề hình ảnh

Đây là tiêu đề hình ảnh

Bước tiếp theo sau đây là đăng nhập vào trang tổng quan bằng cách cung cấp thông tin đăng nhập của người dùng và sau khi đăng nhập hợp lệ, chúng tôi có thể thấy tên người dùng trong trang tổng quan dưới dạng ghi chú chào mừng bằng cách sử dụng tên đăng nhập của người dùng. Vì vậy, sau khi vào trang bảng điều khiển, hãy mở công cụ của nhà phát triển trong trình duyệt và điều hướng -> Ứng dụng và chọn cookie từ bộ nhớ. Vì vậy, trên đó, chúng ta có thể thấy tên người dùng và mật khẩu đã được lưu trữ trong bảng cookie.

Đây là tiêu đề hình ảnh

Đây là tiêu đề hình ảnh

Cho đến nay chúng ta đã thấy về việc lưu trữ thông tin chi tiết của người dùng trong bảng cookie và bây giờ chúng ta có thể xem tổng quan về việc xóa cookie trong bảng cookie; để sử dụng phương thức deleteall () để xóa bảng cookie nếu người dùng sắp nhấp vào nút-> đăng xuất.

Phần kết luận

Trong bài đăng này, chúng ta đã biết về việc sử dụng cookie trong Angular để lưu trữ thông tin đăng nhập của người dùng. Tôi hy vọng bài viết này sẽ hữu ích cho bạn.

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Roberta  Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular

Angular Janker

Angular Janker

1577240149

How to Use Cookies in Angular for Storing user’s Credentials

By using cookies we are going to store the user’s login data, if the user’s credentials are valid, then it will be directed to the Dashboard page.

In this post, I will be explaining about Angular cookies. So what is a cookie? Cookies are like a small package of information that is stored by the user’s browser. Cookies persist across multiple requests and browser sessions that should be set so that they can be a great method for authentication in web applications. Sometimes we will have some queries about which is to be used – either local storage or cookies? Before that, I like to say that the cookies and local storage serve different purposes.

The local storage can be read on the client-side, whereas the cookies are being read on the server-side. The biggest difference is the data size is about to store, the local storage will give more space to store, whereas the cookie is limited by the size of to store.

As I said above the cookies are used on the server-side whereas the local storage is used on the client-side. The local storage is a way of storing the data in the client’s PC, by saving the key/ value pair in a web browser with no expiration date. We will discuss about using local storage in the next article, so coming to the point, as I said the cookies are a kind of small file that are stored on the user’s browser.

The cookie is a small table which will contain key and data values so, by using this it will be very useful to carry information from one session to another session. Once we are about to store data on the server without using cookies then it will be difficult to retrieve a particular user’s information without a login on each visit to that website.

So far we have seen about the overview of a cookie and the usage of it. Now in this article, I will explain about storing the username and password of a static user in the cookie table. So, I have created two components, namely the login component and dashboard component, and I have set a static username and password in authservice.ts file.

So, when a user logs in to the login form by providing his user’s credentials the authservice checks the input and redirects the user to the dashboard if the user’s credentials are valid. If the user’s credentials are not valid it will alert by throwing enter valid email or password. And if the dashboard page is being accessed by unauthorized usage the page will be redirected to the login page automatically.

Setting up

In order to use cookies in Angular, we need to install the Angular cookie library by using the following npm package manager.

npm install ngx-cookie-service –save

After installing the package manager, we need to import the cookie service in the inside of our modules.

I have used the ng zorro library UI for form design, and you can find more information about ng zorro from the following link. The next step is to design a login form. So, open login.component.html file and replace the following code.

<form fxFill #Login="ngForm" (ngSubmit)="onsubmit()">  
    <div nz-row>  
        <div nz-col nzMd="12" nzXs="24">  
            <hr />  
            <nz-form-item>  
                <nz-input-group>  
                    <div nz-col nzMd="11" nzXs="8">  
                        <nz-input-group nzPrefixIcon="user">  
                            <input type="text" nz-input name="Login_name" placeholder="User Name" id="userName"  
 
#userName="ngModel" [(ngModel)]="Obj.username">  
                            </nz-input-group>  
                            <div *ngIf="Login.submitted && userName.errors" style="color: red">  
                                <div *ngIf="userName.hasError('required')">  
  
Login ID is required  
  
</div>  
                            </div>  
                        </div>  
                    </nz-input-group>  
                </nz-form-item>  
                <nz-form-item>  
                    <div nz-col nzMd="11" nzXs="8">  
                        <nz-input-group nzPrefixIcon="lock">  
                            <input type="password" nz-input name="user_password" placeholder="Password"  
  
id="password" #password="ngModel" [(ngModel)]="Obj.password">  
                            </nz-input-group>  
                            <div *ngIf="Login.submitted && password.errors" style="color: red">  
                                <div *ngIf="password.hasError('required')">  
  
Password is required  
  
</div>  
                            </div>  
                        </div>  
                    </nz-form-item>  
                    <div class="button">  
                        <button nz-button nzType="primary">  
  
submit  
  
</button>  
                    </div>  
                </div>  
            </div>  
        </form>  

Now open login.component.ts file and replace the following code in it.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    FormGroup  
} from '@angular/forms';  
import {  
    AuthService,  
    User  
} from '../services/authservice.service';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Component({  
    selector: 'nz-demo-card-simple',  
    templateUrl: './login.component.html'  
})  
export class LoginComponent implements OnInit {  
    Obj: User;  
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {  
        this.Obj = new User();  
    }  
    ngOnInit(): void {}  
    onsubmit(): void {  
        this.cookieService.set('username', this.Obj.username);  
        this.cookieService.set('password', this.Obj.password);  
        console.log(this.cookieService.get('username'));  
        console.log(this.cookieService.get('password'));  
        const a = this.Obj;  
        if (this.srvLogin.checkLogValues(this.Obj)) {  
            this.srvLogin.isloggedin = true;  
            console.log(this.srvLogin.isloggedin);  
            this.router.navigate(['/dashboard']);  
        }  
    }  
}  

The next point is to create an authentication service, we can create a service file by using the syntax.

ng generate service AuthService

The service name which I have given is Authservice and the service will be created and I have provided a default static username and password in service file so that the validation will be executed and redirected to another page (dashboard page) if the user’s credentials are being valid. Open Authservice service.ts file and replace the following code and import it in both service and as well in app-module.ts file.

import {  
    Injectable  
} from '@angular/core';  
import {  
    HttpClient  
} from '@angular/common/http';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Injectable({  
    providedIn: 'root'  
})  
export class AuthService {  
    private username = 'vidya';  
    private password = '123456';  
    isloggedin = false;  
    constructor(private http: HttpClient) {}  
    checkLogValues(value: User): boolean {  
        if (this.username === value.username && this.password === value.password) {  
            console.log(this.username);  
            console.log(this.password);  
            // alert('Login valid');  
            return true;  
        } else {  
            alert('please enter valid data');  
            return false;  
        }  
    }  
}  
export class User {  
    username: string;  
    password: string;  
}  

After that create a component named as dashboard and open dashboard.component.html file and replace the following code.

<h3>Hello {{userDisplayName}} you are in Dashboard </h3>  
<div style="text-align:right">  
   <button nz-button nzType="danger" (click)="logout()">Logout</button>  
</div>  

The next step is to open dashboard.component.ts file and replace the following code inside it.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    AuthService,  
    User  
} from '../services/authservice.service';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    CookieService  
} from 'ngx-cookie-service';  
@Component({  
    selector: 'dashboard',  
    templateUrl: './dashboard.component.html'  
})  
export class DashboardComponent implements OnInit {  
    Obj: User;  
    [x: string]: any;  
    userDisplayName = '';  
    password = '';  
    constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) {  
        this.Obj = new User();  
        this.userDisplayName = this.cookieService.get('username');  
        this.password = this.cookieService.get('password');  
        this.Obj.username = this.userDisplayName;  
        this.Obj.password = this.password;  
        if (!srvLogin.checkLogValues(this.Obj)) {  
            router.navigate(['/login']);  
        }  
    }  
    ngOnInit(): void {}  
    logout(): void {  
        this.router.navigate(['/login']);  
        this.cookieService.deleteAll();  
    }  
}  

This is image title

This is image title

The following next step is to log in to the dashboard by providing the user’s credentials and after the valid login, we can see the user’s name in dashboard as a welcome note by using the user’s login name. So, after entering into the dashboard page open the developer’s tool in the browser and navigate -> Application and select cookies from storage. So, on that, we can see the user name and password have been stored in the cookie table.

This is image title

This is image title

So  far we have seen about storing the user’s details in the cookie table and now we can take an overview on clearing the cookies in the cookie table; for that use deleteall() method for clearing the cookies table if  the user is about to click-> logout button.

Conclusion

In this post, we have seen about using cookies in Angular for storing user’s credentials. I hope this article will be useful for you.

#Angular #Angular Cookies #login #angular

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial