آموزش مثال هایی انگولار ۴
آموزش مثال هایی انگولار ۴
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مثال هایی انگولار ۴ خواهیم پرداخت.
برای شروع، ما یک مثال ایجاد کرده‌ایم که فرم ورود به سیستم را با نام کاربری و رمز عبور نشان می‌دهد. با وارد کردن مقادیر صحیح ، داخل آن وارد می شود و فرم دیگری را نشان می دهد که در آن ، می توانید مشخصات مشتری را وارد کنید. علاوه بر این، ما چهار مؤلفه ایجاد کرده ایم – هدر، پاورقی، ورود به سیستم کاربر و صفحه اصلی.
کامپوننت ها با استفاده از دستور زیر ایجاد می شوند
ng g component header
C:\ngexamples\aexamples>ng g component header installing component create src\app\header\header.component.css create src\app\header\header.component.html create src\app\header\header.component.spec.ts create src\app\header\header.component.ts update src\app\app.module.ts
ng g component footer
C:\ngexamples\aexamples>ng g component footer installing component create src\app\footer\footer.component.css create src\app\footer\footer.component.html create src\app\footer\footer.component.spec.ts create src\app\footer\footer.component.ts update src\app\app.module.ts
ng g component userlogin
C:\ngexamples\aexamples>ng g component userlogin installing component create src\app\userlogin\userlogin.component.css create src\app\userlogin\userlogin.component.html create src\app\userlogin\userlogin.component.spec.ts create src\app\userlogin\userlogin.component.ts update src\app\app.module.ts
ng g component mainpage
C:\ngexamples\aexamples>ng g component mainpage installing component create src\app\mainpage\mainpage.component.css create src\app\mainpage\mainpage.component.html create src\app\mainpage\mainpage.component.spec.ts create src\app\mainpage\mainpage.component.ts update src\app\app.module.ts
در app.module.ts، ماژول والد دارای تمام مؤلفه‌هایی است که هنگام ایجاد اضافه می‌شوند. فایل به شکل زیر است –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes} froms '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';
import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';
const appRoutes: Routes = [
{
path: '',
component: UserloginComponent
},
{
path: 'app-mainpage',
component: MainpageComponent
}
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
UserloginComponent,
MainpageComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot(appRoutes),
BrowserAnimationsModule,
HttpModule,
MdTableModule,
MdInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
اجزای ایجاد شده در بالا اضافه می شوند –
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';
مؤلفه ها نیز در اعلان ها اضافه می شوند –
declarations: [ AppComponent, HeaderComponent, FooterComponent, UserloginComponent, MainpageComponent ],
در app.component.html والد، ساختار اصلی فایل را اضافه کرده ایم که توسط کاربر دیده می شود.
<div class="mainpage"> <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> </div>
ما یک div ایجاد کرده‌ایم و <app-header></app-header>، <router-outlet></router-outlet> و <app-footer></app-footer> را اضافه کرده‌ایم.
<router-outlet></router-outlet> برای پیمایش بین یک صفحه به صفحه دیگر استفاده می شود. در اینجا ، صفحات به شکل ورود به سیستم هستند و پس از موفقیت آمیز ، به صفحه اصلی ، یعنی فرم مشتری ، هدایت می شوند.
برای بدست آوردن فرم ورود ابتدا و بعداً دریافت mainpage.component.html ، تغییرات در app.module.ts مطابق شکل زیر انجام می شود-
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MdTableModule} from '@angular/material';
import {HttpModule} from "@angular/http";
import {MdInputModule} from '@angular/material';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { UserloginComponent } from './userlogin/userlogin.component';
import { MainpageComponent } from './mainpage/mainpage.component';
const appRoutes: Routes = [
{
path: '',
component: UserloginComponent
},
{
path: 'app-mainpage',
component: MainpageComponent
}
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
UserloginComponent,
MainpageComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot(appRoutes),
BrowserAnimationsModule,
HttpModule,
MdTableModule,
MdInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ما RouterModule و Routes را از @anuglar/router وارد کرده‌ایم. در واردات، RouterModules appRoutes را به عنوان پارامتری می گیرد که در بالا به صورت – تعریف شده است.
const appRoutes: Routes = [
{
path: '',
component: UserloginComponent
},
{
path: 'app-mainpage',
component: MainpageComponent
}
];
Route ها آرایه کامپوننت ها را می گیرند و به طور پیش فرض userloginComponent فراخوانی می شود.
در userlogin.component.ts، ما روتر را وارد کرده و بر اساس شرایطی که در زیر نشان داده شده است، به mainpage.component.html پیمایش کرده ایم.
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';
@Component({
selector: 'app-userlogin',
templateUrl: './userlogin.component.html',
styleUrls: ['./userlogin.component.css']
})
export class UserloginComponent implements OnInit {
formdata;
constructor(private router: Router) { }
ngOnInit() {
this.formdata = new FormGroup({
uname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(6)
])),
passwd: new FormControl("", this.passwordvalidation)
});
}
passwordvalidation(formcontrol) {
if (formcontrol.value.length < 5) {
return {"passwd" : true};
}
}
onClickSubmit(data) {
console.log(data.uname);
if (data.uname=="systemadmin" && data.passwd=="admin123") {
alert("Login Successful");
this.router.navigate(['app-mainpage'])
} else {
alert("Invalid Login");
return false;
}
}
}
اجازه دهید اکنون جزئیات هر یک از فایل های مؤلفه را نمایش دهیم. برای شروع، ابتدا جزء هدر را می گیریم. برای مؤلفه جدید، چهار فایل header.component.ts، header.component.html، header.component.css و header.component.spec.ts ایجاد می شود.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';}
اجازه دهید اکنون جزئیات هر یک از فایل های مؤلفه را نمایش دهیم. برای شروع، ابتدا جزء هدر را می گیریم. برای مؤلفه جدید، چهار فایل header.component.ts، header.component.html، header.component.css و header.component.spec.ts ایجاد می شود.
header.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
header.component.html
<div> <hr /> </div>
ما هیچ css اضافه نکرده ایم. با این کار فایل header.component.css خالی می شود. همچنین ، فایل header.compoent.spec.ts خالی است زیرا موارد آزمایش در اینجا در نظر گرفته نشده است.
برای هدر یک خط افقی می کشیم. یک لوگو یا هر جزئیات دیگری را می توان اضافه کرد تا هدر خلاقانه تر به نظر برسد.
اجازه دهید اکنون ایجاد یک جزء فوتر را در نظر بگیریم.
برای جزء پاورقی ، فایل های footer.component.ts ، footer.component.html ، footer.component.spec.ts و footer.component.css ایجاد می شوند.
footer.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
footer.component.html
<hr/>
از آنجایی که هیچ css اضافه نکرده ایم، فایل footer.component.css خالی است. همچنین، فایل footer.compoent.spec.ts خالی است زیرا موارد تست در اینجا در نظر گرفته نشده است.
برای فوتر، همانطور که در فایل html نشان داده شده است، فقط یک خط افقی می کشیم.
اکنون اجازه دهید ببینیم که چگونه مؤلفه userlogin کار می کند. فایل های زیر برای مؤلفه userlogin ایجاد شده عبارتند از: userlogin.component.css، userlogin.component.html، userlogin.component.ts، و userlogin.component.spec.ts.
جزئیات فایل ها به شرح زیر است –
userlogin.component.html
<div class="form_container">
<form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<header>Login</header>
<label>Username <span>*</span></label>
<input type="text" name="uname" formControlName="uname"/>
<div class="help">At least 6 character</div>
<label>Password <span>*</span></label>
<input type="password" class="fortextbox" name="passwd" formControlName="passwd"/>
<div class="help">Use upper and lowercase lettes as well</div>
<button [disabled]="!formdata.valid" value="Login">Login</button>
</form>
</div>
در اینجا فرمی با دو کنترل ورودی Username و Password ایجاد کرده ایم. این یک رویکرد فرم مبتنی بر مدل است.
ما نام کاربری و رمز عبور را اجباری می دانیم ، بنابراین اعتبار آن در ts اضافه می شود. با کلیک روی دکمه ارسال ، کنترل به onClickSubmit منتقل می شود که در فایل ts تعریف شده است.
userlogin.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';
@Component({
selector: 'app-userlogin',
templateUrl: './userlogin.component.html',
styleUrls: ['./userlogin.component.css']
})
export class UserloginComponent implements OnInit {
formdata;
constructor(private router: Router) { }
ngOnInit() {
this.formdata = new FormGroup({
uname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(6)
])),
passwd: new FormControl("", this.passwordvalidation)
});
}
passwordvalidation(formcontrol) {
if (formcontrol.value.length < 5) {
return {"passwd" : true};
}
}
onClickSubmit(data) {
console.log(data.uname);
if (data.uname == "systemadmin" && data.passwd == "admin123") {
alert("Login Successful");
this.router.navigate(['app-mainpage'])
}
}
}
برای کنترل فرم و اعتبارسنجی، ماژول ها مطابق شکل زیر وارد می شوند
import { FormGroup, FormControl, Validators} from '@angular/forms';
هنگامی که کاربر و رمز عبور صحیح هستند، به یک روتر نیاز داریم تا به مؤلفه دیگری برویم. برای این کار ، روتر مطابق شکل زیر وارد می شود –
import { Router} from '@angular/router';
در ngOnInit، اعتبارسنجی فرم انجام می شود. ما نیاز داریم که نام کاربری بیش از شش کاراکتر باشد و فیلد اجباری است. همین شرط در مورد رمز عبور نیز صدق می کند.
با کلیک بر روی ارسال، می توانیم بررسی کنیم که آیا نام کاربری systemadmin و رمز عبور admin123 است یا خیر. اگر بله، یک کادر محاوره ای ظاهر می شود که ورود موفقیت آمیز را نشان می دهد و روتر به صفحه اصلی برنامه، که انتخابگر جزء صفحه اصلی است، هدایت می شود.
css برای فرم در فایل userlogin.component.css اضافه شده است –
.form_container{
margin : 0 auto;
width:600px;
}
form {
background: white;
width: 500px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
font-family: lato;
position: relative;
color: #333;
border-radius: 10px;
}
form header {
background: #FF3838;
padding: 30px 20px;
color: white;
font-size: 1.2em;
font-weight: 600;
border-radius: 10px 10px 0 0;
}
form label {
margin-left: 20px;
display: inline-block;
margin-top: 30px;
margin-bottom: 5px;
position: relative;
}
form label span {
color: #FF3838;
font-size: 2em;
position: absolute;
left: 2.3em;
top: -10px;
}
form input {
display: block;
width: 50%;
margin-left: 20px;
padding: 5px 20px;
font-size: 1em;
border-radius: 3px;
outline: none;
border: 1px solid #ccc;
}
form .help {
margin-left: 20px;
font-size: 0.8em;
color: #777;
}
form button {
position: relative;
margin-top: 30px;
margin-bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
font-family: inherit;
color: white;
background: #FF3838;
outline: none;
border: none;
padding: 5px 15px;
font-size: 1.3em;
font-weight: 400;
border-radius: 3px;
box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
cursor: pointer;
transition: all 0.15s ease-in-out;
}
form button:hover {
background: #ff5252;
}
فایل userlogin.component.spec.ts خالی است زیرا در حال حاضر هیچ مورد آزمایشی وجود ندارد.
حال اجازه دهید در مورد نحوه عملکرد کامپوننت صفحه اصلی بحث کنیم. فایل های ایجاد شده برای کامپوننت صفحه اصلی عبارتند از mainpage.component.ts، mainpage.component.html، mainpage.component.css و mainpage.component.spect.ts.
mainpage.component.ts
import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';
@Component({
selector: 'app-mainpage',
templateUrl: './mainpage.component.html',
styleUrls: ['./mainpage.component.css']
})
export class MainpageComponent implements OnInit {
formdata;
cutomerdata;
constructor(private http: Http) { }
stateCtrl: FormControl;
ngOnInit() {
this.formdata = new FormGroup({
fname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(3)
])),
lname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(3)
])),
address:new FormControl(""),
phoneno:new FormControl("")
});
}
onClickSubmit(data) {
document.getElementById("custtable").style.display="";
this.cutomerdata = [];
for (var prop in data) {
this.cutomerdata.push(data[prop]);
}
console.log(this.cutomerdata);
}
}
ما یک فرم مشتری با نام، نام خانوادگی، آدرس و شماره تلفن ایجاد کرده ایم. اعتبار سنجی همان با تابع ngOnInit انجام می شود. با کلیک بر روی ارسال، کنترل به تابع onClickSubmit می آید. در اینجا ، جدولی که برای نمایش جزئیات وارد شده استفاده می شود قابل مشاهده است.
داده های مشتری از json به آرایه تبدیل می شود تا بتوانیم همان را در ngFor روی جدول استفاده کنیم که در فایل html مطابق شکل زیر انجام می شود.
mainpage.component.html
<div class="form_container">
<form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<header>Customer Details</header>
<label>FirstName <span>*</span></label>
<input type="text" name="fname" formControlName="fname"/>
<label>LastName <span>*</span></label>
<input type="text" name="lname" formControlName="lname"/>
<label>Address <span></span></label>
<input type="text" name="address" formControlName="address"/>
<label>Phone No <span></span></label>
<input type="text" name="phoneno" formControlName="phoneno"/>
<button [disabled]="!formdata.valid" value="Submit">Submit</button>
</form>
</div>
<br/>
<div id="custtable" style="display:none;margin:0 auto;">
<table>
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Address</td>
<td>Phone No</td>
</tr>
<tr>
<td *ngFor="let data of cutomerdata">
<h5>{{data}}</h5>
</td>
</tr>
</table>
</div>
در اینجا، div اول دارای مشخصات مشتری و دیو دوم دارای جدول است که جزئیات وارد شده را نشان می دهد. صفحه userlogin و مشخصات مشتری به شرح زیر است. این صفحه با فرم ورود و هدر و پاورقی است.
هنگامی که جزئیات را وارد می کنید، نمایشگر مانند تصویر زیر است
با کلیک روی ارسال ، یک کادر محاوره ای ظاهر می شود که ورود موفقیت آمیز را نشان می دهد.
اگر جزئیات نامعتبر باشد، یک کادر محاوره ای ظاهر می شود که ورود نامعتبر را مطابق شکل زیر نشان می دهد –
در صورت موفقیت آمیز بودن ورود، به شکل بعدی جزئیات مشتری مطابق شکل زیر ادامه می یابد –
هنگامی که جزئیات وارد و ارسال شد، یک کادر محاوره ای ظاهر می شود که نشان می دهد جزئیات مشتری همانطور که در تصویر زیر نشان داده شده است اضافه شده است.
وقتی روی OK در تصویر بالا کلیک می کنیم، جزئیات همانطور که در تصویر زیر نشان داده شده است ظاهر می شود
لیست جلسات قبل آموزش انگولار ۴
- آموزش انگولار ۴
- بررسی اجمالی انگولار ۴
- آموزش تنظیمات محیط انگولار ۴
- آموزش راه اندازی پروژه در انگولار ۴
- آموزش کامپوننت ها در انگولار ۴
- آموزش ماژول در انگولار ۴
- آموزش اتصال داده ها در انگولار ۴
- آموزش اتصال رویداد در انگولار ۴
- آموزش الگوها در انگولار ۴
- آموزش دستورالعمل ها در انگولار ۴
- آموزش پایپ ها در انگولار ۴
- آموزش مسیریابی در انگولار ۴
- آموزش سرویس ها در انگولار ۴
- آموزش سرویس Http در انگولار ۴
- آموزش فرم ها در انگولار ۴
- آموزش انیمیشن ها در انگولار ۴
- آموزش متریال ها در انگولار ۴
- آموزش CLI در انگولار ۴
.svg)
دیدگاه شما