บทที่ 8 javascript framework: angularjsangularjs filters...
Post on 11-Jul-2020
8 Views
Preview:
TRANSCRIPT
วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)
JavaScript Framework: AngularJSบทที่ 8
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
วัตถุประสงค์การเรียนรู้
เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับ JavaScript Framework: AngularJS
เพื่อให้ผู้เรียนสามารถน าเสนอการด าเนินงานเกี่ยวกับ JavaScript Framework: AngularJS เบื้องต้นได้
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
หัวข้อ
บทน า (Overview)
Expressions
Modules
Directives
Model
Data Binding
Controllers
Filters
Events
SQL
Routing
Application
สรุป (Summary)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
บทน า (Overview)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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 (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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 (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-model Directive Two-Way Binding
<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>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1></div>
AngularJS Data Binding
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
Data binding in AngularJS is the synchronization between the model and the view.
ที่มา: https://www.w3schools.com/angular/angular_databinding.asp
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";});
Data Model
<p ng-bind="firstname"></p>
HTML View
<p>First name: {{firstname}}</p>
<div ng-app="myApp" ng-controller="myCtrl">
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.
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
<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>
ที่มา: https://www.w3schools.com/angular/angular_controllers.asp
AngularJS Controllers :Controllers In External Files
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
<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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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.
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
AngularJS Scopes (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
scope are dealing with, at any timeWhen dealing with
the ng-repeat directive, each repetition has access to the current repetition object:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
AngularJS Filters
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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 (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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 (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
Filter an Array Based on User Input
AngularJS Services
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,
$location) {
$scope.myUrl = $location.absUrl();});
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});});
AngularJS AJAX - $http
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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>
var app = angular.module('myApp', []);
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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers_mysql.php")
.then(function (response) {$scope.names = response.data.records;});
});</script>
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
<?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
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
AngularJS has its own HTML events directives.
AngularJS Events
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});</script>
Add mouse events on any HTML element
AngularJS Routing
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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 (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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 (ต่อ)
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
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.
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
Make a Shopping List Todo
สรุป (Summary)
Expressions
Modules
Directives
Model
Data Binding
Controllers
Filters
Events
SQL
Routing
Application
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
ศึกษาและเรียนรู้เก่ียวกับ AngularJS ดังนี้
แบบฝึกปฏิบัติ
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
ก าหนดให้สร้างเว็บไซต์ เพื่อประยุกต์ใช้ AngularJS และสามารถท างานร่วมกับ Server Code (PHP) เช่น การจัดเก็บลงฐานข้อมูล การอ่านข้อมูล การค้นหาข้อมูล หรือการด าเนินการอื่น ๆ ตามความเหมาะสม
โดยก าหนดให้ 1 คนต่อ 1 เว็บไซต์ (พัฒนาอย่างน้อย 1 ฟังก์ชันงาน)
เอกสารอ้างอิง
เอกสารประกอบการสอน รายวิชา เทคโนโลยีเว็บ (04-06-204)
AngularJS – JavaScript MVW Framework (Online), Available at: https://angularjs.org/
AngularJS Tutorial (Online), Available at: https://www.w3schools.com/angular
top related