Angular JS (session 2 )

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.16 MB, 19 trang )

nl
y
O
U
se
C
en
tre

Session 2

Fo
rA
pt
ec
h

Controllers, Expressions,
Sharing Data, and Two Way
Data Binding

nl
y

C
en
tre

U
se

Describe a simple AngularJS application
List the core components of AngularJS
Describe how data is shared between model and view
Identify the data binding

Fo
rA
pt
ec
h






O

Session Overview

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

2 of 19

nl
y

1-7

O

Introduction to a Simple AngularJS App

C
en
tre

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset-"UTF-8">
<title>Demo for a Simple AngularJS App</title>
</head>
<body>
</body>
</html>

Fo
rA
pt
ec
h

1.
2.
3.
4.

5.
6.
7.
8.
9.

U
se

Steps for writing and running Web application using AngularJS
Step 1 -> Form a basic HTML template.

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

3 of 19

nl
y

2-7

O

Introduction to a Simple AngularJS App

U
se

Steps for writing and running Web application using AngularJS
Step 2 -> Add the angular.js file to the basic HTML template.

Fo
rA
pt
ec
h

C
en
tre

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. 5. <title>Demo for a Simple AngularJS App</title>
6. src=" />min.js"></script>
7. </head>
8. <body>
9. </body>
10.</html>

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

4 of 19

nl
y

3-7

O

Introduction to a Simple AngularJS App

U
se

Steps for writing and running Web application using AngularJS
Step 3 -> Inform the angular, which section of the html will be
controlled by AngularJS by ‘ng-app’ directive.

Fo
rA
pt
ec
h

C
en
tre

1. <!DOCTYPE html>
2. <html lang="en" ng-app="myApp">
3. <head>

4. <meta charset="UTF-8">
5. <title>Demo for a Simple AngularJS App</title>
6. src=" />min.js"></script>
7. </head>
8. <body>
9. </body>
10.</html>

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

5 of 19

nl
y

4-7

O

Introduction to a Simple AngularJS App

U
se

Steps for writing and running Web application using AngularJS
Step 4 -> Define the app modules and controllers.

Fo
rA
pt
ec
h

C
en
tre

1. <!DOCTYPE html>
2. 3. <head>
4. <meta charset="UTF-8">
5. <title>Demo for a Simple AngularJS App</title>
6. src=" />min.js"></script>
</head>
7. <body>
8. <script>
9. var app = angular.module("myApp",[]);
10. </script>
11. </body>
12. </html>
Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

6 of 19

nl
y

5-7

O

Introduction to a Simple AngularJS App

U
se

Steps for writing and running Web application using AngularJS
Step 5 -> Add the controller of the application with the name
‘myController’.

Fo
rA
pt
ec
h

C
en
tre

1. <!DOCTYPE html>
2. 3. <head>
4.

5. <title>Demo for a Simple AngularJS App<title>
6. src=" />7. </head>
8. <bodyng-controller="myController">
9. <script>
10. var app = angular.module("myApp",[]);
11. app.controller("myController",function($scope){
12. $scope.name = "";
13. });
14. </script>
15. </body>
16. </html>
Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

7 of 19

nl
y

6-7

O

Introduction to a Simple AngularJS App

U
se

Steps for writing and running Web application using AngularJS
Step 6 -> Add the required elements in the HTML page.

Fo
rA
pt
ec
h

C
en
tre

1. <!DOCTYPE html>
2. 3. <head>
4. 5. <title>Demo for a Simple AngularJS App<title>
6. src=" />7. </head>
8. <bodyng-controller="myController">
9. <script>
10. var app = angular.module("myApp",[]);
11. app.controller("myController",function($scope){
12. $scope.name = "";
13. });
14. </script>
15. </body>
16. </html>
Dynamic and Responsive Web Development Using AngularJS

© Aptech Limited

8 of 19

nl
y

Introduction to a Simple AngularJS App

O

7-7

Fo
rA
pt
ec
h

C
en
tre

U
se

Steps for writing and running Web application using AngularJS
Step 7 -> Run the app in a modern browser.

Hello App When Loaded in a Browser

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

Hello App with User Input

9 of 19

nl
y
U
se

 It is a container used to hold other parts of
an application.

O

Modules

C
en
tre

 It has the option to define its own
controllers, services, filter, directives, and so
on.

Fo
rA
pt
ec
h

 It is used by AngularJS to start an
application.
<html lang="en" ng-app="myApp">
 We define or call a module using
’angular.module’ function.
var app = angular.module("myApp",[]);

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

10 of 19

nl
y

1-2

O

Controllers

U
se

 AngularJS applications depend on controllers to control the flow
of data in the application.

Fo
rA
pt
ec
h

C
en
tre

 We add ‘myController’ to the app using the app.controller()
method.
app.controller("myController",function($scope)
{
$scope.name = "";
});
 Controllers are JavaScript objects which have properties and
functions.
 We use a controller in an application by using “ng-controller”
directive.
<body ng-controller="myController">
Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

11 of 19

nl
y
C
en
tre

 Making available Data to UI

U
se

Responsibilities of Controllers

2-2

O

Controllers

 Managing presentation
 Handling user inputs

Fo
rA
pt
ec
h

 Processing data

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

12 of 19

nl
y
O

Views

Fo
rA
pt
ec
h

C
en
tre

U
se

The HTML code which gets rendered by the browser and is seen by
the user is also sometimes referred to as view.

View of the Hello App When Loaded in a Browser Initially

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

13 of 19

nl
y
U
se

O

Expressions

 AngularJS expression is similar to JavaScript code snippets.

C
en
tre

 It works with numbers and strings.
{{5+6}}
{{“Hello Aptech Student!”}}

Fo
rA
pt
ec

h

 It can also work with JavaScript objects and arrays.
{{ user.name }}
{{ items[index] }}

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

14 of 19

nl
y
O

Data Binding

U
se

What is data binding?
Data binding is a process of combining data between the model and
the view.

Fo
rA
pt
ec
h

C
en
tre

1. <!DOCTYPE html>
2. 3. <head>
4. 5. <title>Demo for a Simple AngularJS App<title>
6. src=" />7. </head>
8. <body>
9. <script>
10. var app = angular.module("myApp",[]);
11. app.controller("myController",function($scope){
12. $scope.name = "";
13. });
14. </script>
15. </body>
16. </html>
Data Binding with $scope

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

15 of 19

nl

y
O

Two Way Data Binding

Fo
rA
pt
ec
h

C
en
tre

U
se

An example of two way binding

Name; with two way data binding

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

16 of 19

nl
y

O

Event Handling

U
se

Some common AngularJS event listener directives

ng-dblclick

Fo
rA
pt
ec
h

ng-keydown

ng-change

C
en
tre

ng-click

ng-keypress

ng-mouseleave

ng-mouseenter

ng-mousedown

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

17 of 19

nl
y

1-2

O

Summary

 In AngularJS, modules are the containers used to hold other

U
se

parts of an application.

C
en
tre

 AngularJS applications depend on controllers to control the flow
of data in the application.
 Controllers are JavaScript objects which have properties and
functions.

Fo
rA
pt
ec
h

 Views are what the user gets to see in an application.
 AngularJS expressions are similar to JavaScript code snippets.
 Expressions can work with numbers, strings, JavaScript objects
and arrays.
 Data binding in AngularJS is the bringing together of data
between the model and the view.
Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

18 of 19

nl
y

2-2

O

Summary

C
en
tre

ng-dblclick
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-change

Fo
rA
pt
ec
h

•
•
•
•
•
•
•
•

U
se

 Some common AngularJS event listener directives for DOM
events are ng-click

Dynamic and Responsive Web Development Using AngularJS
© Aptech Limited

19 of 19

Angular JS (session 2 )

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về