سیب فارسی

شب و روزنوشته های من | داستان سیبی که هر روز به زمین می خورد!

نقل قول ها(8) – Quotes

30 ژانویه 16

 

Asking questions dosent mean you dont know your job, asking questions means you want to improve the quality  of your work.

پرسیدن سوال به این معنی نیست که شما کارتون رو بلد نیستید و نمی شناسید، پرسیدن سوال بدین معنی اتس که شما م یخواهید کیفیت کارتون را بالاتر ببرید.

Robert Allen

نقل قول ها(7) – Quotes

30 ژانویه 16

 

You cant calm the storm…

so stop trying.

what you can do is calm yourself.

the storm will pass.

آرام کردن طوفان کار من و شما نیست…

بیخود تلاش نکنید.

آنچه که می شه انجام داد آرام نگه داشتن خودمان است…

طوفان هم خواهد گذشت!

timber hawkeye

آموزش Angular.js – قسمت سوم

11 دسامبر 15

خوب در ادامه مباحث آموزشی سایت سیب فارسی جلسه سوم و آخر آموزش AngularJs را دنبال می کنیم. همانطور که قبلا

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

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

در این قسمت به صورت خیلی سریع و چابک تمامی مباحثی که باقی مونده و در آموزش های من هم نبوده به صورت مثال عرضه می کنم و دوستان اینطوری می تونند خیلی سریع با جستجو در مباحث موجود در دنیای وب اطلاعات کاملتری رو بدست بیاورند.

اولین مثالی که براتون اوردم درباره modules هاست:

</pre>
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

</body>
</html>
<pre>

دومین موضوع این جلسه routes هاست:

</pre>
<!DOCTYPE html>

<html lang="en">

<head>

<title>AngularJS Routes example</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>

</head>

<body ng-app="sampleApp">

<a href="#/route1">Route 1</a><br/>

<a href="#/route2">Route 2</a><br/>

<div ng-view></div>

<script>

var module = angular.module("sampleApp", ['ngRoute']);

module.config(['$routeProvider',

function($routeProvider) {

$routeProvider.

when('/route1', {

templateUrl: 'angular-route-template-1.jsp',

controller: 'RouteController'

}).

when('/route2', {

templateUrl: 'angular-route-template-2.jsp',

controller: 'RouteController'

}).

otherwise({

redirectTo: '/'

});

}]);

&nbsp;

module.controller("RouteController", function($scope) {

&nbsp;

})
<pre></script>

سومین موضوع امروز که در قالب مثال اوردم بحث factory است که اونو در تقابل service ها مطرح کردیم:

//angular.js example for factory vs service
var app = angular.module('myApp', []);
    
app.factory('testFactory', function(){
    return {
        sayHello: function(text){
            return "Factory says \"Hello " + text + "\"";
        },
        sayGoodbye: function(text){
            return "Factory says \"Goodbye " + text + "\"";
        }  
    }               
});

app.service('testService', function(){
    this.sayHello= function(text){
        return "Service says \"Hello " + text + "\"";
    };        
    this.sayGoodbye = function(text){
        return "Service says \"Goodbye " + text + "\"";
    };   
});

function HelloCtrl($scope, testService, testFactory)
{
    $scope.fromService = testService.sayHello("World");
    $scope.fromFactory = testFactory.sayHello("World");
}

function GoodbyeCtrl($scope, testService, testFactory)
{
    $scope.fromService = testService.sayGoodbye("World");
    $scope.fromFactory = testFactory.sayGoodbye("World");
}

چهارمین موضوع امروز بحث Event هاست که در ادامه خواهیم داشت:

</pre>
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>
<pre>

موضوع پنجم مثالی در رابطه با Validation ها می باشد:

</pre>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'moh.khandan';
$scope.email = 'moh.khandan@gmail.com';
});
</script>

</body>
</html>
<pre>

آخرین نکته این سری از آموزش های سیب فارسی بحث angular includes ها می باشد:

</pre>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
<pre>

خوب این سری از آموزش های سایت سیب فارسی که درباره کتابخانه جاوا اسکریپتی محبوب angularJs بود را در این قسمت به پایان می بریم.

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

لینک قسمت اول آموزش AngularJs

لینک قسمت دوم آموزش AngularJs

آموزش Angular.js – قسمت دوم

6 نوامبر 15

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

خوب با جلسه دوم از آموزش AngularJS در خدمتتون هستم.

در قسمت قبل آخرین مبجثی که گفته شد بحث directives بود و گفتیم که directive ها به کمک برنامه سمت کلاینت می آیند و موجب ساده سازی و کوتاه شدن کد ها می شوند و گفتیم که این امر در AngularJS چه مزایا و گستردگی و قابلیت هایی دارد.

امروز در اولین بخش یک مثال دیگر از directive ها رو اوردم که در آن اطلاعاتی به صورت dummy را می خوانیم و در صفحه وب خود نمایش می دهیم:

 <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div> 

همانطور که در کد بالا ملاحظه می نمایید، در اطلاعات در دایرکتیو ng-init  و متغییر names قرار داده شده است و init نقش constractor را ایفا می کند، ضمن اینکه در دایرکتیو ng-repeat مانند for each جاوا اسکریپت این دیتا دامی رکورد به رکورد خوانده می شود و همانطور که در جلسه قبل گفته شده بود این اطلاعات در صفحه مطابق کد چاپ می شود.

حال به سراغ مبحث فیلتر ها در AngularJS میرویم. فیلتر ها در AngularJS  بسیار استفاده ساده و گستردگی بالایی دارند.

کد زیر مثالی از این استفاده فیلتر ها در AngularJS  می باشد:

<div ng-app="morkaApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country | lowercase }}
</li>
</ul>

</div> 

فیلتر orderby: این فیلتر order رکورد های درون متغییر پر شده با دیتا های پیش فرض را تنظیم می کند که به عنوان مثال در اینجا name می باشد.

filter: این فیلتر کار فیلتر یا در انتزاع بالا تر جستجو ی میان رکوردها را انجام می دهد.

ضمن اینکه uppercase در اینجا مانند جاوا اسکریپت کار بزرگ کردن حروف را انجام می دهد، همچنان که lowercase کار کوچک کردن حروف را انجام می دهد.

در ادامه وارد بخش Views، Controllers و Scope ها می شویم. دوستان همونطور که در ابتدای قسمت اول اشاره کرده بودم AngularJS یک زبان بر مبنای الگوی MVVM میباشد که برای آشنایی بیستر می توانید نگاهی به این لینک بیاندازید.

در MVVM یک بخش اساسی با عنوان ViewModel وجود دارد که وظیفه data binding را با تعامل با View بر عهده دارد.

Scope ها در AngularJs معادل ViewModel می باشد.

به عبارت دیگر همچون Viewmodel در MVVM رابطه بین View و کنترلر به عهده scope می باشد.

اساسا یکی از وظایف الگوهای طراحی همچون MVVM، MVP و معروف تر از همه MVC جدا سازی لاجیک برنامه از View می باشد.

جمله معروفی وجود دارد که می گوید view چیزی از Controller نمی داند و Controller هم صراحتا نمی خواهد چیزی از view بداند!

خوب یک مثال ساده از چگونگی کنترلر ها رادر زیر آورده ام در این مثال یک فانکشن که کار ایجاد دیتای ماهوی یک دیتاویور می باشد را انجام می دهد.

 angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

در کد بالا $scope d یکdependency injection می باشد که در angularjs به اینگونه تعریف می شود.

استفاده از کنترولر در حالی که با view همکاری می کند در کد زیر آورده شده است.

 <div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script> 

همانطور که ملاحظه می نمایید برای نمایش دیتا از دایرکتیوهای معرفی شده در جلسه قبل استفاده نموده ایم و همچنین دیتا بایندینگ هم با همان روش گفته شده در قبل انجام شده است.

امیدوارم مطالب ارائه شده در سیب فارسی مورد استفاده قرار گیرد در جلسه بعد بیشتر راجع به Controllerها و Scope ها صحبت خواهیم کرد.

لینک جلسه اول: آموزش Angular.js – قسمت اول

آموزش Angular.js – قسمت اول

27 اکتبر 15

قصد دارم در سیب فارسی چند پست مقدمه ای بر فریم ورک جاوا اسکریپتی و محبوب angular.js را به زبان فارسی نوشته و ارسال کنم. همانطور که گفتم آنچه نوشته خواهد شد تنها مقدمه ای بر angular.js خواهد بود و تصمیم فعلی من اینه که بین 3 تا 5 پست مطالبم و ارائه کنم با توجه به این موضوع قطعا مطالب بیشتر موضاعات essentials این framework javascript خواهد بود.

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

قطعا پست ها هم کوتاه خواهد بود. این مطلب را هم اضافه کنم ممکنه در آینده آموزش های دیگری هم ارائه کنم و تمام مطالب این آموزش تحت عنوان آموزش Angular.js دسته بندی خواهد شد. و احتمال اینکه پست ها بروزرسانی شود هم بسیار زیاد است. بریم سراغ قسمت اول؛

آموزش Angular.js – قسمت اول

angular یک فریم ورک جاوا اسکریپت متن یاز جاوا اسکریپتی است. که توسط گوگل توسعه و نگهداری شده است. این فریم ورک در دسته چارچوب های SPA-single page applications یا چارچوب های مناسب برای توسعه اپلیکیشن های تک صفحه ای می باشد. این فریم ورک جاوا اسکریپتی بسیار مناسب برای چارچوب های تست و توسعه منطبق بر  (model–view–controller (MVC و (model–view–viewmodel (MVVM می باشد.

ویژگی های AngularJS در این بخش feature های مختلف AngularJS را معرفی خواهم کرد. یکی از مواردی که هم مثال هایی در آموزش می نویسید و هم نمونه کارهای دیگر خاصه با این زبان آغاز می کنید مهم هست که مد نظر قرار دهید from scratch یا به عبارت دیگر از ابتدا و صفر شروع نکید و از نمونه کد های موجود استفاده کنید.

مورادی که در این بخش معرفی خواهم کرد  شامل Directives, Filters و Data Binding می شود ضمن اینکه Views, Controllers و Scope را نیز مورد بررسی قرار خواهیم داد.

ابتدا بگم که وقتی می گیم AngularJS زبانی برای SPA ها است یعنی چه. به عبارت دیگر اصلا SPA چیست. منظور از SPA این است که تمام سایت یا هر پروژه وب ما بروی یک صفحه قرار م یگیرد و ما چند صفحه نخواهیم داشت و محتوای View های مختلف روی یک همان یک صفحه ظاهر می شوند.

این موضوع مزایای بسیاری دارد و در pattern های مخلف به سرعت بالاتر در لود و موثر بودن زیر ساخت و موارد دیگر اشاره شده است. نگهداشت DOM و کنترل صفحات مختلف از جمله چلنج های SPA ها می باشد.

از سایت http://angularjs.org می توانید کتابخانه جاوااسکریپتی AngularJS رادانلود کنید. خوب در این قسمت import کردن کتابخانه دانلود شده به اولین برنامه تستی مان را نشان می دهیم:

<!DOCTYPE html>
<html lang="en" ng-app="samples">
<head>
 <title>AngularJS Morka example</title>
 <script src="angular.min.js"></script>
</head>
<body>
</body>

directives: directive در واقع مجموعه ای از میانبرها و روش هاست که به html برنامه کمکمم می کند، به عبارت دیگر موجب سهولت و ساده تر شدن Html کد های برنامه می شود.

<!DOCTYPE html>
<html lang="en" ng-app="samples">
<head>
 <title>AngularJS Morka example</title>
 <script src="angular.min.js"></script>
</head>

<body>

<div class="container">



Name: <input type="text" ng-model="firstName">



You wrote: {{ firstName }}


</div>

</body>

هر جایی که ما ng- دیدیم یعنی در آنجایک directive داریم. ضمن اینکه می توان دایرکتیو custom نیز ایجاد کرد.
در کد بالا ng-model=”firstName” مدل مربوط به کامپوننت را معرفی می کند به عبارتی آی دی این کامپوننت مشخص می شود واین {{ firstName }} عبارت کار data binding را انجام می دهد و هر آنچه در inputtext تایپ شو در پاراگراف تعریف شده نمایش داده می شود.
توجه کنید که ng-app می بایست حتما اضافه شود و scope برنامه شما را مشخص می کند در آینده خواهیم دید که از ng-app می توان روی div ها هم استفاده نمود و حتی چند scope را با چند ng-app مختلف در یک صفحه ایجاد نمود.
پس تا اینجای کار روی کدینگ سه قسمت در angular معرفی شد که شامل
Include the ng-app
Include the ng-model
Bind to that model
می شود.
در این قسمت ضمن معرفی AngularJS کتابخانه آن را نیز معرفی کردیم و با معرفی Directives اولین پروژه خود را بالا اوردیم.

پایان قسمت اول – باقی قسمت ها هم در  سیب فارسی دنبال کنید.