AngularJS Controllers

AngularJS بر حسب نوری کنترل داده ها از AngularJS را برنامه های کاربردی.

AngularJS بر حسب نوری اشیاء به طور منظم جاوا اسکریپت هستند.


AngularJS Controllers

از AngularJS برنامه های کاربردی توسط کنترل کنترل می شود.

رهنمود ng-controller برنامه تعریف می کند.

کنترل یک شی جاوا اسکریپت، جاوا اسکریپت ایجاد شده توسط یک سازنده شی استاندارد است.

AngularJS را به عنوان مثال

<div ng-app=”myApp” ng-controller=”myCtrl”>

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{firstName + ” ” + lastName}}

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.firstName = “John”;

    $scope.lastName = “Doe”;

});

</script>

خودت آن را امتحان کن “

توضیح برنامه:

این برنامه از AngularJS است NG-app= “از MyApp” تعریف شده است. نرم افزار قابل اجرا در داخل <div> باشد.

رهنمود ng-controller= “myCtrl” ویژگی یک بخشنامه از AngularJS است. این یک کنترل تعریف می کند.

تابع myCtrl یک تابع جاوا اسکریپت است.

AngularJS را به کنترل با یک شیء $ دامنه احضار کند.

در AngularJS، $ دامنه شی درخواست (صاحب متغیرهای نرم افزار و توابع) است.

کنترل دو ویژگی (متغیرها) در محدوده (FirstName و LastName) ایجاد می کند.

دستورات NG-مدل اتصال زمینه های ورودی به خواص کنترل (FirstName و LastName).


مواد و روش ها کنترل

نام خانوادگی و نام: مثال بالا یک شی کنترل با دو ویژگی را نشان داد.

کنترل همچنین می توانید روش (متغیرها به عنوان توابع) را داشته باشد:

AngularJS را به عنوان مثال

<div ng-app=”myApp” ng-controller=”personCtrl”>

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{fullName()}}

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘personCtrl’, function($scope) {

    $scope.firstName = “John”;

    $scope.lastName = “Doe”;

    $scope.fullName = function() {

        return $scope.firstName + ” ” + $scope.lastName;

    };

});

</script>

خودت آن را امتحان کن “


بر حسب نوری در فایل های خارجی

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

فقط این کد بین <script> به دستورات را به یک فایل خارجی به نام کپی personController.js :

AngularJS را به عنوان مثال

<div ng-app=”myApp” ng-controller=”personCtrl”>

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{fullName()}}

</div>

<script src=”personController.js”></script>

خودت آن را امتحان کن “


مثالی دیگر

برای مثال بعدی ما یک فایل جدید ایجاد کنترل:

angular.module(‘myApp’, []).controller(‘namesCtrl’, function($scope) {

    $scope.names = [

        {name:’Jani’,country:’Norway’},

        {name:’Hege’,country:’Sweden’},

        {name:’Kai’,country:’Denmark’}

    ];

});

فایل را ذخیره کنید به عنوان namesController.js :

و سپس با استفاده از فایل کنترل در یک برنامه:

AngularJS را به عنوان مثال

<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>

AngularJS اتصال داده ها

اطلاعات اتصال در AngularJS هماهنگ سازی بین مدل و نمایش است.


مدل داده

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

مثال

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.firstname = “John”;

    $scope.lastname = “Doe”;

});


HTML نمایش

ظرف HTML که در آن برنامه از AngularJS نمایش داده می شود است، از نظر نامیده می شود.

دیدگاه دسترسی به این مدل، و چندین راه برای نمایش داده ها مدل در نظر وجود دارد.

شما می توانید با استفاده از ng-bind بخشنامه، که innerHTML بطوری از این عنصر به اموال مدل مشخص شده متصل خواهد شد:

مثال

<p ng-bind=”firstname”></p>

خودت آن را امتحان کن “

شما همچنین می توانید دو آکولاد استفاده {{ }} {{ }} {{ }} را به نمایش محتوای از مدل:

مثال

<p>First name: {{firstname}}</p>

خودت آن را امتحان کن “

یا شما می توانید با استفاده از ng-model بخشنامه در HTML کنترل برای اتصال مدل به نمای.


ng-model بخشنامه

استفاده از ng-model بخشنامه برای اتصال به داده ها از مدل به نمایش در کنترل های HTML (ورودی، انتخاب، متنی)

مثال

<input ng-model=”firstname”>

خودت آن را امتحان کن “

ng-model بخشنامه دو طرفه اتصال بین مدل و نظر فراهم می کند.


binding دو طرفه

اطلاعات اتصال در AngularJS هماهنگ سازی بین مدل و نمایش است.

هنگامی که داده ها در مدل تغییر، از نظر نشان دهنده تغییر، و هنگامی که داده ها در تغییرات مشاهده، مدل به روز شده است و همچنین. این اتفاق می افتد، بلافاصله و به طور خودکار، که مطمئن شوید که مدل و دیدگاه است که در همه زمان ها به روز می کند.

مثال

<div ng-app=”myApp” ng-controller=”myCtrl”>

    Name: <input ng-model=”firstname”>

    <h1>{{firstname}}</h1>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.firstname = “John”;

    $scope.lastname = “Doe”;

});

</script>

خودت آن را امتحان کن “


AngularJS را کنترل

نرم افزار در AngularJS توسط کنترل کنترل می شود. خوانده شده در مورد کنترل در AngularJS بر حسب نوری فصل است.

از آنجا که از هماهنگ سازی فوری از مدل و مشاهده، کنترل را می توان به طور کامل از نظر جدا شده، و به سادگی بر روی داده های مدل تمرکز کنید. با تشکر از داده ها اتصال در AngularJSS، از نظر هر گونه تغییرات ساخته شده در کنترل را منعکس کند.

مثال

<div ng-app=”myApp” ng-controller=”myCtrl”>

    <h1 ng-click=”changeName()”>{{firstname}}</h1>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.firstname = “John”;

    $scope.changeName = function() {

        $scope.firstname = “Nelly”;

    }

});

</script>

خودت آن را امتحان کن “

 

AngularJS رهنمود ng-model

رهنمود ng-model ارزش کنترل های HTML (ورودی، انتخاب، متنی) به داده های نرم افزار متصل می شود.


رهنمود ng-model

با ng-model بخشنامه شما می توانید مقدار یک فیلد ورودی را به یک متغیر در AngularJS ایجاد متصل شوند.

مثال

<div ng-app=”myApp” ng-controller=”myCtrl”>

    Name: <input ng-model=”name”>

</div>

<script>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

    $scope.name = “John Doe”;

});

</script>

خودت آن را امتحان کن “


binding دو طرفه

اتصال به هر دو روش می رود. اگر کاربر تغییر مقدار در داخل فیلد ورودی، اموال AngularJS را نیز ارزش خود را تغییر خواهد کرد:

مثال

<div ng-app=”myApp” ng-controller=”myCtrl”>

    Name: <input ng-model=”name”>

    <h1>You entered: {{name}}</h1>

</div>

خودت آن را امتحان کن “


تایید اعتبار ورودی کاربر

ng-model دستور را می اعتبارسنجی نوع برای داده های برنامه (تعداد، ایمیل، مورد نیاز است) ارائه:

مثال

<form ng-app=”” name=”myForm”>

    Email:

    <input type=”email” name=”myAddress” ng-model=”text”>

    <span ng-show=”myForm.myAddress.$error.email”>Not a valid e-mail address</span>

</form>

خودت آن را امتحان کن “

در مثال بالا، طول نمایش داده خواهد شد تنها در صورتی که بیان در ng-show ویژگی گرداند true .

در صورتی که ملک در ng-model ویژگی وجود ندارد، از AngularJS یک برای شما ایجاد.


وضعیت برنامه

ng-model بخشنامه توانید وضعیت را برای داده های برنامه (نامعتبر، کثیف، لمس کرد، خطا) ارائه:

مثال

<form ng-app=”” name=”myForm” ng-init=”myText = ‘post@myweb.com'”>

    Email:

    <input type=”email” name=”myAddress” ng-model=”myText” required>

    <h1>Status</h1>

    {{myForm.myAddress.$valid}}

    {{myForm.myAddress.$dirty}}

    {{myForm.myAddress.$touched}}

</form>

خودت آن را امتحان کن “


کلاس های CSS

ng-model بخشنامه فراهم می کند کلاس های CSS برای عناصر HTML، بسته به وضعیت خود:

مثال

<style>

input.ng-invalid {

    background-color: lightblue;

}

</style>

<body>

<form ng-app=”” name=”myForm”>

    Enter your name:

    <input name=”myName” ng-model=”myText” required>

</form>

خودت آن را امتحان کن “

ng-model بخشنامه می افزاید: / حذف کلاس های زیر، با توجه به وضعیت این زمینه به شکل:

  • نانوگرم خالی
  • NG-نمی-خالی
  • NG-لمس
  • NG-دست نخورده
  • نانوگرم معتبر
  • NG-نامعتبر
  • NG-کثیف
  • نانوگرم در حال بررسی
  • NG-بکر

AngularJS بخشنامه

از AngularJS شما اجازه می دهد HTML گسترش با ویژگی های جدید به نام بخشنامه.

از AngularJS دارای مجموعه ای از ساخته شده است در دستورات که به برنامه های خود ارائه می دهد قابلیت.

AngularJS را نیز اجازه می دهد دستورات خود را تعریف می کنید.


از AngularJS بخشنامه

از AngularJS دستورات توسعه یافته ویژگی های HTML با پیشوند ng- .

ng-app بخشنامه یک برنامه AngularJS را مقدار دهی اولیه.

ng-init بخشنامه مقدار دهی اولیه اطلاعات نرم افزار.

ng-model بخشنامه ارزش کنترل های HTML (ورودی، انتخاب، متنی) به داده های نرم افزار متصل می شود.

مثال

<div ng-app=”” ng-init=”firstName=’John'”>

<p>Name: <input type=”text” ng-model=”firstName”></p>

<p>You wrote: {{ firstName }}</p>

</div>

خودت آن را امتحان کن “

ng-app بخشنامه همچنین از AngularJS که عنصر <div> «مالک» از برنامه از AngularJS است می گوید.


داده ها اتصال

{{ firstName }} بیان، در مثال بالا، یک از AngularJS داده ها اتصال بیان است.

اطلاعات اتصال در AngularJS متصل از AngularJS عبارت با AngularJS داده است.

{{ firstName }} با محدود ng-model="firstName" .

در مثال بعدی دو زمینه متن همراه با دو دستورالعمل NG-مدل محدود:

مثال

<div ng-app=”” ng-init=”quantity=1;price=5″>

Quantity: <input type=”number” ng-model=”quantity”>

Costs:    <input type=”number” ng-model=”price”>

Total in dollar: {{ quantity * price }}

</div>

خودت آن را امتحان کن “

با استفاده از ng-init است خیلی معمول نیست. شما خواهید آموخت که چگونه به مقداردهی اولیه داده در فصل مورد کنترل.


تکرار عناصر HTML

ng-repeat بخشنامه تکرار یک عنصر HTML:

مثال

<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”>

  <ul>

    <li ng-repeat=”x in names”>

      {{ x }}

    </li>

  </ul>

</div>

خودت آن را امتحان کن “

ng-repeat بخشنامه در واقع ازدیاد می گردد عناصر HTML یک بار برای هر آیتم را در یک مجموعه است.

ng-repeat بخشنامه مورد استفاده در آرایه ای از اشیاء:

مثال

<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>

خودت آن را امتحان کن “

از AngularJS مناسب برای CRUD پایگاه داده (ایجاد خوانده به روز رسانی حذف) برنامه های کاربردی است.
فقط تصور کنید اگر این اشیاء رکورد از پایگاه داده بودند.


رهنمود ng-app

ng-app بخشنامه عنصر ریشه یک برنامه AngularJS را تعریف می کند.

ng-app بخشنامه خودکار راه انداز (به طور خودکار مقداردهی اولیه) نرم افزار هنگامی که یک صفحه وب لود می شود.


رهنمود ng-init 

ng-init بخشنامه مقادیر اولیه برای یک برنامه کاربردی AngularJS را تعریف می کند.

به طور معمول، شما NG-init انجام استفاده نمی کند. شما یک کنترل کننده یا ماژول استفاده کنید.

شما بیشتر در مورد کنترل و ماژول های بعد یاد بگیرند.


رهنمود ng-model

ng-model بخشنامه ارزش کنترل های HTML (ورودی، انتخاب، متنی) به داده های نرم افزار متصل می شود.

ng-model بخشنامه همچنین می توانید:

  • فراهم می کند که اعتبار سنجی نوع برای داده های برنامه (تعداد، ایمیل، مورد نیاز).
  • فراهم می کند که وضعیت برای داده های برنامه (نامعتبر، کثیف، لمس کرد، خطا).
  • ارائه کلاس های CSS برای عناصر HTML.
  • عناصر HTML اتصال به فرم های HTML.

اطلاعات بیشتر در مورد ng-model بخشنامه در فصل بعد.


ایجاد جدید بخشنامه

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

دستورات جدیدی با استفاده از ایجاد .directive تابع.

به استناد بخشنامه جدید، یک عنصر HTML با نام همان برچسب بخشنامه جدید.

هنگام نامگذاری یک دستور، شما باید یک نام مورد شتر استفاده کنید، w3TestDirective ، اما زمانی که با استناد به آن، شما باید با استفاده از- نام از هم جدا، w3-test-directive :

مثال

<body ng-app=”myApp”>

<w3-test-directive></w3-test-directive>

<script>

var app = angular.module(“myApp”, []);

app.directive(“w3TestDirective”, function() {

    return {

        template : “<h1>Made by a directive!</h1>”

    };

});

</script>

</body>

خودت آن را امتحان کن “

شما می توانید یک دستور با استفاده از فراخوانی:

  • نام عنصر
  • صفت
  • کلاس
  • اظهار نظر

مثال های زیر تمام خواهد همان نتیجه را تولید:

نام عنصر

<w3-test-directive></w3-test-directive>

خودت آن را امتحان کن “

صفت

<div w3-test-directive></div>

خودت آن را امتحان کن “

کلاس

<div class=”w3-test-directive”></div>

خودت آن را امتحان کن “

اظهار نظر

<!– directive: w3-test-directive –>

خودت آن را امتحان کن “


محدودیت های

شما می توانید دستورات خود را محدود به تنها با برخی از روش استناد شده است.

مثال

با اضافه کردن یک restrict ملک با ارزش "A" ، دستور تنها می تواند با ویژگی استناد:

var app = angular.module(“myApp”, []);

app.directive(“w3TestDirective”, function() {

    return {

        restrict : “A”,

        template : “<h1>Made by a directive!</h1>”

    };

});

خودت آن را امتحان کن “

مقادیر محدود قانونی:

  • E برای نام عنصر
  • برای صفت
  • C برای کلاس
  • M برای نظر

به طور پیش فرض مقدار EA ، به این معنی که هر دو نام نامهای ویژگی و عنصر می تواند دستور احضار کند.

AngularJS ماژول

ماژول از AngularJS یک برنامه تعریف می کند.

ماژول یک ظرف برای بخش های مختلف یک نرم افزار است.

ماژول یک ظرف برای کنترل نرم افزار است.

بر حسب نوری همیشه به یک ماژول تعلق دارند.


ایجاد یک ماژول

یک ماژول است با استفاده از تابع AngularJS را ایجاد angular.module

<div ng-app=”myApp”>…</div>

<script>

var app = angular.module(“myApp”, []);

</script>

این “از MyApp” پارامتر به یک عنصر HTML است که در آن برنامه اجرا خواهد شد، اشاره دارد.

حالا شما می توانید کنترل، دستورات، فیلتر، و بیشتر به برنامه از AngularJS خود را اضافه کنید.


افزودن یک کنترلر

اضافه کردن یک کنترل به برنامه شما، و به کنترل با اشاره ng-controller بخشنامه:

مثال

<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>

خودت آن را امتحان کن “

شما بیشتر در مورد کنترل بعد در این آموزش یاد خواهید گرفت.


اضافه کردن یک دستورالعمل

از AngularJS دارای مجموعه ای از دستورات ساخته شده است که در آن شما می توانید استفاده کنید برای اضافه کردن قابلیت به درخواست شما.

برای یک مرجع کامل، بازدید ما از AngularJS بخشنامه مرجع .

علاوه بر این شما می توانید ماژول به اضافه کردن دستورات خود را به برنامه های خود استفاده کنید:

مثال

<div ng-app=”myApp” w3-test-directive></div>

<script>

var app = angular.module(“myApp”, []);

app.directive(“w3TestDirective”, function() {

    return {

        template : “I was made in a directive constructor!”

    };

});

</script>

خودت آن را امتحان کن “

شما بیشتر در مورد دستورات بعد در این آموزش یاد بگیرند.


کنترل و در فایل

این معمول است در AngularJS برنامه های کاربردی برای قرار دادن ماژول و کنترل در فایل های جاوا اسکریپت.

در این مثال، “myApp.js” شامل تعریف ماژول نرم افزار، در حالی که “myCtrl.js” شامل کنترل:

مثال

<!DOCTYPE html>

<html>

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

<body>

<div ng-app=” myApp ” ng-controller=” myCtrl “>

{{ firstName + ” ” + lastName }}

</div>

<script src=” myApp.js “></script>

<script src=” myCtrl.js “></script>

</body>

</html>

خودت آن را امتحان کن “

myApp.js

var app = angular.module( “myApp” , []);

پارامتر [] در تعریف ماژول می توان مورد استفاده برای تعریف ماژول وابسته است.

بدون پارامتر []، شما در حال ایجاد یک ماژول جدید، اما بازیابی یک موجود.

myCtrl.js

app.controller( “myCtrl” , function($scope) {

    $scope.firstName = “John”;

    $scope.lastName= “Doe”;

});


توابع می توانید جهانی فضای نام آلوده

توابع جهانی باید در جاوا اسکریپت اجتناب شود. آنها به راحتی می توانید رونویسی می شود و یا نابود شده توسط اسکریپت های دیگر.

ANGULARJS ماژول را کاهش می دهد این مشکل، با نگه داشتن همه توابع محلی به ماژول.


هنگامی که برای بارگذاری کتابخانه

در حالی که آن را در برنامه های کاربردی HTML مشترک به جای اسکریپت در پایان است <body> عنصر، توصیه می شود که شما در کتابخانه AngularJS را بارگذاری یا در <head> و یا در آغاز از <body> .

دلیل این است که تماس به angular.module تنها می توانید وارد شده پس از کتابخانه است پر شده است.

مثال

<!DOCTYPE html>

<html>

<body>

<script src=”https://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>

خودت آن را امتحان کن “

 

AngularJS عبارات

ANGULARJS عبارت می توان داخل دو آکولاد نوشته: {{ expression }} .

ANGULARJS عبارت همچنین می توانید در داخل یک بخشنامه نوشته شود: ng-bind=" expression " .

AngularJS را خواهد بیان حل و فصل، و بازگشت به نتیجه دقیقا همان جایی که بیان نوشته شده است.

ANGULARJS عبارت بسیار شبیه به عبارت جاوا اسکریپت هستند: آنها می تواند شامل لیترال، اپراتورها، و متغیر.

نمونه {{5 + 5}} یا {{نام + “” + نام خانوادگی}}

مثال

<!DOCTYPE html>

<html>

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

<body>

<div ng-app=””>

  <p>My first expression: {{ 5 + 5 }}</p>

</div>

</body>

</html>

خودت آن را امتحان کن “

اگر شما در حذف ng-app بخشنامه، HTML را به بیان نمایش به عنوان آن است، بدون حل آن:

مثال

<!DOCTYPE html>

<html>

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

<body>

<div>

  <p>My first expression: {{ 5 + 5 }}</p>

</div>

</body>

</html>

خودت آن را امتحان کن “

شما می توانید عبارات ارسال هر کجا که دوست دارید، از AngularJS به سادگی حل خواهد بیان و بازگشت به نتیجه.

به عنوان مثال: اجازه دهید از AngularJS ارزش خواص CSS را تغییر دهید.

رنگ جعبه ورودی زیر را تغییر دهید، با تغییر ارزش خود را:

مثال

<div ng-app=”” ng-init=”myCol=’lightblue'”>

<input style=”background-color:{{myCol}}” ng-model=”myCol” value=”{{myCol}}”>

</div>

خودت آن را امتحان کن “


اعداد از AngularJS

از AngularJS اعداد مانند اعداد جاوا اسکریپت عبارتند از:

مثال

<div ng-app=”” ng-init=”quantity=1;cost=5″>

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

خودت آن را امتحان کن “

به عنوان مثال با استفاده از همان ng-bind :

مثال

<div ng-app=”” ng-init=”quantity=1;cost=5″>

<p>Total in dollar: <span ng-bind=”quantity * cost”></span></p>

</div>

خودت آن را امتحان کن “

با استفاده از ng-init است خیلی معمول نیست. شما یک راه بهتر برای مقداردهی اولیه داده در فصل مورد کنترل یاد بگیرند.


از AngularJS رشته

از AngularJS رشته مانند رشته جاوا اسکریپت عبارتند از:

مثال

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe'”>

<p>The name is {{ firstName + ” ” + lastName }}</p>

</div>

خودت آن را امتحان کن “

به عنوان مثال با استفاده از همان ng-bind :

مثال

<div ng-app=”” ng-init=”firstName=’John’;lastName=’Doe'”>

<p>The name is <span ng-bind=”firstName + ‘ ‘ + lastName”></span></p>

</div>

خودت آن را امتحان کن “


اشیاء از AngularJS

از AngularJS اشیاء مانند اشیاء جاوا اسکریپت عبارتند از:

مثال

<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”>

<p>The name is {{ person.lastName }}</p>

</div>

خودت آن را امتحان کن “

به عنوان مثال با استفاده از همان ng-bind :

مثال

<div ng-app=”” ng-init=”person={firstName:’John’,lastName:’Doe’}”>

<p>The name is <span ng-bind=”person.lastName”></span></p>

</div>

خودت آن را امتحان کن “


از AngularJS آرایه

از AngularJS آرایه مانند آرایه جاوا اسکریپت عبارتند از:

مثال

<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>

<p>The third result is {{ points[2] }}</p>

</div>

خودت آن را امتحان کن “

به عنوان مثال با استفاده از همان ng-bind :

مثال

<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>

<p>The third result is <span ng-bind=”points[2]”></span></p>

</div>

خودت آن را امتحان کن “


از AngularJS عبارات در مقابل جاوا اسکریپت عبارات

مانند عبارت جاوا اسکریپت، از AngularJS عبارت می تواند شامل لیترال، اپراتورها، و متغیر.

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

ANGULARJS عبارت انجام شرطی، حلقه ها، و استثنا را پشتیبانی نمی کند، در حالی که عبارت جاوا اسکریپت انجام.

از AngularJS عبارت حمایت فیلتر، در حالی که عبارت جاوا اسکریپت نیست.

مقدمه

ز AngularJS یک چارچوب جاوا اسکریپت است. می توان آن را به یک صفحه HTML با یک تگ <script> اضافه شده است.

AngularJS را گسترش ویژگی های HTML با بخشنامه ها، و متصل به داده های HTML با عبارات.


از AngularJS چارچوب جاوا اسکریپت است

از AngularJS یک چارچوب جاوا اسکریپت است. این یک کتابخانه JavaScript نوشته شده است.

AngularJS را به عنوان یک فایل جاوا اسکریپت توزیع شده، و می تواند به یک صفحه وب با برچسب اسکریپت اضافه شده:

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

AngularJS را تمدید HTML

AngularJS را گسترش HTML با NG-دستورات.

رهنمود ng-برنامه یک برنامه کاربردی AngularJS را تعریف می کند.

رهنمود ng-مدل ارزش کنترل های HTML (ورودی، انتخاب، متنی) به داده های نرم افزار متصل می شود.

رهنمود ng-اتصال متصل داده های برنامه با نمای HTML است.

AngularJS را به عنوان مثال

<!DOCTYPE html>

<html>

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

<body>

<div ng-app=””>

<p>Name: <input type=”text” ng-model=”name”></p>

<p ng-bind=”name”></p>

</div>

</body>

</html>

خودت آن را امتحان کن “

مثال توضیح داد:

AngularJS را شروع می شود به طور خودکار زمانی صفحه وب لود شده است.

رهنمود ng-برنامه AngularJS را که عنصر <div> «مالک» از یک نرم افزار از AngularJS است می گوید.

رهنمود ng-مدل، مقدار فیلد ورودی به نرم افزار از نام متغیر متصل می شود.

رهنمود ng-اتصال متصل innerHTML بطوری از عنصر <p> برای برنامه نام متغیر.


از AngularJS بخشنامه

همانطور که شما در حال حاضر دیده می شود، از AngularJS دستورات هستند ویژگیها HTML با یک پیشوند نانوگرم.

رهنمود ng-init انجام دهی اولیه متغیر برنامه از AngularJS.

AngularJS را به عنوان مثال

<div ng-app=”” ng-init=”firstName=’John'”>

<p>The name is <span ng-bind=”firstName”></span></p>

</div>

خودت آن را امتحان کن “

روش دیگر با HTML غیر معتبر:

AngularJS را به عنوان مثال

<div data-ng-app=”” data-ng-init=”firstName=’John'”>

<p>The name is <span data-ng-bind=”firstName”></span></p>

</div>

خودت آن را امتحان کن “

شما می توانید داده-ng-، استفاده، به جای ng- اگر می خواهید مطمئن صفحه HTML خود را معتبر است.

شما یک مقدار زیادی بیشتر در مورد دستورات بعد در این آموزش یاد بگیرند.


از AngularJS عبارات

از AngularJS عبارات داخل دو آکولاد نوشته: {{}} بیان.

AngularJS را خواهد “خروجی” داده دقیقا همان جایی که بیان نوشته شده است:

AngularJS را به عنوان مثال

<!DOCTYPE html>

<html>

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

<body>

<div ng-app=””>

<p>My first expression: {{ 5 + 5 }}</p>

</div>

</body>

</html>

خودت آن را امتحان کن “

از AngularJS عبارت متصل AngularJS را داده به HTML به همان شیوه به عنوان رهنمود ng-اتصال.

AngularJS را به عنوان مثال

<!DOCTYPE html>

<html>

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

<body>

<div ng-app=””>

<p>Name: <input type=”text” ng-model=”name”></p>

<p>{{name}}</p>

</div>

</body>

</html>

خودت آن را امتحان کن “

شما بیشتر در مورد عبارت بعد در این آموزش یاد بگیرند.


ANGULARJS نرم افزار

از AngularJS ماژول ها از AngularJS برنامه های کاربردی.

AngularJS بر حسب نوری کنترل از AngularJS برنامه های کاربردی.

رهنمود ng-برنامه تعریف نرم افزار، رهنمود ng-کنترل کنترل تعریف می کند.

AngularJS را به عنوان مثال

<div ng-app=” myApp ” ng-controller=” myCtrl “>

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{firstName + ” ” + lastName}}

</div>

<script>

var app = angular.module(‘ myApp ‘, []);

app.controller(‘ myCtrl ‘, function($scope) {

$scope.firstName= “John”;

$scope.lastName= “Doe”;

});

</script>

خودت آن را امتحان کن “

از AngularJS ماژول برنامه های کاربردی تعریف:

angularjs ماژول

var app = angular.module(‘myApp’, []);

ANGULARJS کنترل برنامه های کاربردی کنترل:

AngularJS را کنترل

app.controller(‘myCtrl’, function($scope) {

$scope.firstName= “John”;

$scope.lastName= “Doe”;

});

خانه

 

AngularJS را به عنوان مثالAngular

 

 

 

 

 

 

<!DOCTYPE html>
<html lang=”en-US”>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>

<div ng-app=””>
<p>Name : <input type=”text” ng-model=”name”></p>
<h1>Hello {{name}}</h1>
</div>

</body>
</html>

Try it Yourself »

پیش نیاز هایی که باید بدانید

قبل از اینکه Angular Js را یاد بگیرید باید به موارد زیر مسلط باشد:

  • HTML
  • CSS
  • JavaScript

 

قسمت اول – اضافه کردن AngularJS در پروژه

AngularJS یک فریم ورک جاوااسکریپ است. در این فریم ورک Attribute های HTML با Directive ها گسترش میابند و داده ها با استفاده از Expression ها به HTML همبسته میشوند.

جهت اضافه کردن این فریم ورک به پروژه خود از تگ زیر استفاده میکنیم:

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>