بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش شانزدهم

AngularJS Ajax

AngularJS با استفاده از سرویس http$ امکان خواندن اطلاعات را از سرور فراهم می کند. سرور شما می تواند یک دیتابیس برای خواندن اطلاعات ایجاد کند. AngularJS به داده ها در قالب JSON نیاز دارد و هنگامی که داده ها آماده باشند سرویس http$ می تواند از داده های سرور به صورت زیر استفاده کنند.

function studentController($scope,$http) {
var url="data.txt";
   $http.get(url).success( function(response) {
                           $scope.students = response; 
                        });
}

در اینجا data.txt یک فایل است که شامل رکوردهایی برای دانش آموزان است. سرویس http$ یک فراخوانی به روش AJAX ایجاد می کند و فرایند بازیابی اطلاعات برای پرارپرتی های  Model دانش آموزان را فراهم می کند. "students" model برای نمایش اطلاعات مورد استفاده قرار می گیرد.

بسم الله الرحمن الرحیم

مدیریت پروژه

این مطلب را با شرح مشکلی آغاز می کنم تا در انتها وقتی راهکار را بررسی می کنیم. بهتر بتوانیم در مورد این مطلب نتیجه گیری کنیم.
در کتاب مدیریت می خواند که "عدد یک کوچکتر از آن است که بتواند با عظمت شود" شاید معنای این جمله خیلی ملموس نباشد اما می توانم این جمله را به این صورت توصیف کنم که نمی توان کارهای بزرگ را به تنهایی انجام داد خیلی نمی خواهیم وارد مباحث مدیریت شویم اما اگر با حرف بنده موافق نیستید یک مثال در مورد موفقیت فردی که به تنهایی به نتیجه بزرگ دست یافته پیدا کنید.

وقتی قرار می شود بیش از یک نفر باشیم، پس گروهی تشکیل خواهد شد. این گروه می تواند یک شرکت، یک سازمان یا یک جمع غیر رسمی باشد. به هر حال هر گروه نیازمند یک رهبر و مدیر است. خوب این گروه می تواند جمعی باشند که می خواهند یک پروژه نرم افزاری را انجام دهند. آیا می شود یک گروه از مهندسین نرم افزار کارهای خود را با روش سنتی ( بدون استفاده از نرم افزار) انجام دهند. آری، می شود اما وقتی ابزارهای بسیاری برای مدیریت و کنترل، برنامه ریزی، تعیین وظایف و.. وجود دارد به نظر نمی رسد کار عاقلانه ای باشد.

وقتی می خواهید با گروهی یک پروژه را انجام دهید، خارج از مباحث مهندسی نرم افزار نیاز دارید کارها را تقسیم کنید و مشخص کنید هر کس چه کارهایی باید انجام دهد، چه زمانی باید هر کار تحویل داده شود، کارها بررسی شوند و در صورت مشکل فرد مسئول کار خود را مجددا بررسی و مشکل آن را رفع کند.

بسم الله الرحمن الرحیم

بخش اول معرفی دوره

در این دوره آموزشی قصد داریم یک پروژه را با استفاده ASP.NET MVC & Web API و همچنین Angular پیاده سازی کنیم.

از این رو آموزش هایی برای این معماری ها قبلا ارائه گردیده است که شما می بایست ابتدا این آموزش ها را مطالعه نمایید تا بتوانیم به سراغ مباحث مربوط به این دوره برویم، پس اگر با این معماری ها آشنایی کاملی ندارید ابتدا از طریق لینک های زیر آموزش های پیش نیاز این دوره را بررسی و مطالعه کنید و سپس به سراغ این آموزش بیاید.

بخش اول آموزش Angular و  ASP.NET Web API

بخش دوم آموزش Angular و  ASP.NET Web API

بخش سوم آموزش Angular و  ASP.NET Web API

 آموزش Angular

 آموزش Web API

و در نهایت دوره آموزش Angular و  ASP.NET Web API

در برنامه های وب سنتی، client (که معمولا یک مرورگر{browser} است) ارتباط خود را با سرور با ارسال یک درخواست برای صفحه ای خاص آغاز می کند. سرور درخواست ارسالی را بررسی و پردازش می کند و سپس صفحه HTML مربوطه را برای کلاینت ارسال می کند. در ادامه این فرایند ممکن است کاربر (Client) مجددا بر روی یک لینک کلیک کند یا یک فرم اطلاعاتی را برای سرور ارسال کند، با این کار، فرایند بررسی و ارسال پاسخ در سرور مجددا آغاز می شود و یک صفحه جدید برای کاربر ارسال می شود.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش پانزدهم

AngularJS Includes

با AngularJS شما می توانید یک فایل HTML را درون یک فایل HTML دیگر لود کنید.

دستور HTML Includes در آینده HTML

متاسفانه لود کردن بخشی از HTML در یک فایل HTML دیگر هنوز توسط HTML پشتیبانی نمی شود.

HTML imports

HTML imports یک روش جدید است که در آینده برای نسخه های HTML مورد استفاده قرار خواهد گرفت.

<link rel="import" href="/path/navigation.html">

بسم الله الرحمن الرحیم

بررسی Unity, Castle Windsor, StructureMap  و Ninject

یک مقایسه سریع بر روی چهار DI و IoC داشتم و ابزارهای Unity, Castle Windsor, StructureMap  و Ninject را با دو سناریو متفاوت بررسی شدند.

در یکی از سناریوها ایجاد اشیا بدون سازنده و در سناریو دیگر اشیا با پارامترهای تزریق شده در سازنده شان بررسی شدند.در ابتدا قبل از هر چیزی سعی کردم مطئن شویم که در زمان فراخوانی متدها اشیا ایجاد شوند. نتیجه ایجاد اشیا به وسیله سازنده پیش فرض به صورت زیر است.

بسم الله الرحمن الرحیم

روند زبان های برنامه نویسی همواره در حال تغییر است. هر روز یک تکنولوژی جدید و یک راه حل ارائه می شود و همچنین ساختارها به سرعت در حال تغییر هستند. یکی از اهدافی که به دنبال آن هستیم بر روز رسانی سطح علمی شما دوستان عزیز است. از این رو جالب است با 5 زبان برتر برنامه نویسی در سال 2014 آشنا شوید، هر چند سبک و سیاق کار در ایران واقعا با سایر کشورها بسیار متفاوت است.

بسم الله الرحمن الرحیم

السلام علیک یا ابا عبدالله الحسین (ع)

فرا رسیدن ماه محرم را به تمامی شما عزیزان تسلیت عرض می کنیم.

گفتند شبی یکی از بزرگان خواب دیدند که امیر کبیر مرد بزرگ ایران، در بهشت برین متنعم است، پرسیدند این همه نعمت از بهر خدمت تو به مردم ایران است، امیر کیبر گفت خیر، وقتی در حمام فین کاشان رگ دستم را زدند و خونم جاری شد ، تشنه شدم. خواستم آبی بنوشم یاد اربابم امام حسین (ع) ارواح نا فدا افتادم، و به خود گفتم تو یک زخم خوردی اما امام حسین (ع) صد زخم بر بدن داشت ... پس آبی ننوشیدم. در حال رفتن از این دنیا بودم که امام حسین (ع) به دیدارم آمد. گفت ما خاندان اهل کرمیم، چون به ما ادب کردی و آب ننوشیدی تو را در خاک کربلا تدفین خواهیم کرد و در آخرت نیز تو را پاداش خواهد بود.

امیر کبیر در خاک کربلا دفن شد.

می توانید این مطلب از طریق این لینک به صورت کامل مطالعه کنید.

بسم الله الرحمن الرحیم

شاید دانستن این مطلب برای همه ما یک تکرار خوب باشد!. هر شرکتی و هر گروهی که بخواهند یک نرم افزار و یا محصول نرم افزاری را طراحی کنند نیاز به یک SDK خواهند داشته که می توانند بر اساس آن نرم افزار خود را طراحی کنند مثلا NET. ، پس از انتخاب SDK خود باید یک محیط برای برنامه نویسی انتخاب کنید که به آن IDE می گویند مثلا Visual Studio 2012

در این میان اتفاقات زیادی خواهد افتاد که IT Life cycle گفته می شود، که معمولا همان روش های مهندسی نرم افزار برای توسعه و طراحی یک سیستم است.

در نهایت سیستم شما یک روز رونمایی می شود به نسخه ای که هنوز در حال تست بر روی جامعه آماری واقعی هستید نسخه RC می گویند، پس از این تست نسخه نهایی نرم افزار شما معرفی و آماده فروش می شود که به این نسخه RTM گفته می شود.

 طبیعتا این مطالب ساده هستند اما گاهی اوقات دانستن چند نکته ساده باعث می شود شما بهتر بتوانید کار خود را بانجام رسانید.

SDK = Software Development Kit

IDE =  integrated development environment

RC  = release candidate (beta version)

RTM = release to manufacturing

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش چهاردهم

AngularJS and Twitter Bootstrap

Twitter Bootstrap یک style sheet محبوب است در این بخش می خواهیم نحوه استفاده از Bootstrap در AngularJS را بررسی کنیم.

Bootstrap

برای اضافه کردن Twitter Bootstrap به پروژه AngularJS می بایست کد زیر را به <head> صفحه خود اضافه کنید.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

در بخش زیر یک مثال کامل از رهنمودهای AngularJS و کلاس های Bootstrap وجود دارد.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش سیزدهم

AngularJS Input Validation

فرم های AngularJS و Controller ها می توانند داده های ورودی را اعتبارسنجی کنند.

Input Validation

در بخش قبل، فرم ها و Controller های AngularJS را یاد گرفتید.
فرم ها و Controller های AngularJS می توانند اعتبارسنجی مورد نیاز ما را فراهم کنند و اطلاعات نامعتبر کاربران را به آنها اطلاع دهند.
نکته: اعتبارسنجی سمت Client نمی تواند به تنهایی این اطمینان را به وجود آورد که اطلاعات وارد شده صحیح است و باید اعتبارسنجی سمت سرور نیز حتما صورت گیرد.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش دوازدهم

AngularJS Forms

یک form AngularJS شامل یک مجموعه از کنترل های ورود اطلاعات است.

HTML Controls

عناصر HTML input را کنترل های HTML می نامند:
•    input elements
•    select elements
•    button elements
•    textarea elements

HTML Forms

فرم های HTML عناصر HTML را با یکدیگر گروه بندی می کند.

مثال AngularJS Form

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش یازدهم

AngularJS Modules

ماژول ها برنامه را تعریف می کنند و همه Controller های برنامه باید به یک ماژول متعلق باشند. ماژول ها برنامه ها را خوانا تر می کنند و باعث می شوند فضای نامی شما واضح تر باشد و قدرت توسعه شما را افزایش می دهد.

مثال AngularJS Module

در این مثال، "myApp.js" شامل تعریف ماژول برنامه است و "myCtrl.js" شامل یک Controller است.

 <!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html> 

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش دهم

AngularJS Events

AngularJS  دارای رهنمود رویدادهای HTML خاص خودش است.

رهنمود ng-click

رهنمود ng-click یک رویداد کلیک AngularJS برای ما تعریف می کند.

 <div ng-app="" ng-controller="myController">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>

مخفی سازی عناصر HTML

رهنمود ng-hide می تواند برای تنظیم قابلیت visibility یک بخش از برنامه مورد استفاده قرار گیرد.

مقدار ng-hide="true" یک عنصر HTML را invisible می کند و طبیعتا با مقدار ng-hide="false" عنصر HTML ما visible می شود.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش نهم

AngularJS HTML DOM

AngularJS دارای رهنمودهایی برای مقید کردن اطلاعات برنامه به عناصر HTML DOM است.

DOM چیست؟

DOM) Document Object Model) یک رابط برنامه نویسی برای سندهای XML  و Html است . با استفاده از اینترفیس فوق، نحوه دستیابی و انجام پردازش های لازم در رابطه با سند های XML و Html فراهم می گردد . برنامه نویسان با استفاده از DOM ، قادر به ایجاد یک سند ،حرکت در طول ساختار سند، افزودن ، اصلاح و یا حذف المان های یک سند XML و یا Html می باشند . DOM توسط کنسرسیوم وب استاندارد و بمنظور استفاده از طریق زبان های برنامه نویسی متعددی طراحی شده است .

رهنمود ng-disabled 

رهنمود ng-disabled داده های برنامه AngularJS را به خاصیت disabled عناصر HTML مقید می کند

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش هشتم

AngularJS SQL

کد مثال قبل را می توان برای خواندن اطلاعات از دیتابیس استفاده کرد.

واکشی اطلاعات از یک MYSQL اجرا شده بر روی یک سرور PHP

 <div ng-app="" ng-controller="customersController">

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
function customersController($scope,$http) {
    var site = "http://www.w3schools.com";
    var page = "/website/Customers_MySQL.php";
    $http.get(site + page)
    .success(function(response) {$scope.names = response;});
}
</script>

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش هفتم

AngularJS Tables

رهنمود ng-repeat یک ابزار مناسب برای نمایش جداول است.

نمایش داده ها در یک جدول

نمایش جداول با angular بسیار ساده است.
مثال:

 <div ng-app="" ng-controller="customersController">

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
function customersController($scope,$http) {
  $http.get("http://www.w3schools.com/website/Customers_JSON.php")
  .success(function(response) {$scope.names = response;});
}
</script> 

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش ششم

AngularJS XMLHttpRequest

خواندن یک فایل JSON

در زیر یک فایل JSON استاتیک وجود دارد که بر روی یک وب سرور قرارداده شده است.

[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش پنجم

AngularJS Filters

Filter ها می توانند به رهنمود ها و عبارت ها با استفاده از یک کاراکتر pipe ( | ) اضافه شوند.
فیلترهای AngularJS می توانند شکل داده ها را تغییر دهند:

 اضافه کردن Filter ها به Expression ها

در دو مثال بعدی ما از personController که در مقاله قبل از آن استفاده کردیم بهره می بریم.
فیلتر uppercase همانطور که از نام آن مشخص است فرمت رشته ها (string) به حروف بزرگ تغییر می دهد.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش چهارم

AngularJS Controllers

AngularJS از معماری MVC استفاده می کند و AngularJS  برای کنترل برنامه از controller ها استفاده می کند.
رهنمود ng-controller برای تعریف controller ها درAngularJS  به کار می رود.
کدهای درون controller ها پس از لود شدن کامل صفحه اجرا می شوند.
یک controller یک JavaScript Object است که به وسیله  object constructor استاندارد ایجاد شده است. 

AngularJS با یک شی scope$ فراخوانی خواهد شد.

در AngularJS، شی scope$ شی برنامه می باشد و در واقع مالک اشیا و توابع برنامه های AngularJS می باشد.

مثال

 <div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
function personController($scope) {
    $scope.firstName="John",
    $scope.lastName="Doe"
}
</script> 

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش سوم

AngularJS Directives

همان طور که گفتیم تمامی رهنمودهای AngularJS با پیشوند ng- شروع می شوند.

ng-app

یک رهنمود (یا directive) است که یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کند.

<html ng-app>
….
</html>

AngularJS بر روی کل صفحه ما مدیریت خواهد داشت چون ng-app در بالاترین عنصر صفحه نوشته شده است.

ng-init

یک رهنمود برای مقدار دهی اولیه به داده های برنامه می باشد.