Муҳаммад ал-хоразмий номидаги тошкент ахборот технологиялари университети нурафшон филиали ахборот технологиялари кафедраси

Download 0.54 Mb.

bet	2/2
Sana	13.04.2023
Hajmi	0.54 Mb.
	#1351521

1 2

Bog'liq
uvX5RjQO0IVjMSmOz5S2adl9uHuT7zgOJ9a7Gv8E

ng-app: Ушбу директива AngularJS

AngularJS да асосий директивалар
7
ва HTML ни
боғлайди
ng-model: Ушбу директива AngularJS ва HTML
киритиш элементларини (input, select, textarea) боғлайди
ng-bind: Ушбу директива AngularJS даги дастур
маълумотларини HTML теглари билан боғлайди

AngularJS да биринчи иловани яратиш

1-қадам

Фреймворкни улаш:

2-қадам

AngularJS иловаси учун ng-app директивани белгилаш:
...

3-қадам

Ng-model директиваси орқали модел номини аниқлаш:
Enter your Name:

model="name">

4-қадам

ng-bind директиваси орқали юқоридаги model қийматини боғлаш:

Hello !

AngularJS да биринчи иловани яратиш

ng-app="">
Enter your Name: ng-model="name">
Hello ng-bind="name">!

ng-app="" ng-init="names=['Jani','Hege','Kai']">
Looping with ng-repeat:

ng-repeat="x in names">
{{ x }}

ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
Looping with objects:

ng-repeat="x in names">
{{ x.name + ', ' + x.country }}

ng-app>
My first expression: {{ 5 + 15 }}

Change the value of the input field:

ng-app="" ng- init="quantity=1;cost=5"
>
Total in dollar: {{
quantity * cost }}

ng-app="" ng-
init="quantity=1;cost=5"
Total in dollar:
ng-bind="quantity
* cost">

ng-app="" ng- init="firstName='John';las tName='Doe'">
The full name is: {{ firstName + " " + lastName
}}

ng-app="" ng- init="firstName='John';las tName='Doe'">

The full name is: ng-bind="firstName + ' ' + lastName">

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}">

The name is {{ person.lastName }}

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}">
The name is ng- bind="person.lastName">>

ng-app="" ng- init="points=[1,15,19,2,40]">

The third result is {{ points[2] }}

ng-app="" ng-

init="points=[1,15,19,2,40]">

The third result is ng-bind= "points[2]">

ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}

ng-app="myApp" w3-test-directive>

ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}

The name is {{ lastName | uppercase }}

The name is {{ firstName | lowercase }}

Ёки ном билан ngAnimate модулига мурожаат қилишингиз мумкин:

NgAnimate вазифаси нима?

37
NgAnimate модули class ларни қўшиш, олиб ташлаш
вазифасини бажаради.
NgAnimate модули HTML элементларни ҳаракатлантирмайди, лекин HTML элементларни яшириш ёки намойиш қилиш каби ҳодисаларни
амалга оширади

AngularJS да анимациялар

Angular Js да синфларни қўшиш ёки ўчириш вазифасини бажарувчи директивалар қўйидагилар:
ng-show	ng-hide
ng-class	ng-view
ng-include	ng-repeat
ng-if	ng-switch

AngularJS да анимациялар

Hide the DIV:

g-hide="myCheck">

Hide the DIV:

You entered: {{firstname}}

TUIT

Dekanat

Talaba

Select a topic:

TUIT

Dekanat

when="Talaba">

Talaba

The input's valid state is:

Try leaving the first input field blank:

Download 0.54 Mb.

Do'stlaringiz bilan baham:

1 2

Муҳаммад ал-хоразмий номидаги тошкент ахборот технологиялари университети нурафшон филиали ахборот технологиялари кафедраси

ng-app: Ушбу директива AngularJS

AngularJS да биринчи иловани яратиш

AngularJS да биринчи иловани яратиш

ng-app="" ng- init="firstName='John';las tName='Doe'">

The full name is: ng-bind="firstName + ' ' + lastName">

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}">

The name is {{ person.lastName }}

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}">
The name is ng- bind="person.lastName">>

ng-app="" ng- init="points=[1,15,19,2,40]">

The third result is {{ points[2] }}

ng-app="" ng-

init="points=[1,15,19,2,40]">

The third result is ng-bind= "points[2]">

NgAnimate вазифаси нима?

AngularJS да анимациялар

AngularJS да анимациялар

Hide the DIV:

Hide the DIV:

You entered: {{firstname}}

TUIT

TUIT

Dekanat

Talaba

TUIT

Dekanat

Talaba

{{myForm.myInput.$valid}}

{{myForm.myInput.$valid}}

Муҳаммад ал-хоразмий номидаги тошкент ахборот технологиялари университети нурафшон филиали ахборот технологиялари кафедраси

ng-app: Ушбу директива AngularJS

AngularJS да биринчи иловани яратиш

AngularJS да биринчи иловани яратиш

ng-app="" ng- init="firstName='John';las tName='Doe'">

The full name is: ng-bind="firstName + ' ' + lastName">

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}">

The name is {{ person.lastName }}

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}"> The name is ng- bind="person.lastName">>

ng-app="" ng- init="points=[1,15,19,2,40]">

The third result is {{ points[2] }}

ng-app="" ng-

init="points=[1,15,19,2,40]">

The third result is ng-bind= "points[2]">

NgAnimate вазифаси нима?

AngularJS да анимациялар

AngularJS да анимациялар

Hide the DIV:

Hide the DIV:

You entered: {{firstname}}

TUIT

TUIT

Dekanat

Talaba

TUIT

Dekanat

Talaba

{{myForm.myInput.$valid}}

{{myForm.myInput.$valid}}

ng-app="" ng- init="person={firstName:'John ',lastName:'Doe'}">
The name is ng- bind="person.lastName">>