บทที่ 8 javascript framework: angularjsangularjs filters...

วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)

JavaScript Framework: AngularJSบทที่ 8

เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)

วัตถุประสงค์การเรียนรู้

เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับ JavaScript Framework: AngularJS

เพื่อให้ผู้เรียนสามารถน าเสนอการด าเนินงานเกี่ยวกับ JavaScript Framework: AngularJS เบื้องต้นได้


หัวข้อ

บทน า (Overview)

Expressions

Modules

Directives

Model

Data Binding

Controllers

Filters

Events

SQL

Routing

Application

สรุป (Summary)


บทน า (Overview)


AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

ท่ีมา: https://docs.angularjs.org/guide/concepts

AngularJS is a JavaScript Framework


AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

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

AngularJS Extends HTML


AngularJS extends HTML with ng-directives. The ng-app directive defines

an AngularJS application. The ng-model directive binds

the value of HTML controls (input, select, textarea) to application data.

The ng-bind directive binds application data to the HTML view.

ที่มา: https://www.w3schools.com/angular/angular_intro.asp

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angula

rjs/1.6.4/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 Extends HTML (ต่อ)


AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the

"owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

AngularJS Directives


As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initializes AngularJS application variables.

<div ng-app="" ng-init="firstName='John'">

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

</div>

AngularJS Expressions


AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will "output" data exactly where the expression is written:

<div ng-app="">

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

AngularJS Expressions (ต่อ)


AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

<div ng-app="">

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

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

AngularJS Applications


AngularJS modules define AngularJS applications.

AngularJS controllers control AngularJS applications. ng-app directive defines the

application

ng-controller directive defines the controller

ท่ีมา: https://www.w3schools.com/angular/angular_intro.asp

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


The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model Directive Two-Way Binding


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

</div>

<script>



$scope.name = "John Doe";

});</script>


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

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

AngularJS Data Binding


Data binding in AngularJS is the synchronization between the model and the view.

ที่มา: https://www.w3schools.com/angular/angular_databinding.asp



$scope.firstname = "John";

$scope.lastname = "Doe";});

Data Model

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

HTML View

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


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

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

AngularJS Controllers

AngularJS applications are controlled by controllers. The ng-controller directive

defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.


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


app.controller('personCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

$scope.fullName = function() {

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

};

});</script>

ที่มา: https://www.w3schools.com/angular/angular_controllers.asp

AngularJS Controllers :Controllers In External Files


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

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

$scope.names = [

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

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

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

];});

AngularJS Scopes


The scope is the binding part between the HTML (view) and the JavaScript (controller).

The scope is an object with the available properties and methods.

The scope is available for both the view and the controller.


<h1>{{carname}}</h1>

</div>

<script>



$scope.carname = "Volvo";

});

</script>

AngularJS Scopes (ต่อ)


scope are dealing with, at any timeWhen dealing with

the ng-repeat directive, each repetition has access to the current repetition object:


<ul>

<li ng-repeat="x in names">{{x}}</li>

</ul>

</div>

<script>



$scope.names = ["Emil", "Tobias", "Linus"];

});

</script>

AngularJS Filters


AngularJS provides filters to transform data:• currency Format a number to a currency format.

• date Format a date to a specified format.

• filter Select a subset of items from an array.

• json Format an object to a JSON string.

• limitTo Limits an array/string, into a specified number of elements/characters.

• lowercase Format a string to lower case.

• number Format a number to a string.

• orderBy Orders an array by an expression.

• uppercase Format a string to upper case.ที่มา: https://www.w3schools.com/angular/angular_filters.asp

AngularJS Filters (ต่อ)


Adding Filters to Expressions

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

<p>The name is {{ lastName | uppercase }}</p>

</div> Adding Filters to Directives

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>

<li ng-repeat="x in names | orderBy:'country'">

{{ x.name + ', ' + x.country }}

</li>

</ul>

</div>

AngularJS Filters (ต่อ)


Filter an Array Based on User Input

AngularJS Services


The $location service has methods which return information about the location of the current web page

The $http service makes a request to the server, and lets your application handle the response.

$timeout service

$interval Service

Create Your Own Service


app.controller('customersCtrl', function($scope,

$location) {

$scope.myUrl = $location.absUrl();});


app.controller('myCtrl', function($scope, $http) {

$http.get("welcome.htm").then(function (response) {

$scope.myWelcome = response.data;

});});

AngularJS AJAX - $http


AngularJS $http The AngularJS $http service makes a

request to the server, and returns a response.

Methods There are several shortcut methods:

.delete() .get() .head() .jsonp() .patch() .post() .put()

PropertiesThe response from the server is an object with these properties:

• .config the object used to generate the request.• .data a string, or an object, carrying the response from the server.• .headers a function to use to get header information.• .status a number defining the HTTP status.• .statusText a string defining the HTTP status.

ที่มา: https://www.w3schools.com/angular/angular_http.asp

JSON


The data you get from the response is expected to be in JSON format.

JSON is a great way of transporting data, and it is easy to use within AngularJS, or any other JavaScript.

<div ng-app="myApp" ng-

controller="customersCtrl">

<ul>

<li ng-repeat="x in myData">

{{ x.Name + ', ' + x.Country }}

</li>

</ul>

</div>

<script>


app.controller('customersCtrl', function($scope,

$http) {

$http.get("customers.php").then(function(response

) {

$scope.myData = response.data.records;

});

});

</script>

[customers.php] https://www.w3schools.com/angular/customers.php

AngularJS SQL


AngularJS is perfect for displaying data from a Database. Just make sure the data is in JSON format. <div ng-app="myApp" ng-controller="customersCtrl">

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Country }}</td>

</tr>

</table>

</div>

<script>


app.controller('customersCtrl', function($scope, $http) {

$http.get("customers_mysql.php")

.then(function (response) {$scope.names = response.data.records;});

});</script>


<?php

header("Access-Control-Allow-Origin: *");

header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";

while($rs = $result->fetch_array(MYSQLI_ASSOC)) {

if ($outp != "") {$outp .= ",";}

$outp .= '{"Name":"' . $rs["CompanyName"] . '",';

$outp .= '"City":"' . $rs["City"] . '",';

$outp .= '"Country":"'. $rs["Country"] . '"}';

}

$outp ='{"records":['.$outp.']}';

$conn->close();

echo($outp);?>

Server Code PHP and MySQL** บาง server อาจมีการก าหนดค่าไว้แล้ว สามารถละไว้ได้ **

AngularJS Events

ng-blur ng-change ng-click ng-copy ng-cut ng-dblclick ng-focus ng-keydown ng-keypress

ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng-paste


AngularJS has its own HTML events directives.

AngularJS Events



<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>

<script>



$scope.count = 0;

});</script>

Add mouse events on any HTML element

AngularJS Routing


The ngRoute module helps your application to become a Single Page Application.

The ngRoute module routes your application to different pages without reloading the entire application.

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>

<a href="#!green">Green</a>

<a href="#!blue">Blue</a>

<div ng-view></div>

<script>

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

app.config(function($routeProvider) {

$routeProvider

.when("/", {

templateUrl : "main.htm"

})

.when("/red", {

templateUrl : "red.htm"

})

.when("/green", {

templateUrl : "green.htm"

})

.when("/blue", {

templateUrl : "blue.htm"

});

});

</script></body>

AngularJS Routing (ต่อ)


To make your applications ready for routing, you must include the AngularJS Route module

Then you must add the ngRoute as a dependency in the application module

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

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

AngularJS Routing (ต่อ)


Use the $routeProvider to configure different routes in your application

Applications can only have one ng-view directive, and this will be the placeholder for all views provided by the route.

AngularJS Application:It is time to create a real AngularJS Application.


Make a Shopping List Todo

สรุป (Summary)

Expressions

Modules

Directives

Model

Data Binding

Controllers

Filters

Events

SQL

Routing

Application


ศึกษาและเรียนรู้เก่ียวกับ AngularJS ดังนี้

แบบฝึกปฏิบัติ


ก าหนดให้สร้างเว็บไซต์ เพื่อประยุกต์ใช้ AngularJS และสามารถท างานร่วมกับ Server Code (PHP) เช่น การจัดเก็บลงฐานข้อมูล การอ่านข้อมูล การค้นหาข้อมูล หรือการด าเนินการอื่น ๆ ตามความเหมาะสม

โดยก าหนดให้ 1 คนต่อ 1 เว็บไซต์ (พัฒนาอย่างน้อย 1 ฟังก์ชันงาน)

เอกสารอ้างอิง


AngularJS – JavaScript MVW Framework (Online), Available at: https://angularjs.org/

AngularJS Tutorial (Online), Available at: https://www.w3schools.com/angular

บทที่ 8 javascript framework: angularjsangularjs filters...

Documents