آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش AngularJS و Twitter Bootstrap

دوره آموزش SPA

رمز فایل :tahlildadeh.com


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

 AngularJS و Twitter Bootstrap

Bootstrap یک صفحه ی سبک دهی (style sheet) پرطرفدار است. مقاله ی حاضر نحوه ی استفاده از angular به همراه bootstrap را به شما آموزش می دهد.

BootStrap

برای اضافه کردن bootstrap به برنامه ی AngularJS، کد زیر را به بخش head از صفحه ی HTML خود، ضمیمه کنید:

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

در زیر یک مثال HTML کامل وجود دارد که در آن تمام دستورات AngularJS و BootStrap شرح داده شده است:

کد HTML

نمونه یک

 




Users

Edit First Name Last Name
{{ user.fName }} {{ user.lName }}


Create New User:

Edit User:


امتحان کنید

شرح دستورات بکار رفته در نمونه ی فوق

دستور AngularJS

شرح

body ng-app>

یک برنامه برای المان <body> تعریف می کند.

body ng-controller>

یک کنترلگر برای المان <body> تعریف می کند.

tr ng-repeat>

به ازای هر user در users عنصر <tr> را تکرار می کند.

button ng-click>

هنگامی که بر روی عنصر <button> کلیک می شود، تابع ()editUser صدا زده می شود.

h3 ng-show>

نمایان کردن عنصر <h3> در صورتی که edit=true باشد.

h3 ng-hide>

پنهان کردن المان <h3> در صورتی که edit مقدار true را داشته باشد.

input ng-model>

این دستور المان <input> را به برنامه ی مورد نظر bind می کند.

button ng-disabled>

چنانچه error یا incomplete دارای مقدار true باشد، المان <button> را غیر فعال می کند.

 

تشریح کلاس های bootsrap

المان

کلاس مربوطه

شرح

<div>

container

یک ظرف یا نگهدارنده ی محتوا تعریف می کند.

<table>

table

یک جدول تعریف می کند.

<table>

table-striped

یک جدول راه راه تعریف می کند.

<button>

btn

یک دکمه تعریف می کند.

<button>

btn-success

یک دکمه ی موفقیت تعریف می کند.

<span>

glyphicon

یک آیکن نمادین (glyph) تعریف می کند.

<span>

glyphicon-pencil

یک آیکن مداد تعریف می کند.

<span>

glyphicon-user

یک آیکن کاربر تعریف می کند.

<span>

glyphicon-save

یک آیکن ذخیره تعریف می کند.

<form>

form-horizontal

یک فرم افقی تعریف می کند.

<div>

form-group

یک گروه فرم تعریف می کند.

<label>

control-label

یک control label تعریف می کند.

<label>

col-sm-2

یک span دو ستونه مشخص می کند.

<div>

col-sm-10

یک span ده ستونه تعریف می نماید.

 

کد جاوا اسکریپت

myUsers.js

 

angular.module('myApp', []).controller('userCtrl', function ($scope) {

    $scope.fName = '';

    $scope.lName = '';

    $scope.passw1 = '';

    $scope.passw2 = '';

    $scope.users = [

    { id: 1, fName: 'Hege', lName: "Pege" },

    { id: 2, fName: 'Kim', lName: "Pim" },

    { id: 3, fName: 'Sal', lName: "Smith" },

    { id: 4, fName: 'Jack', lName: "Jones" },

    { id: 5, fName: 'John', lName: "Doe" },

    { id: 6, fName: 'Peter', lName: "Pan" }

    ];

    $scope.edit = true;

    $scope.error = false;

    $scope.incomplete = false;

    $scope.editUser = function (id) {

        if (id == 'new') {

            $scope.edit = true;

            $scope.incomplete = true;

            $scope.fName = '';

            $scope.lName = '';

        } else {

            $scope.edit = false;

            $scope.fName = $scope.users[id - 1].fName;

            $scope.lName = $scope.users[id - 1].lName;

        }

    };

    $scope.$watch('passw1', function () { $scope.test(); });

    $scope.$watch('passw2', function () { $scope.test(); });

    $scope.$watch('fName', function () { $scope.test(); });

    $scope.$watch('lName', function () { $scope.test(); });

    $scope.test = function () {

        if ($scope.passw1 !== $scope.passw2) {

            $scope.error = true;

        } else {

            $scope.error = false;

        }

        $scope.incomplete = false;

        if ($scope.edit && (!$scope.fName.length ||

        !$scope.lName.length ||

        !$scope.passw1.length || !$scope.passw2.length)) {

            $scope.incomplete = true;

        }

    };

});

 

شرح کد جاوا اسکریپت

Property های (خواص) شی scope

کاربرد

scope.fName$

متغیر model (نام کاربر).

scope.lName$

متغیر model (نام خانوادگی کاربر).

scope.passw1

متغیر model(رمز عبور کاربر 1).

scope.passw2

متغیر model(رمز عبور کاربر 2).

scope.users$

متغیر model(مجموعه یا آرایه ای از  کاربران).

scope.edit$

زمانی که کاربر بر روی create user کلیک می کند، روی true تنظیم می شود.

scope.error$

در صورتی که passw1 برابر با passw2 نباشد، روی مقدار true تنظیم می شود.

scope.incomplete$

در صورتی که فیلدی تهی باشد روی مقدار true تنظیم می شود(hength=0).

scope.editUser$

متغیرهای model را مقداردهی (set) می کند.

scope.watch$

بر متغیرهای model نظارت می کند.

scope.test$

متغیرهای مدل را از نظر خطا یا ناکامل بودن مورد بررسی قرار می دهد.

 

  • 1352
  •    1136
  • تاریخ ارسال :   1394/09/17

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .