> create-react-app sample-15 > cd sample-15 > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
> npm i react-router-dom --save
import { BrowserRouter } from "react-router-dom"; ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
); import React from "react";
const NavBar = () => {
return (
<nav className="navbar bg-dark navbar-dark navbar-expand-sm">
<div className="navbar-nav">
<a className="nav-item nav-link" href="/">
Home
</a>
<a className="nav-item nav-link" href="/products">
Products
</a>
<a className="nav-item nav-link" href="/posts/2018/06">
Posts
</a>
<a className="nav-item nav-link" href="/admin">
Admin
</a>
</div>
</nav>
);
};
export default NavBar; 
import "./App.css";
import React, { Component } from "react";
import NavBar from "./components/navbar";
class App extends Component {
render() {
return (
<div>
<NavBar />
</div>
);
}
}
export default App; import "./App.css";
import React, { Component } from "react";
import { Route } from "react-router-dom";
import Dashboard from "./components/admin/dashboard";
import Home from "./components/home";
import NavBar from "./components/navbar";
import Posts from "./components/posts";
import Products from "./components/products";
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Route path="/products" component={Products} />
<Route path="/posts" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</div>
</div>
);
}
}
export default App; import React, { Component } from "react";
class Products extends Component {
state = {
products: [
{ id: 1, name: "Product 1" },
{ id: 2, name: "Product 2" },
{ id: 3, name: "Product 3" }
]
};
render() {
return (
<div>
<h1>Products</h1>
<ul>
{this.state.products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))}
</ul>
</div>
);
}
}
export default Products; import React from "react";
const Home = () => {
return <h1>Home</h1>;
};
export default Home; import React from "react";
const Posts = () => {
return (
<div>
<h1>Posts</h1>
Year: , Month:
</div>
);
};
export default Posts; import React from "react";
const Dashboard = ({ match }) => {
return (
<div>
<h1>Admin Dashboard</h1>
</div>
);
};
export default Dashboard; 
<div className="container">
<Route path="/products" component={Products} />
<Route path="/posts" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</div> <Route path="/" exact component={Home} /> 
import { Route, Switch } from "react-router-dom"; class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Switch>
<Route path="/products" component={Products} />
<Route path="/posts" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</Switch>
</div>
</div>
);
}
} import React from "react";
import { Link } from "react-router-dom";
const NavBar = () => {
return (
<nav className="navbar bg-dark navbar-dark navbar-expand-sm">
<div className="navbar-nav">
<Link className="nav-item nav-link" to="/">
Home
</Link>
<Link className="nav-item nav-link" to="/products">
Products
</Link>
<Link className="nav-item nav-link" to="/posts/2018/06">
Posts
</Link>
<Link className="nav-item nav-link" to="/admin">
Admin
</Link>
</div>
</nav>
);
};
export default NavBar; 
<Route
path="/products"
render={() => <Products param1="123" param2="456" />}
/> 
<Route
path="/products"
render={props => (
<Products param1="123" param2="456" {...props} />
)}
/> 
پس اگر قصد توسعه SPA با هر فریمورکی مثل angular را داشته باشید، این را در نظر داشته باشید که دیر یا زود هنگام استفاده از افزونه‌های جی‌کوئری به مشکل برخواهید خورد.
بیشتر امکانات تو کار ASP.NET MVC را از دست خواهید داد
به هنگام توسعه‌ی برنامه با استفاده از فریم ورک‌های SPA، امکانات توکار ASP.NET MVC مثل اعتبارسنجی یکپارچه و strongly typed viewها را از دست خواهید داد. شاید یک سری پروژه در Github پیدا کنید که سعی کرده‌اند این‌ها را با یکدیگر سازگار کنند. اما به محض استفاده متوجه می‌شوید که اگر همه‌ی کارها را خودتان با Angular انجام بدهید راحت‌تر هستید تا استفاده از کتابخانه‌های آزمایشی و ناقص.
البته باز هم نمی‌گویم که این‌ها تقصیر AngularJS است. ذات توسعه‌ی SPAها، این گونه است و در توسعه‌ی SPA با هر فریمورکی به این مشکلات برخواهید خورد.
حال که یکسری مشکلات عمومی را بررسی کردیم، بدنیست نگاهی اختصاصی به خود AngularJS بیندازیم.
ضعف طراحی
اگر به تعدای از لینک‌های سایت ihateangular مراجعه کنید می‌بینید که هر کسی نظری دارد: یکی می‌گوید به هیچ وجه Directive ننویسید، یکی دیگر می‌گوید کنترلر ننویسید و تمامی کارها را در directiveهای سفارشی نوشته شده توسط خودتان انجام بدهید، کلا همه جا علیه performance این فریمورک صحبت می‌کنند و همگی به پیچیده بودن آن اذعان دارند.
نتیجه گیری
AngularJS فریمورک خیلی خوبی برای نوشتن برنامه‌های تست پذیر است و کسی منکر قابلیت‌های آن نیست. ولی این را نیز در نظر بگیرید که برای تست پذیر بودن، خیلی چیزها از جمله سادگی کار را از دست می‌دهید. معمولا می‌گویند که AngularJS کارهای مشکل را ساده می‌کند و کارهای ساده را مشکل.
پیشنهاد من این است که اگر هنوز AngularJS را فرا نگرفته‌اید، حداقل یادگیری آن را تا انتشار نسخه‌ی 2 آن به تعویق بیندازید. اگر AngularJS را بلد هستید، دیگر آن را در پروژه‌ای استفاده نکنید؛ چون دیگر کدهای شما در نسخه‌ی 2 کار نخواهد کرد و احتیاج به انجام تغییرات گسترده‌ای در کدهای نوشته شده قبلی پیدا می‌کنید.
ng add @angular/material
npm install -g angular-cli
ng new AngularCLIDemoApp
bower install angular-route --save
<script src="bower_components/angular-route/angular-route.min.js" type="text/javascript"></script>
<div class="col-md-9">
<ng-view></ng-view>
</div> model.panel = {
title: "Panel Title",
items: [
{
title: "Home", url: "#/home"
},
{
title: "Articles", url: "#/articles"
},
{
title: "Authors", url: "#/authors"
}
]
}; var module = angular.module("dntModule", ["ngRoute"]); module.config(function ($routeProvider) {
$routeProvider
.when("/home", { template: "<app-home></app-home>" })
.when("/articles", { template: "<app-articles></app-articles>" })
.when("/authors", { template: "<app-authors></app-authors>" })
.otherwise({ redirectTo: "/home" });
}); module.component("appHome", {
template: `
<hr><div>
<div>Panel heading = HomePage</div>
<div>
HomePage
</div>
</div>`
});
module.component("appArticles", {
template: `
<hr><div>
<div>Panel heading = Articles</div>
<div>
Articles
</div>
</div>`
});
module.component("appAuthors", {
template: `
<hr><div>
<div>Panel heading = Authors</div>
<div>
Authors
</div>
</div>`
}); 
اکنون توسط لینک‌های تعریف شده می‌توانیم به راحتی درون تمپلیت‌ها، پیمایش کنیم. همانطور که عنوان شد تا اینجا مسیریاب پیش‌فرض Angular هیچ اطلاعی از کامپوننت‌ها ندارد؛ بلکه آنها را با کمک template، به صورت غیر مستقیم، درون صفحه نمایش داده‌ایم.
معرفی Component Router
مزیت این روتر این است که به صورت اختصاصی برای کار با کامپوننت‌ها طراحی شده است. بنابراین دیگر نیازی به استفاده از template درون route configuration نیست. برای استفاده از این روتر ابتدا باید پکیج آن را نصب کنیم:
bower install angular-component-router --save
سپس وابستگی فوق را با روتر پیش‌فرضی که در مثال قبل بررسی کردیم، جایگزین خواهیم کرد:
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
همچنین درون فایل module.js به جای وابستگی ngRoute از ngComponentrouter استفاده خواهیم کرد:
var module = angular.module("dntModule", ["ngComponentRouter"]); در ادامه به جای تمامی route configurations قبلی، اینبار یک کامپوننت جدید را به صورت زیر ایجاد خواهیم کرد:
module.component("appHome", {
template: `
<hr>
<div>
<div>Panel heading = HomePage</div>
<div>
HomePage
</div>
</div>`
}); همانطور که مشاهده می‌کنید برای پاسخ‌گویی به تغییرات URL، مقدار routeConfig$ را مقداردهی کرده‌ایم. در اینجا به جای بارگذاری تمپلیت، خود کامپوننت، در هر یک از ruleهای فوق بارگذاری خواهد شد. برای حالت otherwise نیز از سینتکس **/ استفاده کرده‌ایم.
تمپلیت کامپوننت فوق نیز به صورت زیر است:
<div class="container">
<div class="row">
<div class="col-md-3">
<hr>
<dnt-widget></dnt-widget>
</div>
<div class="col-md-9">
<ng-outlet></ng-outlet>
</div>
</div>
</div> لازم به ذکر است دیگر نباید از دایرکتیو ng-view استفاده کنیم؛ زیرا این دایرکتیو برای استفاده از روتر اصلی طراحی شده است. به جای آن از دایرکتیو ng-outlet استفاده شده است. این کامپوننت به عنوان یک کامپوننت top level عمل خواهد کرد. بنابراین درون صفحه‌ی index.html از کامپوننت فوق استفاده خواهیم کرد:
<html ng-app="dntModule">
<head>
<meta charset="UTF-8">
<title>Using Angular 1.5 Component Router</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
</head>
<body>
<dnt-app></dnt-app>
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-component-router/angular_1_router.js"></script>
<script src="scripts/module.js" type="text/javascript"></script>
<script src="scripts/dnt-app.component.js"></script>
<script src="scripts/dnt-widget.component.js"></script>
</body>
</html> در نهایت باید جهت فعالسازی سیستم مسیریابی جدید، سرویس زیر را همراه با نام کامپوننت فوق ریجستر کنیم:
module.value("$routerRootComponent", "dntApp"); اکنون اگر برنامه را اجرا کنید خواهید دید که همانند قبل، کار خواهد کرد. اما اینبار از روتر جدید و سازگار با کامپوننت‌ها استفاده می‌کند.
کدهای این قسمت را نیز از اینجا می‌توانید دریافت کنید.
C:\>node -v v5.10.1
C:\>npm install -g @angular/cli
C:\>npm list -g @angular/cli --depth=0
C:\>npm list -g @angular/cli --depth=0 C:\Users\Vahid\AppData\Roaming\npm `-- @angular/cli@1.0.0
C:\>ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.0.0
node: 6.10.2
os: win32 x64 > ng new ngtest --skip-install
| فایل | توضیحات |
| .angular-cli.json | تنظیمات cli را به همراه دارد. |
| editorconfig | مربوط به تنظیمات VSCode است. |
| karma.conf.js | برای انجام unit tests است. |
| package.json | وابستگی‌های npm برنامه را به همراه دارد (که در زمان نگارش این مطلب تنظیمات Angular 4 را به همراه دارد). |
| protractor.conf.js | برای اجرای آزمون‌های end to end که در اینجا e2e نام گرفته‌است، می‌باشد. |
| tsconfig.json | تنظیمات کامپایلر TypeScript را به همراه دارد. |
| tslint.json | جهت اجرای Lint و ارائه‌ی بهترین تجربه‌های کاری با TypeScript است. |
>npm install
npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest
rm rmdir /S/Q node_modules dist npm install --save-dev @angular/cli@latest npm install
I think that JavaScript's loose typing is one of its best features and that type checking is way overrated. TypeScript adds sweetness, but at a price. It is not a price I am willing to pay.
اما به مرور زمان این زبان توفیق بیشتری پیدا کرد تا اینکه امروز پروژه‌های بسیار جالبی با این زبان در حال توسعه هستند.
زبان Typescript نقاط قوت بسیاری دارد، از جمله‌ی آنها می‌توان به موارد زیر اشاره کرد:
در این مطلب تعدادی از این پروژه‌ها را که برای خودم جذاب هستند، به شما معرفی می‌کنم.
در ادامه لینک قبل در این بخش کار را با AngularJs ادامه می‌دهد...
