Маърузачи: техника фанлари бўйича фалсафа доктори, Маҳманов Ориф Қудратович

Angular JS га кириш. Анимация ва формалар 

билан ишлаш 

Мултимедиа технологиялари кафедраси 

МУҲАММАД  АЛ-ХОРАЗМИЙ НОМИДАГИ  

ТОШКЕНТ АХБОРОТ ТЕХНОЛОГИЯЛАРИ 

УНИВЕРСИТЕТИ  

Маърузачи:  техника фанлари бўйича фалсафа доктори,  

Маҳманов Ориф Қудратович 

Режа: 

1. AngularJS га кириш 

2. AngularJS дан фойдаланиш усуллари 

3. AngularJS да директивалар 

4. AngularJS да биринчи дастур 

5. AngularJS да ифодалар 

6. AngularJS да модуллар 

2 

AngularJS га кириш 

3 

 

AngularJS  –  очиқ  кодли,  фойдаланиш  текин  бўлган  JavaScript 

фреймворк ҳисобланади 

AngularJS 1.0 версияси 2012 йилда чиқарилган. 

AngularJS    ни  яратиш  билан  Google  компанияси  ходими  Мишко 

Хевери  2009 йилда иш бошлаган. 

AngularJS    лойиҳаси  ҳозирда  Google  компанияси  томонидан  қўллаб-

қуватланиб келинади. 

AngularJS га кириш 

4 

 

AngularJS  дан фойдаланиш бўйича йўриқномалари яхши ёзилган. 

AngularJS    -  Single  Page  Application(SPA)  лойиҳаларда  кенг 

қўлланилади 

AngularJS    -  HTML  DOM  ни  қўшимча  атрибутлар  билан 

кенгайтиради ва фойдаланувчи ҳаракатларини янада сезгир қилади  

AngularJS дан фойдаланиш усуллари 

5 

• 

 

 

  

https://angularjs.org/ сайтидан AngularJS кутубхонасини юклаб олиш; 

•  

 

 

  

Googleнинг CDN (Content Delivery Network) идан AngularJS 

кутубхонасини кўрсатиш 

AngularJS да директивалар 

6 

 

AngularJS  - HTMLни директивалар деб номланган 

янги атрибутутлар орқали кенгайтиришга имкон 

беради 

AngularJS  кутубхонасида  дастурда фойдаланиш учун 

тайёр директивалар мавжуд 

AngularJS 

да 

янги 

директива 

эълон 

қилиб 

фойдаланиш мумкин 

AngularJS да асосий директивалар 

7 

 

ng-app:

  Ушбу  директива  AngularJS    ва  HTML  ни 

боғлайди   

ng-model:

  Ушбу  директива  AngularJS  ва  HTML 

киритиш элементларини (input, select, textarea) боғлайди  

ng-bind:

  Ушбу  директива  AngularJS  даги  дастур 

маълумотларини HTML теглари билан боғлайди   

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

8 

1-қадам 

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

• 

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/a

ngular.min.js">  

2-қадам 

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

• ...

 

3-қадам 

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

• 
Enter your Name:

model="name">
 

4-қадам 

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

• 
Hello !

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

9 

 

 

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angula

r.min.js"> 

 


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

="myCol='blue'"> 

 


ng-

model

="myCol"> 

 

 

 

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 модулига мурожаат қилишингиз мумкин: 

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

37 

 

NgAnimate  модули  class  ларни  қўшиш,  олиб  ташлаш 

вазифасини бажаради. 

NgAnimate 

модули 

HTML 

элементларни 

ҳаракатлантирмайди,  лекин  HTML  элементларни 

яшириш  ёки  намойиш  қилиш  каби  ҳодисаларни 

амалга оширади 

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

38 

Angular Js да синфларни қўшиш ёки ўчириш вазифасини 

бажарувчи директивалар қўйидагилар: 

ng-show 

ng-hide 

ng-class 

ng-view 

ng-include 

ng-repeat 

ng-if 

ng-switch 

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

39 

 

 

 

 

 

 

Hide the DIV: 

 

g-hide="myCheck">

 

 

 

Hide the DIV: 

model="myCheck">

 

 

 

ng-app

="myApp" 

ng-controller

="formCtrl"> 

  

 

    First Name: 

ng-model

="firstname"> 

  

 

 

 

 

ng-app

=""> 

  

 

    First Name: 

ng-model

="

firstname

"> 

  

 

  

You entered: {{firstname}}

 

 

 

ng-app

=""> 

  

 

    Check to show a header: 

    

checkbox

" 

ng-model

="

myVar

"> 

  

 

  

myVar

">

TUIT

 

 

 

  Pick a topic: 

  

ng-

model

="myVar" value="edu">TUIT 

  

ng-

model

="myVar" 

value="Dekanat">Dekanat 

  

ng-

model

="myVar" 

value="Talaba">Talaba 

 

ng-switch

="myVar"> 

  

ng-switch-when

="edu"> 

     

TUIT

 

   

  ng-switch-when

="Dekanat"> 

     

Dekanat

 

        

  

ng-switch-when

="Talaba"> 

     

Talaba

 

       

ng-app

=""> 

 Select a topic: 

  <

select

 

ng-model

="myVar"> 

     

    

value

="TUIT">TUIT 

    

value

="Dekanat">Dekanat 

    

value

="Talaba">Talaba 

 

   

ng-switch

="myVar"> 

  

ng-switch-

when

="TUIT"> 

     

TUIT

  

  ng-switch-

when

="Dekanat"> 

     

Dekanat

 

 

  

ng-switch-

when

="Talaba"> 

     

Talaba

 

 

  

 

 

 

 

The input's valid state is:

 

{{myForm.myInput.$valid}}

 

 

 

 

 

The input's valid state is:

 

{{myForm.myInput.$valid}}

 

 

 

Try leaving the first input field blank:

 

 

Name: 

 

myForm.myName.$invalid">The name is required. 

 

Address: