Angularjs 6 User Registration and Login Authentication
Today, We want to share with you Angularjs 6 User Registration and Login Authentication.
In this post we will show you Sign Up/Log In Form Angular 6, hear for angularjs 6 Login and registration Tutorial we will give you demo and example for implement.
In this post, we will learn about Login and Registration Script with angular 6 with an example.
Angular 6 Example
Angular Latest My Previous Post With Source code Read more…..
- Angular 6 Folder Project Structure
- Angular 6 CLI Installation
- Angular 6 Module File
- Angular 6 Components
- Angular 6 Services
- Angular 6 Routing
- Angular 6 CSS
- Angular 6 Class Binding
- Angular 6 Animation
- Angular 6 Templating
- Angular 6 HTTP Client
AngularJS 6 Login and Registration Script – Part 3
Angular 6 Authentication Tutorial [Login, Logout, Register, Forgot Password & Remember Me Functionality] – Part – 3
Angular 6 Login And Registration Module
There are the available for AngularJS 6.0 Part1, Part2 and Part3 Step By step Example and source code available.
Angular 6 App Component Template
files & folders Path: /src/spp/app.component.html
<!-- main app pakainfo.com container -->
<div class="pakainfo jumbotron">
<div class="pakainfo container">
<div class="pakainfo row">
<div class="col-sm-6 offset-sm-3">
<alert></alert>
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
Angular 6 App Component
files & folders Path: /src/spp/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent { }
Angular 6 App Module
files & folders Path: /src/spp/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
// used to create fake backend
import { fakeBackendProvider } from './_helpers';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AlertComponent } from './_directives';
import { AuthGuard } from './_guards';
import { JwtInterceptor } from './_helpers';
import { AlertService, AuthenticationService, StudentService } from './_services';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
routing
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent
],
providers: [
AuthGuard,
AlertService,
AuthenticationService,
StudentService,
{
provide: HTTP_INTERCEPTORS,
useClass: JwtInterceptor,
multi: true
},
fakeBackendProvider
],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 6 App Routing
files & folders Path: /src/spp/app.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home';
import { LoginComponent } from './login';
import { RegisterComponent } from './register';
import { AuthGuard } from './_guards';
const appRoutes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
Angular 6 Main Index Html File
files & folders Path: /src/index.html
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Angular 6 Student Registration and Login Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
a { cursor: pointer }
</style>
</head>
<body>
<app>Loading...</app>
</body>
</html>
Angular 6 Main (Bootstrap) File
files & folders Path: /src/main.ts
import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Angular 6 Polyfills
files & folders Path: /src/polyfills.ts
import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone';
npm package.json
files & folders Path: /package.json
{
"name": "angular-6-registration-login-example-webpack",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/angular-6-registration-login-example-webpack.git"
},
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"license": "MIT",
"dependencies": {
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.5",
"rxjs": "^6.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@types/node": "^10.0.4",
"angular2-template-loader": "^0.6.2",
"html-webpack-plugin": "^3.2.0",
"raw-loader": "^0.5.1",
"ts-loader": "^4.3.0",
"typescript": "^2.8.3",
"webpack": "4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "3.1.4"
}
}
TypeScript tsconfig.json
files & folders Path: /tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5"
}
}
Webpack 4 Config
Path: /webpack.config.js
here Webpack 4.8 is need to project compile as well as some bundle all the web application files so it is ready to be more data loaded into a web browser Like as a Mozila, chrome, it does this some need this project with the more help of libs like as loaders and this plugins that are setting in the file name as awebpack.config.js file. For more details about here webpack describe out the webpack docs.
It is a minimal webpack.config.js for run mode binding or bundling latest version an Angular 6 web application, it compiles and run angular 6 TypeScript files using Like as ats-loader, all the data loads angular HTML DOM templates with more raw-loader, as well as some injects the run two way binding bundled custom scripts into the HTML body of the main root file like as a index.html page using the HtmlWebpackPlugin.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader'],
exclude: /node_modules/
},
{
test: /\.(html|css)$/,
loader: 'raw-loader'
},
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
],
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: true
},
devServer: {
historyApiFallback: true
}
};
Angular 6 Login And Registration Module
- Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations
- Angular 6 CRUD
- Angular 6 and ASP.NET Core 2.0 Web API
- Angular 6 features
- Angular 6 Form Validation
- Angular 6 – User Registration and Login
- Angularjs 6 User Registration and Login Authentication
- Angular 6 CLI Installation Tutorial With Example
- Angular 6 Toast Message Notifications From Scratch
We hope you get an idea about Login and Registration Script with angular 6
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.