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

دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

نویسنده اسماعیل شیدایی

یک شنبه 27 مهر 1393 - 7:33

دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

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

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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 وجود دارد.

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

مشاهده تمامی آموزش های دوره 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 وجود دارد.

HTML CODE

<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body ng-controller="userController">
<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
  <span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>

<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">
<div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
  </div>
</div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
  <span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>

<script src = "myUsers.js"></script>
</body>
</html>>

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

رهنمود AngularJS	توضیح
<html ng-app	Defines an (unnamed) application for the <html> element
<body ng-controller	Defines a controller for the <body> element
<tr ng-repeat	Repeats the <tr> element for each user in users
<button ng-click	Invoke the function editUser() when the <button> element is clicked
<h3 ng-show	Show the <h3>s element if edit = true
<h3 ng-hide	Hide the <h3> element if edit = true
<input ng-model	Bind the <input> element to the application
<button ng-disabled	Disables the <button> element if error or incomplete = true

Element	Bootstrap Class	Defines
<div>	container	A content container
<table>	table	A table
<table>	table-striped	A striped table
<button>	btn	A button
<button>	btn-success	A success button
<span>	glyphicon	A glyph icon
<span>	glyphicon-pencil	A pencil icon
<span>	glyphicon-user	A user icon
<span>	glyphicon-save	A save icon
<form>	form-horizontal	A horizontal form
<div>	form-group	A form group
<label>	control-label	A control label
<label>	col-sm-2	A 2 columns span
<div>	col-sm-10	A 10 columns span

Scope Properties	Used for
$scope.fName	Model variable (user first name)
$scope.lName	Model variable (user last name)
$scope.passw1	Model variable (user password 1)
$scope.passw2	Model variable (user password 2)
$scope.users	Model variable (array of users)
$scope.edit	Set to true when user clicks on create user.
$scope.error	Set to true if passw1 not equal passw2
$scope.incomplete	Set to true if any field is empty (length = 0)
$scope.editUser	Sets model variables
$scope.watch	Watches model variables
$scope.test	Tests model variables for errors and incompleteness

دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

صفحه اصلی / ABLY مقالات و مطالب مجموعه / دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

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

آموزش AngularJS

AngularJS and Twitter Bootstrap

Bootstrap

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

آموزش AngularJS

AngularJS and Twitter Bootstrap

Bootstrap

HTML CODE

دسترسی سریع

تماس با ما

تماس با ما

0912 097 5516 :شماره تماس

0713 625 1757 :شماره تماس

Users

Create New User:

Edit User:

s element if edit = true

element if edit = true element to the application

دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

صفحه اصلی / ABLY مقالات و مطالب مجموعه / دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

دوره آموزشی AngularJS به زبان فارسی - بخش چهاردهم

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

آموزش AngularJS

AngularJS and Twitter Bootstrap

Bootstrap

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

آموزش AngularJS

AngularJS and Twitter Bootstrap

Bootstrap

HTML CODE

JavaScript Code

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

نظرات یا سوالات خودرا با ما درمیان بگذارید cancel reply

دریافت آخرین مطالب

0912 097 5516 :شماره تماس

0713 625 1757 :شماره تماس