“As applications grow in size, it becomes
increasingly important that they be well organized with a solid structure in
place”.
At the same time, it is
important that we keep our applications DRY and maintainable by moving logic
out of components themselves and into separate classes that can be called upon.
A modular approach such as this makes our app's business logic reusable.
One way we can achieve this
type of structure in Angular applications is by using models to organize our
business logic. Whereas the term "model" in Angular has typically
been used to refer to the View-Model. The model in an MVC-based application is
generally responsible for modeling the data used in the view and handling user
interactions such as clicking on buttons, scrolling, or causing other changes
in the view.
Angular app having View-Model
Step-1: Create a
folder Model in app and then create a student.model.ts
file as below:
export class Student
{
rollno: number;
name: string;
email: string;
mobile: number;
gender: string;
address: string;
section: string;
dateOfBirth: Date;
image: string;
}
Step-2: Create a new
component student-list component which
will be act as controller to bind the data to model in app using the below
command:
ng g c student/student-list -–flat true -–spec false
Note: here student/student-list will
create student-list component in student Folder itself using the command -–flat true and -–spec false command
will not include .spec file in the student-list component.
Step-3: Write code
for student-list.component.ts
as below:
import { Component, OnInit } from '@angular/core';
import { Student } from '../models/student.model';
@Component({
selector: 'app-student-list',
templateUrl: './student-list.component.html',
styleUrls: ['./student-list.component.css']
})
export class StudentListComponent implements OnInit {
students: Student[] = [
{
rollno: 1,
name: 'Sachin',
email: 'sachin@gmail.com',
dateOfBirth: new Date('10/25/1985'),
section: 'CS',
gender: 'male',
mobile: 1234567,
address: 'Vrindawan',
image: 'assets/images/1.png'
},
{
rollno: 2,
name: 'shalini',
gender: 'female',
email: 'salini@gmail.com',
dateOfBirth: new Date('07/15/1987'),
section: 'Mech',
mobile: 1234567,
address: 'Mathura',
image: 'assets/images/2.png'
},
{
rollno: 3,
name: 'manisha',
gender: 'female',
email: 'manisha@gmail.com',
dateOfBirth: new Date('12/15/1983'),
section: 'CS',
mobile: 1234567,
address: 'Mathura',
image: 'assets/images/3.png'
}
];
constructor() {}
ngOnInit() {}
}
Step-4: Write code
for student-list.component.html
as below:
<div class="container">
<div class="panel panel-primary" *ngFor="let student of students">
<div class="panel-heading">
<h3 class="panel-title text-center">{{ student.name }}</h3>
</div>
<div class="panel-body">
<div class="row" class="vertical-align">
<div class="col-xs-4">
<img class="rounded" [src]="student.image" />
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
RollNo
</div>
<div class="col-xs-6">: {{ student.rollno }}</div>
</div>
<div class="row">
<div class="col-xs-6">
Gender
</div>
<div class="col-xs-6">: {{ student.gender }}</div>
</div>
<div class="row">
<div class="col-xs-6">
Section
</div>
<div class="col-xs-6">: {{ student.section }}</div>
</div>
<div class="row">
<div class="col-xs-6">
Date of Birth
</div>
<div class="col-xs-6">
: {{ student.dateOfBirth | date }}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Email
</div>
<div class="col-xs-6">: {{ student.email }}</div>
</div>
<div class="row">
<div class="col-xs-6">
Mobile
</div>
<div class="col-xs-6">: {{ student.mobile }}</div>
</div>
<div class="row">
<div class="col-xs-6">
Address
</div>
<div class="col-xs-6">: {{ student.address }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code
Explanation:
1.
student.model.ts will act as a model which
provide data structure to student-list component.
2.
student-list component will then create an
array of instances of student class using
students: Student[] =[{}]
3. During this it ask to import class student.model.ts using inbuilt tool of vs-code.
4. Or import the class using the code below:
import { Student } from '../models/student.model';
5.
In student-list.component.html file we use bootstrap panel class to
display the student-list. Panel class belong to
bootstrap-3, you can also use Card
class of bootstrap-4 in place of Panel.
6.
We also create an images folder in assets folder to store
images used in this application. To add images in the folder, right click images
folder and goto “Reveal Folder in Explore”
option.
Code Output:
