คอนโทรลเลอร์ AngularJS พร้อมตัวอย่าง ng-Controller

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

คอนโทรลเลอร์ใน AngularJS คืออะไร?

A ตัวควบคุม ใน AngularJS จะใช้ข้อมูลจากมุมมอง ประมวลผลข้อมูล จากนั้นส่งข้อมูลดังกล่าวไปยังมุมมองซึ่งจะแสดงให้ผู้ใช้ปลายทางเห็น ตัวควบคุมจะมีตรรกะทางธุรกิจหลักของคุณ ตัวควบคุมจะใช้แบบจำลองข้อมูล ดำเนินการประมวลผลที่จำเป็น จากนั้นจึงส่งเอาต์พุตไปยังมุมมองซึ่งจะแสดงให้ผู้ใช้ปลายทางเห็น

คอนโทรลเลอร์ใดทำจากมุมมองของแองกูลาร์

ต่อไปนี้เป็นคำจำกัดความง่ายๆ ของการทำงานของ AngularJS Controller:

การทำงานของคอนโทรลเลอร์ AngularJS
การทำงานของคอนโทรลเลอร์ AngularJS
  • ความรับผิดชอบหลักของตัวควบคุมคือการควบคุมข้อมูลที่ส่งผ่านไปยังมุมมอง ขอบเขตและมุมมองมีการสื่อสารสองทาง
  • คุณสมบัติของมุมมองสามารถเรียก “ฟังก์ชัน” บนขอบเขตได้ นอกจากนี้เหตุการณ์ในมุมมองยังสามารถเรียกว่า “วิธีการ” ในขอบเขตได้ ข้อมูลโค้ดด้านล่างนี้เป็นตัวอย่างง่ายๆ ของฟังก์ชัน
    • เค้ก ฟังก์ชั่น($ขอบเขต) ซึ่งถูกกำหนดไว้เมื่อกำหนดคอนโทรลเลอร์และฟังก์ชันภายในซึ่งใช้ในการส่งคืนการต่อข้อมูลของ $scope.firstName และ $scope.lastName
    • In AngularJSเมื่อคุณกำหนดฟังก์ชันเป็นตัวแปร จะเรียกว่าเมธอด

การทำงานของคอนโทรลเลอร์ AngularJS

  • ข้อมูลด้วยวิธีนี้จะส่งผ่านจากตัวควบคุมไปยังขอบเขต จากนั้นข้อมูลจะถูกส่งกลับไปกลับมาจากขอบเขตไปยังมุมมอง
  • ขอบเขตใช้เพื่อแสดงโมเดลในมุมมอง โมเดลสามารถแก้ไขได้ผ่านวิธีการที่กำหนดไว้ในขอบเขตซึ่งสามารถทริกเกอร์ผ่านเหตุการณ์จากมุมมองได้ เราสามารถกำหนดการเชื่อมโยงโมเดลสองทางจากขอบเขตไปยังโมเดลได้
  • ไม่ควรนำตัวควบคุมมาใช้เพื่อควบคุม DOM ควรใช้คำสั่งที่เราจะเห็นในภายหลัง
  • แนวทางปฏิบัติที่ดีที่สุดคือการมีคอนโทรลเลอร์ตามฟังก์ชันการทำงาน ตัวอย่างเช่น หากคุณมีแบบฟอร์มสำหรับการป้อนข้อมูลและคุณต้องการตัวควบคุมสำหรับสิ่งนั้น ให้สร้างตัวควบคุมที่เรียกว่า "ตัวควบคุมแบบฟอร์ม"

วิธีสร้างคอนโทรลเลอร์พื้นฐานใน AngularJS

ด้านล่างนี้เป็นขั้นตอนในการสร้างคอนโทรลเลอร์ใน AngularJS:

ขั้นตอนที่ 1) สร้างเพจ HTML พื้นฐาน

ก่อนที่เราจะเริ่มด้วยการสร้างคอนโทรลเลอร์ เราจำเป็นต้องมีการตั้งค่าเพจ HTML พื้นฐานก่อน

ข้อมูลโค้ดด้านล่างเป็นหน้า HTML ธรรมดาซึ่งมีชื่อว่า “การลงทะเบียนกิจกรรม” และมีการอ้างอิงถึงไลบรารีที่สำคัญเช่น Bootstrap, jquery และเชิงมุม

สร้างคอนโทรลเลอร์พื้นฐานใน AngularJS

  1. เรากำลังเพิ่มการอ้างอิงไปยังสไตล์ชีต CSS ของ Bootstrap ซึ่งจะใช้ร่วมกับไลบรารี Bootstrap
  2. เรากำลังเพิ่มการอ้างอิงไปยังไลบรารี angularjs ดังนั้น ไม่ว่าเราทำอะไรกับ angular.js ต่อไป จะถูกอ้างอิงจากไลบรารีนี้
  3. เรากำลังเพิ่มการอ้างอิงไปยังไลบรารีบูตสแตรปเพื่อทำให้หน้าเว็บของเราตอบสนองมากขึ้นสำหรับการควบคุมบางอย่าง
  4. เราได้เพิ่มการอ้างอิงไปยังไลบรารี jquery ซึ่งจะใช้สำหรับการจัดการ DOM สิ่งนี้จำเป็นโดย Angular เนื่องจากฟังก์ชันบางอย่างใน Angular ขึ้นอยู่กับไลบรารีนี้

ตามค่าเริ่มต้น ข้อมูลโค้ดข้างต้นจะแสดงอยู่ในตัวอย่างทั้งหมดของเรา เพื่อให้เราสามารถแสดงเฉพาะโค้ด angularJS ที่เฉพาะเจาะจงในส่วนต่อๆ ไป

ขั้นตอนที่ 2) ตรวจสอบไฟล์และโครงสร้างไฟล์

ประการที่สอง มาดูไฟล์และโครงสร้างไฟล์ของเราซึ่งเราจะเริ่มต้นด้วยตลอดระยะเวลาของหลักสูตร

สร้างคอนโทรลเลอร์พื้นฐานใน AngularJS

  1. อันดับแรก เราจะแยกไฟล์ของเราออกเป็น 2 โฟลเดอร์ เช่นเดียวกับที่ทำกับเว็บแอปพลิเคชันทั่วไป เรามีโฟลเดอร์ "CSS" มันจะบรรจุไฟล์สไตล์ชีทแบบเรียงซ้อนทั้งหมดของเรา จากนั้นเราจะมีโฟลเดอร์ “lib” ซึ่งจะมีไฟล์ของเราทั้งหมด Javaต้นฉบับ ไฟล์
  2. ไฟล์ bootstrap.css ถูกวางไว้ในโฟลเดอร์ CSS และใช้เพื่อเพิ่มรูปลักษณ์ที่สวยงามให้กับเว็บไซต์ของเรา
  3. angular.js เป็นไฟล์หลักของเราซึ่งดาวน์โหลดจากไซต์ angularJS และเก็บไว้ในโฟลเดอร์ lib ของเรา
  4. ไฟล์ app.js จะมีโค้ดของเราสำหรับคอนโทรลเลอร์
  5. ไฟล์ bootstrap.js ใช้เพื่อเสริมไฟล์ bootstrap.cs เพื่อเพิ่มฟังก์ชัน bootstrap ให้กับเว็บแอปพลิเคชันของเรา
  6. ไฟล์ jquery จะถูกใช้เพื่อเพิ่มฟังก์ชันการจัดการ DOM ให้กับเว็บไซต์ของเรา

ขั้นตอนที่ 3) ใช้โค้ด AngularJS เพื่อแสดงผลลัพธ์

สิ่งที่เราต้องการทำที่นี่คือการแสดงคำว่า "AngularJS" ทั้งในรูปแบบข้อความและในกล่องข้อความเมื่อเปิดดูหน้าในเบราว์เซอร์ มาดูตัวอย่างการใช้ angular.js เพื่อทำสิ่งนี้กัน:

สร้างคอนโทรลเลอร์พื้นฐานใน AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

คำอธิบายรหัส:

  1. เค้ก ng-แอป คำหลักใช้เพื่อแสดงว่าแอปพลิเคชันนี้ควรได้รับการพิจารณาว่าเป็นแอปพลิเคชันเชิงมุม อะไรก็ได้ที่ขึ้นต้นด้วยคำนำหน้า 'อึ้ง' เป็นที่รู้จักกันในชื่อไฟล์ คำสั่ง- “DemoApp” เป็นชื่อที่ตั้งให้กับแอปพลิเคชัน Angular.JS ของเรา
  2. เราได้สร้างแท็ก div และในแท็กนี้ เราได้เพิ่มคำสั่ง ng-controller พร้อมกับชื่อของคอนโทรลเลอร์ “DemoController” ของเรา โดยพื้นฐานแล้วสิ่งนี้ทำให้แท็ก div ของเราสามารถเข้าถึงเนื้อหาของ Demo Controller คุณต้องระบุชื่อของคอนโทรลเลอร์ภายใต้คำสั่งเพื่อให้แน่ใจว่าคุณสามารถเข้าถึงฟังก์ชันการทำงานที่กำหนดไว้ภายในคอนโทรลเลอร์ได้
  3. เรากำลังสร้างการเชื่อมโยงโมเดลโดยใช้ไดเร็กทิฟ ng-model ซึ่งจะเชื่อมโยงกล่องข้อความสำหรับชื่อบทช่วยสอนเข้ากับตัวแปรสมาชิก “tutorialName”
  4. เรากำลังสร้างตัวแปรสมาชิกที่เรียกว่า "tutorialName" ซึ่งจะใช้เพื่อแสดงข้อมูลที่ผู้ใช้พิมพ์ในกล่องข้อความสำหรับชื่อบทช่วยสอน
  5. เรากำลังสร้างโมดูลที่จะแนบไปกับแอปพลิเคชัน DemoApp ของเรา ดังนั้นโมดูลนี้จึงกลายเป็นส่วนหนึ่งของแอปพลิเคชันของเรา
  6. ในโมดูล เรากำหนดฟังก์ชันที่กำหนดค่าเริ่มต้นของ “AngularJS” ให้กับตัวแปร TutorialName ของเรา

หากดำเนินการคำสั่งสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

สร้างคอนโทรลเลอร์พื้นฐานใน AngularJS

เนื่องจากเราได้กำหนดตัวแปร tutorialName ให้มีค่าเป็น “Angular JS” ตัวแปรนี้จึงแสดงในกล่องข้อความและในบรรทัดข้อความธรรมดา

บทความที่เกี่ยวข้อง

วิธีกำหนดวิธีการในตัวควบคุม AngularJS

โดยปกติแล้ว เราต้องการกำหนดหลายวิธีในคอนโทรลเลอร์เพื่อแยกตรรกะทางธุรกิจ

ตัวอย่างเช่น สมมติว่าคุณต้องการให้คอนโทรลเลอร์ทำ 2 สิ่งพื้นฐาน

  1. ทำการบวกเลข 2 ตัว
  2. ดำเนินการลบเลข 2 ตัว

จากนั้นคุณควรสร้างวิธีการ 2 วิธีภายในคอนโทรลเลอร์ของคุณ วิธีหนึ่งสำหรับการบวกและอีกวิธีหนึ่งสำหรับการลบ

มาดูตัวอย่างง่ายๆ ของวิธีที่คุณสามารถกำหนดวิธีการแบบกำหนดเองภายในตัวควบคุม Angular.JS คอนโทรลเลอร์ก็จะส่งคืนสตริง

กำหนดวิธีการในตัวควบคุม AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

คำอธิบายรหัส:

  1. ที่นี่เราเพียงกำหนดฟังก์ชันที่ส่งคืนสตริงของ “AngularJS” ฟังก์ชั่นนี้แนบมากับวัตถุขอบเขตผ่านตัวแปรสมาชิกที่เรียกว่า TutorialName
  2. หากดำเนินการคำสั่งสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

กำหนดวิธีการในตัวควบคุม AngularJS

คอนโทรลเลอร์ AngularJS พร้อมตัวอย่าง ng-Controller

มาดูตัวอย่างของ “HelloWorld” ที่ฟังก์ชันการทำงานทั้งหมดถูกรวมไว้ในไฟล์เดียว ตอนนี้ได้เวลาวางโค้ดสำหรับคอนโทรลเลอร์ในไฟล์แยกกัน

ทำตามขั้นตอนด้านล่างเพื่อทำสิ่งนี้:

ขั้นตอน 1) ในไฟล์ app.js เพิ่มโค้ดต่อไปนี้สำหรับตัวควบคุมของคุณ

คอนโทรลเลอร์ AngularJS พร้อม ng-Controller

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

โค้ดด้านบนทำสิ่งต่อไปนี้:

  1. กำหนดโมดูลที่เรียกว่า "แอป" ซึ่งจะเก็บคอนโทรลเลอร์ไว้พร้อมกับฟังก์ชันการทำงานของคอนโทรลเลอร์
  2. สร้างคอนโทรลเลอร์ชื่อ “HelloWorldCtrl” คอนโทรลเลอร์นี้จะถูกใช้เพื่อให้มีฟังก์ชันในการแสดงข้อความ "Hello World"
  3. วัตถุขอบเขตใช้เพื่อส่งข้อมูลจากคอนโทรลเลอร์ไปยังมุมมอง ดังนั้นในกรณีของเรา ขอบเขตวัตถุจะถูกนำมาใช้เพื่อเก็บตัวแปรที่เรียกว่า “ข้อความ”
  4. เรากำลังกำหนดข้อความตัวแปรและกำหนดค่า "Hello World" ให้กับข้อความนั้น

ขั้นตอน 2) ตอนนี้ ในไฟล์ Sample.html ของคุณ ให้เพิ่มคลาส div ซึ่งจะมีคำสั่ง ng-controller จากนั้นเพิ่มการอ้างอิงไปยังตัวแปรสมาชิก “ข้อความ”

อย่าลืมเพิ่มการอ้างอิงไปยังไฟล์สคริปต์ app.js ซึ่งมีซอร์สโค้ดสำหรับคอนโทรลเลอร์ของคุณ

คอนโทรลเลอร์ AngularJS พร้อม ng-Controller

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

หากป้อนโค้ดด้านบนถูกต้อง ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

คอนโทรลเลอร์ AngularJS พร้อม ng-Controller

สรุป

  • ความรับผิดชอบหลักของคอนโทรลเลอร์คือการสร้างวัตถุขอบเขตซึ่งจะถูกส่งต่อไปยังมุมมอง
  • วิธีสร้างคอนโทรลเลอร์อย่างง่ายโดยใช้คำสั่ง ng-app, ng-controller และ ng-model
  • วิธีเพิ่มวิธีการแบบกำหนดเองให้กับคอนโทรลเลอร์ซึ่งสามารถใช้เพื่อแยกฟังก์ชันการทำงานต่าง ๆ ภายในโมดูล angularjs
  • สามารถกำหนดคอนโทรลเลอร์ในไฟล์ภายนอกเพื่อแยกเลเยอร์นี้ออกจากเลเยอร์มุมมอง โดยปกติแล้วนี่เป็นแนวทางปฏิบัติที่ดีที่สุดเมื่อสร้างเว็บแอปพลิเคชัน