sondmk header
ANGULAR JS
Intro : กำหนดค่าเริ่มต้นให้กับตัวแปรด้วย ng-init

Post by Goborijung at 2020-04-06 09:53:34 | ID: 460

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

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

</div>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_directives
Intro : ตัวอย่าง AngularJS Extends HTML

Post by Goborijung at 2020-04-06 09:49:42 | ID: 459

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro
Model : คำสั่งแสดงค่าให้กับ ng-model โดยตรง

Post by Goborijung at 2020-04-06 10:42:19 | ID: 472

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

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model
Model : ตัวอย่างการ Validate User Input

Post by Goborijung at 2020-04-06 10:52:31 | ID: 473

<form ng-app="" name="myForm">
  Email:
  <input type="email" name="myAddress" ng-model="text" >
  <span ng-show="myForm.myAddress.$error.email" >Not a valid e-mail address</span>
</form>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_validate



หรือ
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_status
Modules : การสร้าง Module

Post by Goborijung at 2020-04-06 10:27:13 | ID: 468

> โครงสร้าง
<div ng-app="myApp">...</div>

<script>

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

</script>

> การเพิ่ม Controller
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

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

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

</script>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_module
ng : เครื่องมือในการพัฒนาเว็บด้วย Angular JS Framework

Post by Goborijung at 2020-03-31 02:31:43 | ID: 451

1. Angular Framework 
: Download https://angularjs.org/

> Angular Document
https://docs.angularjs.org/api

> เว็บสำหรับสอน
http://www.daydev.com/

> เว็บสำหรับสอน
https://golfapipol.github.io/angularjs-th/lesson/lesson1.html
Scopes : การสร้างตัวแปร Object ด้วย scope

Post by Goborijung at 2020-04-06 11:08:28 | ID: 476

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});
Scopes : การสร้างตัวแปรแบบ Array ด้วย scope และการวนรอบด้วย ng-repeat

Post by Goborijung at 2020-04-06 11:15:50 | ID: 478

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

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_scope_repeat
Scopes : ตัวอย่างการใช้ scope

Post by Goborijung at 2020-04-06 11:10:32 | ID: 477

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

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_scope
Scopes : ตัวอย่างการใช้งาน RootScope

Post by Goborijung at 2020-04-06 11:18:44 | ID: 479

<body ng-app="myApp">

<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>

<div ng-controller="myCtrl">
  <p>The scope of the controller's favorite color:</p>
  <h1>{{color}}</h1>
</div>

<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>

<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>

Tryit
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_scope_rootscope
<<<123
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com