در این مقاله با ادیتور VS Code کار میکنیم. بعد از نصب آن، از منوی Terminal، گزینه‌ی New Terminal را کلیک کنید تا پنجره‌ی PowerShell نمایش داده شود؛ برای سرعت و دقت بیشتر در برنامه‌های vue.js ای. با دستور زیر vue cli را نصب میکنیم (فقط یک مرتبه و برای برنامه‌های بعدی vue.jsای، نیازی به اجرای این دستور نداریم):
npm install -g @vue/cli
جهت راه اندازی یک برنامه‌ی پیش فرض Vue.js ای، کافیست دستور زیر را اجرا نماییم تا پکیج‌های مورد نیاز، به همراه کانفیگ اولیه (Zero config) برای ما ایجاد شوند:
vue create movie-app
بعد از ایجاد برنامه در vs code، از طریق منوی File، گزینه Open Folder را کلیک کرده و پوشه برنامه‌ای را که ایجاد کردیم، Select Folder میکنیم. ساختار اولیه‌ی برنامه‌ی ایجاد شده، به شکل زیر میباشد:
نیازمندیهای مثال جاری
A) برای گرفتن اطلاعات مورد نمایش در مثال جاری، از سایت omdbapi.com استفاده میکنیم که با دریافت یک api key آن بصورت رایگان، میتوانیم web serviceهای آن را Call نماییم.
B) از vuetify برای ui استفاده میکنیم که بصورت Material Design و دارای کامپوننت‌های غنی میباشد؛ ضمن اینکه RTL را هم پشتیبانی میکند.
برای نصب آن در Terminal دستور زیر را اجرا میکنیم:
vue add vuetify
سپس جهت تست و صحت افزوده شدن و کانفیگ درست، با دستور زیر برنامه را اجرا میکنیم:
npm run serve
بعد از اجرای دستور فوق، روی گزینه زیر ctrl+click میکنیم تا نتیجه کار در مرورگر قابل رویت باشد:
نمایش صفحه زیر نشان دهنده‌ی درستی انجام کار تا اینجا است:
نکته: جهت استفاده از امکان RTL کافیست در فایل vuetify.js واقع در پوشه‌ی plugins، تغییرات زیر را انجام دهیم. در مثال جاری بدلیل اینکه اطلاعات انگلیسی می‌باشند، از نسخه LTR آن استفاده میکنیم؛ هر چند یکسری api فارسی نیز موجود میباشد که میتوان از آنها استفاده نمود.
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'md',
rtl: true
})
C) نصب vue-router : جهت انجام routeهای تودرتو ، مپ کردن کامپوننت ها با آدرسی مشخص، کار با پارامتر و HTML5 History API مورد استفاده قرار میگیرد. برای نصب آن، دستور زیر را اجرا میکنیم:
npm install vue-router
برای نوشتن routeهای مورد نیاز، یک فولدر را با نام router، در پوشه src برنامه ایجاد میکنیم و یک فایل جاوا اسکریپتی را در آن با نام index.js، میسازیم (این ساختار برای مدیریت بهتر پروژه میباشد):
درون فایل index.js، محتویات زیر را طبق مستندات آن قرار میدهیم:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
جهت استفاده از این router، نیاز است تا در نمونه‌ی وهله سازی شده‌ی vue برنامه بکار گرفته شود. فایل main.js را باز کنید و خط زیر را در قسمت بالای برنامه وارد کنید:
import router from './router'
اکنون محتویات فایل main.js بشکل زیر میباشد:
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
D) نصب axios : برای انجام درخواستهای HTTP و عملیات ا‌ی‌جکس در vue.js ترجیحا بهتر است از axios که یک کتابخانه‌ی محبوب میباشد و کار با آن ساده است، استفاده شود. برای نصب آن، دستور زیر را اجرا میکنیم:
npm install axios
E) نصب vuex : کتابخانه‌ای جهت مدیریت حالت (state management) برای vue.js میباشد و مشابه آن Flux و Redux برای React می‌باشند. برای نصب، دستور زیر را اجرا میکنیم:
npm install vuex
برای بکارگیری آن یک فولدر را با نام store در پوشه‌ی src برنامه ایجاد میکنیم و یک فایل جاوا اسکریپتی را در آن با نام index.js میسازیم (این ساختار برای مدیریت بهتر پروژه میباشد). درون فایل index.js، محتویات زیر را طبق مستندات آن و ^ قرار میدهیم.
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store()
برای استفاده و کانفیگ آن، محتویات فایل main.js را بشکل زیر تغییر دهید:
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import {store} from './store'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store,
router
}).$mount('#app')
نکته: برای اجرای برنامه و دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
npm install
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link href="Content/css/bootstrap-rtl.css" rel="stylesheet">
<link href="Content/css/custom.css" rel="stylesheet">
</head>
<body>
</body>
</html> <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Scripts/bootstrap-rtl.js"></script>
<script src="Scripts/respond.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link href="Content/css/bootstrap-rtl.css" rel="stylesheet">
<link href="Content/css/custom.css" rel="stylesheet">
<script src="Scripts/respond.min.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="Scripts/bootstrap-rtl.js"></script>
</body>
</html> <button
onClick={this.handleReset}
className="btn btn-primary btn-sm m-2"
>
Reset
</button> handleReset = () => {
const counters = this.state.counters.map(counter => {
counter.value = 0;
return counter;
});
this.setState({ counters }); // = this.setState({ counters: counters });
}; 
class Counter extends Component {
state = {
count: this.props.counter.value
}; handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
}; <button
onClick={() => this.props.onIncrement(this.props.counter)}
className="btn btn-secondary btn-sm"
>
Increment
</button> getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.props.counter.value === 0 ? "warning" : "primary";
return classes;
}
formatCount() {
const { value } = this.props.counter; // Object Destructuring
return value === 0 ? "Zero" : value;
} handleIncrement = counter => {
console.log("handleIncrement", counter);
}; <Counter
key={counter.id}
counter={counter}
onDelete={this.handleDelete}
onIncrement={this.handleIncrement}
/> handleIncrement = counter => {
console.log("handleIncrement", counter);
const counters = [...this.state.counters]; // cloning an array
const index = counters.indexOf(counter);
counters[index] = { ...counter }; // cloning an object
counters[index].value++;
console.log("this.state.counters", this.state.counters[index]);
this.setState({ counters });
}; 
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root")); import React, { Component } from "react";
class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar
</a>
</nav>
);
}
}
export default NavBar; import "./App.css";
import React from "react";
import Counters from "./components/counters";
import NavBar from "./components/navbar";
function App() {
return (
<React.Fragment>
<NavBar />
<main className="container">
<Counters />
</main>
</React.Fragment>
);
}
export default App; 
render() {
return (
<React.Fragment>
<NavBar />
<main className="container">
<Counters
counters={this.state.counters}
onReset={this.handleReset}
onIncrement={this.handleIncrement}
onDelete={this.handleDelete}
/>
</main>
</React.Fragment>
);
} render() {
return (
<div>
<button
onClick={this.props.onReset}
className="btn btn-primary btn-sm m-2"
>
Reset
</button>
{this.props.counters.map(counter => (
<Counter
key={counter.id}
counter={counter}
onDelete={this.props.onDelete}
onIncrement={this.props.onIncrement}
/>
))}
</div>
);
} <NavBar
totalCounters={this.state.counters.filter(c => c.value > 0).length}
/> class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar{" "}
<span className="badge badge-pill badge-secondary">
{this.props.totalCounters}
</span>
</a>
</nav>
);
}
} 
import React from "react";
// Stateless Functional Component
const NavBar = props => {
return (
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">
Navbar{" "}
<span className="badge badge-pill badge-secondary">
{props.totalCounters}
</span>
</a>
</nav>
);
};
export default NavBar; const NavBar = ({ totalCounters }) => { Pipe یک متغیر یا عبارت را به عنوان ورودی دریافت کرده و آنرا به شکل دیگری برای نمایش تغییر می‌دهد. Pipeها معمولا در صفحات HTML مورد استفاده قرار می‌گیرند. با استفاده از عملگر Pipe (|) به شکل زیر می‌توانید Pipe مورد نظر خود را اعمال کنید.
import { Component } from '@angular/core';
@Component({
selector: 'hero-birthday',
template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988
} در این مثال Pipe از قبل ساخته شده date را بر روی متغییر birthday اعمال میکنیم. خروجی کار به شکل زیر خواهد بود.
The hero's birthday is April 15, 1988
لازم به ذکر است Pipe هیچگونه اثری بر روی متغییر birthday نداشته و فقط نحوه نمایش آن را تغییر می‌دهد.
در انگیولار ۲ یکسری Pipe از پیش ساخته شده مانند DatePipe، UpperCasePipe، LowerCasePipe، CurrencyPipe و PercentPipe وجود دارند که شما در تمامی صفحات HTML می‌توانید بدون هیچ تنظیم اضافه‌ای از آنها استفاده کنید. لیست Pipeهای از پیش ساخته شده را اینجا مشاهده کنید.
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p> مقدار پارامتر، هر نوع مجازی از Template expressions می‌تواند باشد (از جمله عبارت رشته‌ای یا حتی یک خصوصیت از کامپوننت). بنابراین در سرتاسر برنامه و در هر زمان می‌توانید با تغییر پارامتر در لحظه، خروجی مدنظر خود را به کاربرنهایی نمایش دهید.
Template expressions: عباراتی (expressions) که بعد از اجرا توسط انگیولار، تبدیل به یک مقدار جهت نمایش در HTML، کامپوننت یا دایرکتیو میشود.
استفاده زنجیره‌ای از Pipeها
برای اعمال چند Pipe بر روی یک عبارت، میتوان از Pipeها به صورت پشت سر هم استفاده کرد. برای مثال در ادامه میخواهیم علاوه بر اعمال DatePipe با پارامتر fullDate جهت نمایش تاریخ به صورت Friday, April 15, 1988، حروف را نیز به صورت UpperCase نمایش دهیم. لازم به ذکر است برای نمایش حروف به صورت UpperCase از Pipe به همین نام استفاده میکنیم.
<p>The hero's birthday is {{ birthday | date:"fullDate" | uppercase}} </p>
خروجی کار به شکل زیر خواهد بود.
The hero's birthday is FRIDAY, APRIL 15, 1988
برای کسانیکه با انگیولار یک آشنایی دارند، Pipe در انگولار ۲ معادل filter در انگولار یک است. در انگیولار یک با تزریق سرویس filter$ به کنترلرها یا سرویس‌ها، می‌توانستیم filterهای تعریف شده شخصی و از پیش ساخته شده را جهت اعمال بر روی متغیرهای خود، استفاده کنیم. در انگیولار دو نیز این امکان فراهم شده‌است؛ ولی به سادگی تزریق filter$ نیست. یعنی لازم است علاوه بر تزریق Pipe به سرویس یا کامپوننت‌های خود، Pipe مورد نظر خود را در لیست providers ماژول خود نیز اضافه کنید. برای نمونه اگر بخواهیم DatePipe را در component خود (نه در template) مورد استفاده قرار دهیم به شکل زیر عمل میکنیم:
import { Component } from '@angular/core';
// اضافه کردن DatePipe از @angular/common
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
birthDay = new Date(1988, 3, 15);
strBirthDay = "";
// تزریق DatePipe
constructor(private datePipe: DatePipe) {
this.strBirthDay = this.datePipe.transform(this.birthDay, 'yyyy-MM-dd');
}
}
پس از وارد کردن DatePipe از angular/common@ به کامپوننت و تزریق آن از طریق سازنده کامپوننت، برای اعمال Pipe بر روی عبارت مورد نظر خود، از متد transform استفاده میکنیم.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DatePipe } from '@angular/common'
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
// افزودن Pipe به Providers
providers: [DatePipe],
bootstrap: [AppComponent]
})
export class AppModule { }
Pipeهای Date و Currency به دلیل استفاده از شی Intl در داخل خود نیاز به ECMAScript Internationalization API دارند. مرورگرهای قدیمی و همچنین مرورگر Safari به دلیل عدم پشتیبانی از این قضیه به هنگام استفاده از این Pipeها دچار مشکل می‌شوند. برای حل این مشکل کافی است اسکریپت زیر را به صفحه خود اضافه کنید.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
در بخش‌های بعدی نحوه ساخت Pipeهای سفارشی و همچنین نکات تکمیلی در مورد Pipeها را بررسی خواهیم کرد.
...
<div>
<div>
<input type="text" id="inputName" maxlength="15">
</div>
<div>
<button id="generateButton">Aye! Gimme a name!</button>
</div>
</div>
... import 'dart:html'; ButtonElement genButton;
void main() {
querySelector('#inputName').onInput.listen(updateBadge);
genButton = querySelector('#generateButton');
genButton.onClick.listen(generateBadge);
} ...
void setBadgeName(String newName) {
querySelector('#badgeName').text = newName;
} ...
void generateBadge(Event e) {
setBadgeName('Meysam Khoshbakht');
} void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(inputName);
} void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(inputName);
if (inputName.trim().isEmpty) {
// To do: add some code here.
} else {
// To do: add some code here.
}
} void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(inputName);
if (inputName.trim().isEmpty) {
genButton..disabled = false
..text = 'Aye! Gimme a name!';
} else {
genButton..disabled = true
..text = 'Arrr! Write yer name!';
}
} 
گام چهارم: ایجاد کلاس PirateName
در این مرحله فقط کد مربوط به فایل dart را تغییر میدهیم. ابتدا کلاس PirateName را ایجاد میکنیم. با ایجاد نمونه ای از این کلاس، یک نام بصورت تصادفی انتخاب میشود و یا نامی بصورت اختیاری از طریق سازنده انتخاب می‌گردد.
نخست کتابخانه dart:math را به ابتدای فایل dart اضافه کنید
import 'dart:html'; import 'dart:math' show Random;
توضیحات
- با استفاده از کلمه کلیدی show، شما می‌توانید فقط کلاسها، توابع و یا ویژگی‌های مورد نیازتان را import کنید.
- کلاس Random یک عدد تصادفی را تولید میکند
در انتهای فایل کلاس زیر را تعریف کنید
...
class PirateName {
} در داخل کلاس یک شی از کلاس Random ایجاد کنید
class PirateName {
static final Random indexGen = new Random();
} توضیحات
- با استفاده از static یک فیلد را در سطح کلاس تعریف میکنیم که بین تمامی نمونه‌های ایجاد شده از کلاس مشترک میباشد
- متغیرهای final فقط خواندنی می‌باشند و غیر قابل تغییر هستند.
- با استفاده از new میتوانیم سازنده ای را فراخوانی نموده و نمونه ای را از کلاس ایجاد کنیم
دو فیلد دیگر از نوع String و با نام‌های _firstName و _appelation به کلاس اضافه میکنیم
class PirateName {
static final Random indexGen = new Random();
String _firstName;
String _appellation;
} متغیرهای خصوصی با (_) تعریف می‌شوند. Dart کلمه کلیدی private را ندارد.
دو لیست static به کلاس فوق اضافه میکنیم که شامل لیستی از name و appelation میباشد که میخواهیم آیتمی را بصورت تصادفی از آنها انتخاب کنیم.
class PirateName {
...
static final List names = [
'Anne', 'Mary', 'Jack', 'Morgan', 'Roger',
'Bill', 'Ragnar', 'Ed', 'John', 'Jane' ];
static final List appellations = [
'Jackal', 'King', 'Red', 'Stalwart', 'Axe',
'Young', 'Brave', 'Eager', 'Wily', 'Zesty'];
} کلاس List می‌تواند شامل مجموعه ای از آیتم‌ها میباشد که در Dart تعریف شده است.
سازنده ای را بصورت زیر به کلاس اضافه میکنیم
class PirateName {
...
PirateName({String firstName, String appellation}) {
if (firstName == null) {
_firstName = names[indexGen.nextInt(names.length)];
} else {
_firstName = firstName;
}
if (appellation == null) {
_appellation = appellations[indexGen.nextInt(appellations.length)];
} else {
_appellation = appellation;
}
}
} توضیحات
- سازنده تابعی همنام کلاس میباشد
- پارامترهایی که در {} تعریف می‌شوند اختیاری و Named Parameter می‌باشند. Named Parameterها پارمترهایی هستند که جهت مقداردهی به آنها در زمان فراخوانی، از نام آنها استفاده میشود.
- تابع nextInt() یک عدد صحیح تصادفی جدید را تولید میکند.
- جهت دسترسی به عناصر لیست از [] و شماره‌ی خانه‌ی لیست استفاده میکنیم.
- ویژگی length تعداد آیتم‌های موجود در لیست را بر می‌گرداند.
در این مرحله یک getter برای دسترسی به pirate name ایجاد میکنیم
class PirateName {
...
String get pirateName =>
_firstName.isEmpty ? '' : '$_firstName the $_appellation';
} توضیحات
- Getterها متدهای خاصی جهت دسترسی به یک ویژگی به منظور خواندن مقدار آنها می‌باشند.
- عملگر سه گانه :? دستور میانبر عبارت شرطی if-else میباشد
- $ یک کاراکتر ویژه برای رشته‌های موجود در Dart میباشد و می‌تواند محتوای یک متغیر یا ویژگی را در رشته قرار دهد. در رشته '$_firstName the $_appellation' محتوای دو ویژگی _firstName و _appellation در رشته قرار گرفته و نمایش می‌یابند.
- عبارت (=> expr;) یک دستور میانبر برای { return expr; } میباشد.
تابع setBadgeName را بصورت زیر تغییر دهید تا یک پارامتر از نوع کلاس PirateName را به عنوان پارامتر ورودی دریافت نموده و با استفاده از Getter مربوط به ویژگی pirateName، مقدار آن را در badge name نمایش دهد.
void setBadgeName(PirateName newName) {
querySelector('#badgeName').text = newName.pirateName;
} تابع updateBadge را بصورت زیر تغییر دهید تا یک نمونه از کلاس PirateName را با توجه به مقدار ورودی کاربر در فیلد input تولید نموده و تابع setBadgeName رافراخوانی نماید. همانطور که در کد مشاهده می‌کنید پارامتر ورودی اختیاری firstName در زمان فراخوانی با ذکر نام پارامتر قبل از مقدار ارسالی نوشته شده است. این همان قابلیت Named Parameter میباشد.
void updateBadge(Event e) {
String inputName = (e.target as InputElement).value;
setBadgeName(new PirateName(firstName: inputName));
...
} تابع generateBadge را بصورت زیر تغییر دهید تا به جای نام ثابت Meysam Khoshbakht، از کلاس PirateName به منظور ایجاد نام استفاده کند. همانطور که در کد می‌بینید، سازنده‌ی بدون پارامتر کلاس PirateName فراخوانی شده است.
void generateBadge(Event e) {
setBadgeName(new PirateName());
} همانند گام سوم برنامه را اجرا کنید و نتیجه را مشاهده نمایید.
var app = angular.module('myApp', []); app.directive('angry', function () {
return {
restrict: 'E',
template: '<div style="color:red"> I am angry!</div>'
}
}) app.directive('happy', function () {
return {
restrict: 'A',
template: '<div style="color:blue"> I am happy!</div>'
};
}) <script type="text/javascript" src="~/scripts/Modules/module1.js"></script>
<div ng-app="myApp">
<angry></angry>
<div happy></div>
</div> 
<div class="container">
<header class="jumbotron mt-4">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in
traditional and alternative medicine in the diagnosis and
treatment of companion animals including dogs, cats, birds,
reptiles, rodents, and fish. We apply the wisdom garnered in
the centuries old tradition of veterinary medicine, to find the
safest treatments and cures.</p>
</header> 
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in
traditional and alternative medicine in the diagnosis and
treatment of companion animals including dogs, cats, birds,
reptiles, rodents, and fish. We apply the wisdom garnered in
the centuries old tradition of veterinary medicine, to find the
safest treatments and cures.</p>
</div>
</header> 
<table class="table table-striped table-hover table-bordered table-responsive"> <thead class="thead-light">
<tr class="bg-danger text-light">
<td class="table-success">$100.00 </td>
<section class="card mb-5" id="drwinthrop">
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Winthrop Photo">
<h2 class="card-title">Dr. Stanley Winthrop</h2>
<h5 class="card-subtitle">Behaviorist</h5>
<p class="card-text">Dr. Winthrop is the guardian of Missy, a
three-year old Llaso mix, who he adopted at the shelter.
Dr. Winthrop is passionate about spay and neuter and pet
adoption, and works tireless hours outside the clinic,
performing free spay and neuter surgeries for the shelter.</p>
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section> <section class="card mb-5 bg-primary text-light border-warning" id="drchase">
<section class="card mb-5" id="drsanders">
<div class="card-header">
<h2 class="card-title">Dr. Kenneth Sanders</h2>
<h5 class="card-subtitle">Nutritionist</h5>
</div>
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Sanders Photo">
<p class="card-text">Leroy walked into Dr. Sanders front door
when she was moving into a new house. After searching for
weeks for Leroy's guardians, she decided to make Leroy a
part of her pet family, and now has three cats.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section> 
<section class="card mb-5" id="drwong">
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Wong Photo">
<h2 class="card-title">Dr. Olivia Wong</h2>
<h5 class="card-subtitle">Preventive Care</h5>
<p class="card-text">Dr. Wong is a cancer survivor who was
fortunate enough to get to spend time with a therapy dog
during her recovery. She became passionate about therapy
animals, and has started her own foundation to train and
provide education to patients in recovery. Now she gets her
own dose of daily therapy from her husky, Lilla.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">
Client Slideshow
</a>
</div>
</section> 
<div class="container">
<div class="card-group"> 
<body>
<div class="container">
<section class="media mb-5" id="drwinthrop">
<img class="d-flex align-self-center img-fluid rounded mr-3" style="width:30%"
src="images/testimonial-mcphersons.jpg" alt="Doctor Winthrop Photo">
<div class="media-body">
<h2>Dr. Stanley Winthrop</h2>
<h5>Behaviorist</h5>
<p>Dr. Winthrop is the guardian of Missy,
a three-year old Llaso mix, who he adopted at the
shelter. Dr. Winthrop is passionate about spay and neuter
and pet adoption, and works tireless hours outside the
clinic, performing free spay and neuter surgeries for the
shelter.</p>
</section>
</div>
</body> 
npm install @angular/flex-layout --save
import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
imports: [
FlexLayoutModule
],
exports: [
FlexLayoutModule
]
})
export class SharedModule {
} <div fxLayout="row"
fxLayout.xs="column"></div>
<div fxLayoutWrap></div>
<div fxLayoutGap="10px"></div>
<div fxLayoutAlign="start stretch"></div>
<div fxFlex="1 2 calc(15em + 20px)"></div>
fxFlex="grow shrink basis"
fxFlex="basis"
<div fxFlexOrder="2"></div>
<div fxFlexOffset="20px"></div>
<div fxFlexAlign="center"></div>
<div fxFlexFill></div>
fxLayout.sm = "..." fxLayoutAlign.md = "..." fxHide.gt-sm = "..."
<div fxShow fxHide.xs="false" fxHide.lg="true"></div>
<div fxFlex="50%" fxFlex.gt-sm="100%"></div>
<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>
<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>
<div [ngClass.sm]="{'fxClass-sm': hasStyle}" ></div>
<div [ngStyle.xs]="{color: 'blue'}"></div> 