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

آموزش AngularJS و W3.CSS

دوره آموزشی AngularJS

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

AngularJS و W3.CSS

شما می توانید به آسانی از w3.css و AngularJS با هم استفاده کنید. در این مقاله قصد داریم نحوه انجام این کار را به شما آموزش دهیم.

W3.CSS

برای آنکه فایل W3.CSS شما با برنامه کاربردی AngularJS شما همراه شود باید خط زیر را به قسمت head خود اضافه کنید.

 

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

 

در زیر یک مثال HTML کامل را با استفاده از AngularJS و کلاس  w3.css را توضیح می دهیم.

کد HTML

 

نمونه یک




    
    
    


    

Users

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

Create New User:

Edit User:





امتحان کنید

 

توضیح Directiveهای استفاده شده در مثال بالا

AngularJS Directive

توضیحات

<body ng-app

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

<body ng-controller

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

<tr ng-repeat

به ازای هر کاربر, یک> <tr در کاربرها تکرار می کند.

<button ng-click

فراخوانی تابع editUser() وقتی> <button کلیک می شود.

<h3 ng-show

هرگاه edit=true باشد,<h3>ها را نمایش می دهد.

<h3 ng-hide

هرگاه hideform=trueفرم و وقتی edit=true باشد <h3> را مخفی می کند.

<input ng-model

المان> <input را به برنامه کاربردی متصل می کند.

<button ng-disabled

اگر خطایی رخ دهد و یا incomplete=true باشد المان <button> را غیر فعال می کند

 


توصیف کلاس های W3.CSS

Element

Class

توضیحات

<div>

w3-container

محتوای Container

<table>

w3-table

جدول

<table>

w3-bordered

حاشیه جدول

<table>

w3-striped

جدول راه راه

<button>

w3-btn

کلید

<button>

w3-green

کلید سبز رنگ

<button>

w3-ripple

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

<input>

w3-input

مقدار ورودی

<input>

w3-border

لبه در مقدار ورودی

 

کد JavaScript

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.hideform = true;

       $scope.editUser = function (id) {

           $scope.hideform = false;

           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;

           }

       };

   });

توضیح کدهای Java Script

خاصیت Scope

علت استفاده

$scope.fName

نام کاربر

$scope.lName

نام خانوادگی کاربر

$scope.passw1

پسورد 1

$scope.passw2

پسورد 2

$scope.users

آرایه ای از کاربران

$scope.edit

هرگاه کاربر روی کلید Creat User کلیک کند مقدار آن true می شود.

$scope.hideform

هرگاه کاربر روی کلید Edit کلیک کند مقدار آن true می شود.

$scope.error

هرگاه passw1 و passw2 یکسان نباشند مقدار آن true می شود.

$scope.incomplete

هرگاه مقداری خالی باشد(length=0) مقدار آن true می شود.

$scope.editUser

مجموعه از متغیرهای مدل

$scope.$watch

متغیرهای مدل Watch

$scope.test

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

 

 

  • 1266
  •    1254
  • تاریخ ارسال :   1394/12/19

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

ارسال

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

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