JavaScript Framework: AngularJS

Size: px

Start display at page:

Download "JavaScript Framework: AngularJS"

Grant Jenkins
5 years ago
Views:

1 บทท 8 JavaScript Framework: AngularJS ว ชา เทคโนโลย เว บ (รห สว ชา )

2 ว ตถ ประสงค การเร ยนร เพ อให ผ เร ยนม ความร ความเข าใจเก ยวก บ JavaScript Framework: AngularJS เพ อให ผ เร ยนสามารถนาเสนอการดาเน นงานเก ยวก บ JavaScript Framework: AngularJS เบ องต นได

3 ห วข อ บทนา (Overview) Expressions Modules Directives Model Data Binding Controllers Filters Events SQL Routing Application สร ป (Summary)

AngularJS extends HTML attributes with Directives, and binds

4 บทนา (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. ท มา:

5 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=" angular.min.js"></script>

6 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. <!DOCTYPE html> <html> <script src=" 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> ท มา:

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

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

9 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: {{ }}</p> </div>

10 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

11 AngularJS Applications AngularJS modules define AngularJS applications. AngularJS controllers control AngularJS applications. ng-app directive defines the application ng-controller directive defines the controller <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> ท มา:

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

13 AngularJS Data Binding Data binding in AngularJS is the synchronization between the model and the view. Data Model HTML View var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; }); <p ng-bind="firstname"></p> <p>first name: {{firstname}}</p> <div ng-app="myapp" ng-controller="myctrl"> Name: <input ng-model="firstname"> <h1>{{firstname}}</h1> </div> ท มา:

14 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> 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> ท มา:

15 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'} ]; });

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

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

17 AngularJS Scopes (ต อ) scope are dealing with, at any time When 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>

18 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. ท มา:

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

20 AngularJS Filters (ต อ) Filter an Array Based on User Input

21 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 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; }); });

22 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() Properties.head() The response from the server is an object with these properties:.jsonp().config the object used to generate the request..patch().data a string, or an object, carrying the response from the server..post().headers a function to use to get header information..put().status a number defining the HTTP status..statustext a string defining the HTTP status. ท มา:

23 JSON <div ng-app="myapp" ngcontroller="customersctrl"> <ul> <li ng-repeat="x in mydata"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script> 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. 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]

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

25 Server Code PHP and MySQL <?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 อาจม การกาหนดค าไว แล ว สามารถละไว ได **. '"}';

26 AngularJS Events AngularJS has its own HTML events directives. 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

27 AngularJS Events Add mouse events on any HTML element <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>

28 AngularJS Routing The ngroute module helps your application to become a Single Page Application. The ngroute module routes you r 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>

29 AngularJS Routing (ต อ) To make your applications ready for routing, you must include the AngularJS Route module <script src=" Then you must add the ngroute as a dependency in the application module var app = angular.module("myapp", ["ngroute"]);

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

31 AngularJS Application: It is time to create a real AngularJS Application. Make a Shopping List Todo

32 สร ป (Summary) ศ กษาและเร ยนร เก ยวก บ AngularJS ด งน Expressions Modules Directives Model Data Binding Controllers Filters Events SQL Routing Application

33 แบบฝ กปฏ บ ต กาหนดให สร างเว บไซต เพ อประย กต ใช AngularJS และสามารถทางาน ร วมก บ Server Code (PHP) เช น การจ ดเก บลงฐานข อม ล การอ าน ข อม ล การค นหาข อม ล หร อการดาเน นการอ น ๆ ตามความเหมาะสม โดยกาหนดให 1 คนต อ 1 เว บไซต (พ ฒนาอย างน อย 1 ฟ งก ช นงาน)

34 เอกสารอ างอ ง AngularJS JavaScript MVW Framework (Online), Available at: AngularJS Tutorial (Online), Available at:

What is AngularJS. à Javascript Framework à MVC à for Rich Web Application Development à by Google

What is AngularJS. à Javascript Framework à MVC à for Rich Web Application Development à by Google AngularJS What is AngularJS à Javascript Framework à MVC à for Rich Web Application Development à by Google Why AngularJS Other frameworks deal with HTML s shortcomings by either abstracting away HTML,