سیب فارسی

شب و روزنوشته های من | داستان سیبی که هر روز به زمین می خورد!
آموزش 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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *